MaterialApp widget

The Theme widget is not the only way to theme an application. The MaterialApp widget is the other only widget that also accepts a ThemeData value through its theme property. Along with theme, MaterialApp adds helper properties for localization, for example, and also navigation between screens, which we will check out in Chapter 7Routing: Navigating Between Screens.

By adding a MaterialApp widget as the root widget of the app, you are stating your intention to follow Material Design guidelines, and that is the purpose of it, right?

Now that it knows that you will be following Material Design guidelines, the framework will be slightly different in relation to the default theme. In the following code, we do not specify a style for our text:

class MaterialAppDefaultTheme extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
color: Colors.white,
child: Center(
child: Text(
"Simple Text",
// textDirection: TextDirection.ltr, don't need
// now thanks to materialapp
),
),
),
);
}
}

In this code, we have stated our intention to follow Material Design guidelines by adding MaterialApp widget as our root widget, it will produce a fallback to a not very attractive DefaultTextStyle style to advise that the developer that they are not using Material Design effectively in the Text widgets. The result of the previous code is as follows:

In other words, we should always wrap Text widgets inside some Material Design based widget to apply the typography styles proposed by the guidelines properly. The Material widget is the simplest example; it has a DefaultTextStyle property and other typical Material Design properties, such as elevation for the shadow effect from the guidelines.

Note that we also did not provide a textDirection property of the Text widget this time. One of the functions of MaterialApp is to allow us to apply internationalization to our app, and textDirection is based on the ambient Locale.

We will be looking at how to work with localization in Chapter 13, Improving the User Experience.

By using MaterialApp widget, we have seen how to init the following Material Design guidelines. Another important widget to help on this task is the Scaffold widget. Let's see how to use it in the next section.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.147.42.168