Note that for this lesson and all subsequent lessons, make sure you can run a simple Flutter app first. This is because this course module is condensed and we'll be diving into Flutter features from step one, so ensuring you are set up beforehand will be important.
So in this lesson we'll be:
If you'd like a deep dive video more (tailored for junior developers), check out this step by step tutorial. If you're more experienced, let's press on:
flutter create tourismandco
. "Tourism & Co." will be the name of the app we'll create.main.dart
and let's create a much simpler project. Create the following files using the file names as cited at the top of each code sample below:main.dart
is the entry point to any Flutter apprunApp()
is the Flutter method that kicks off our high level widget, App
App()
here is a widget we'll create next// main.dart
import 'package:flutter/material.dart';
import 'app.dart';
void main() => runApp(App());
app.dart
is more or less of a convention used to represent our high level widgetStatelessWidget
, our de facto, "go-to" type of widget in Flutterbuild()
is the main "rendering logic" for any widget we'll create, returns what should be displayed on the screenMaterialApp
is Flutter's high level widget used if we want to use any Material Design based widgets. Apple style widgets are available using CupertinoApp
but less common, as Material Design widget can be customized more easily, esp useful for hybrid UIs.// app.dart
import 'package:flutter/material.dart';
import 'screens/home/home.dart';
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
// screens/home/home.dart
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: Text(''),
);
}
}
That wraps it up for this lesson. You should now be have a comfortable idea of what it's like to implement a simple screen in Flutter. I recommend playing around with the code yourself, explore what other options are available for each widget and make sure you familiarize yourself further with VSCode.
In the next lesson, we'll start to implement the first screen of our app.