Flutter App Scaffolding Widgets
Flutter makes it easy to generate a default mobile app and you quickly end up with something like this, something surprisingly sophisticated with Color themes, an App Bar, a Content Area with a Count and a Floating Button.
The reason you quickly get something sophisticated is that the Default App uses Flutter Widgets that were specially designed to scaffold an app as quickly as possible.
The purpose of this chapter is to cover these Widgets.
When your code entry point runs (i.e. the main method), it calls runApp to initialize a given widget (an App Widget). The build method of the App Widget is invoked and it returns a MaterialApp object, which gives Flutter the information it needs to generate the widget and display it on the screen, along with its child Widgets.
So, your App Widget returns a MaterialApp that you have initialized with the title, theme and home properties initialized. It’s called a
Material App because this class builds the foundations for an app that uses Google’s Material Design UI.
MaterialApp
Builds the foundations for a cross-platform app that uses Google’s Material Design UI.
It introduces built-in objects such as the Navigator, Themes and Locales to help you develop your app.
Navigator
We will cover the Navigator in a later chapter.
Themes
When you build a Flutter app, you build a root Widget. That Widget usually returns a MaterialApp, which builds the foundations for the
app. One of the constructor arguments for MaterialApp is the Theme object. This object specifies the colors to be used in the application’s Widgets. As you can see below the user can pass in Theme data into the MaterialApp constructor using a ThemeData object.
Default Flutter App Uses Blue Theme
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
debugShowMaterialGrid: true,
debugShowCheckedModeBanner: false,
showPerformanceOverlay: true,
);
}
}Example of Darkening Theme
Source Code
This is the default Flutter app with just a change to the accent color and the brightness.
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
accentColor: Colors.redAccent,
brightness: Brightness.dark),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}