Flutter Crash Course: "01 - Hello, Scaffold"

In This Lesson

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:

1. Setting up a project
2. Working with Widgets, MaterialApp, syntax basics
3. Creating a simple screen, StatelessWidget, AppBar, Container, Text

Setting up a Project

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:

• Run flutter create tourismandco. "Tourism & Co." will be the name of the app we'll create.
• Open the project using Visual Studio Code (free)
• Make sure you can run it vis the VSCode menu: Debug > Start Debugging
• Ignore the generated code as it's pretty confusing, even for experience developers. So delete 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

• main.dart is the entry point to any Flutter app
• runApp() 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());

Step 2 of 3: Working with Widgets, MaterialApp, syntax basics

app.dart

• app.dart is more or less of a convention used to represent our high level widget
• We're building our own widget here effectively
• Known as a StatelessWidget, our de facto, "go-to" type of widget in Flutter
• build() is the main "rendering logic" for any widget we'll create, returns what should be displayed on the screen
• MaterialApp 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(),
    );
  }
}

Step 3 of 3: Creating a simple screen, StatelessWidget, AppBar, Container, Text

// 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(''),
    );
  }
}

Conclusion

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.