Install the Flutter SDK & Create Your First Project

Flutter Project Walkthrough

Run a Flutter App on iOS

Run a Flutter App on Android

Walkthrough of the Default Flutter Application Boilerplate

Style a Flutter Text and Container Widget

Using Themes in Flutter to Share Colors and Font Styles

Load an Image in a Flutter App with the Image Class

Building Layouts in Flutter with Layout Widgets

Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application

Creating & Updating State in a Flutter Application

Getting Started with Navigation in Flutter

Building Dynamic Lists in Flutter with ListViews

Navigation with Named Routes in Flutter

Getting Started with Flutter

When creating a new Flutter application, you are given a simple templated Flutter project whose primary code lives in the main.dart file. In this lesson, we walk through this file & talk about what the boilerplate code is doing.

Instructor: [00:01] Let's take a look at the main.dart file that the application scaffold has given us. First, we import the flutter/material.dart package, which includes Flutter widgets implementing material design.

[00:18] Every Dart application must have a top-level main function which serves as the entry point to the app. The main function returns runApp, which initializes the MyApp widget. The runApp function will inflate the given widget and attach it to the screen, in this case the MyApp widget.

[00:37] MyApp is a stateless widget. A stateless widget is a widget that describes part of the user interface by building a group of other widgets that describe the user interface.

[00:47] Stateless widgets are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself and the arguments in which the widget is created.

[00:58] Next, we call @override build. @override points out that the function, in this case the build function, is also defined in an ancestor class but is being redefined to do something else in the current class. It's also used to annotate the implementation of an abstract method.

[01:16] In order for a widget to return other widgets, we must define a build method that describes this UI. The build method must always return a widget type. Here, the widget type that we're returning is MaterialApp.

[01:29] Build receives an argument of context of type BuildContext. BuildContext is an abstract class acting as a handle to the location of a widget in the widget tree.

[01:39] MaterialApp is a convenience widget that wraps a number of widgets that are commonly required for material design applications. It builds upon a WidgetsApp class, another Flutter convenience class, by adding material design-specific functionality.

[01:55] The Myhome page widget is an instance of a stateful widget. A stateful widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface.

[02:06] Stateful widgets are used when part of the user interface you're describing can change dynamically. Stateful widgets will return a state class, as we see with the _Myhome pageState class.

[02:18] State objects are created by the framework by calling the StatefulWidget.createState method. In order to manage local state, we must use a combination of stateful widgets and state classes.

Course

Getting Started with Flutter

Walkthrough of the Default Flutter Application Boilerplate

Share this video with your friends