Flutter Default Application Project
All of the application code resides in one file: ‘main.dart’ in the ‘lib’ folder.
Remember that Dart lets you declare multiple objects within a single file!
Introduction to Composition & WidgetsWidgets are the Building Blocks of your UI.
Whenever we build a user interface in Flutter, it is composed of Widgets.
Putting your widgets together is called Composition.
Widget TreeUnlike a Jigsaw, a widget can contain other widgets, in a tree structure, a hierarchy. This is often called a Widget Tree.
Composition & Widgets in the Default ApplicationIf you look at the next diagram, the Object/Widget tree is on the left and the UI is on the right. You can see how they correspond to each other. Note that in the object/widget tree, the blue objects are custom widgets and the orange objects are flutter widgets.
Custom Widgets in Default ApplicationThe blue objects in the diagram above. Although the default application contains many widgets, only two custom widgets were required to make it work:
MyApp widget.It is a custom widget for the entire application.
MyHomePage widget.It is a custom widget that contains the layout for the application, plus the application state (the counter).
Other Widgets in Default ApplicationThe orange objects in the diagram above. The rest of the widgets are from the Flutter widget library, already built for us.
The blue object is the scaffold widget.
The red object is the app bar widget.
The green object is the center widget, which contains a column object, which contains 2 text objects.
The light blue object is the floating action button widget, which contains a ‘+’ icon.
MyApp WidgetThe MyApp object is a StatelessWidget. It sets up a Material App that contains a MyHomePage widget. The MaterialApp widget is a built-in Flutter widget that servesas the container for your whole app and its
Widgets. It provides services that child Widgets may use, such as navigation, sizing, themes etc.
MyHomePage WidgetThis is a stateful widget, more on these later. This widget holds the count as State (data) and it sets up the child objects in the ui:
The center widget, which contains a column object, which contains 2 text objects:
‘You have pushed the button this many times:’
The floating action button widget, which contains a ‘+’ icon. When the user clicks on the floating action button, this increments the instance variable ‘_counter’ inside a the ‘setState’ method. Making a call to the ‘setState’ method tells Flutter that something has changed and the UI needs to be rebuilt, so it invokes the ‘build’ method in this widget, which redraws itself with the new counter value.