A Basic Flutter App with Scaffold

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:

main.dart

// 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

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.