AppState class topic

The 'Look and Feel' of your App

This is your app's first State object. It's the 'root' State object, and it's an important State object. You'll be accessing this State object to 'change the state' of your whole app. It literally defines how your app will look and behave to the user. You should take the time to understand this class, and if you know Flutter, that'll take seconds. That's because all its properties and parameters come from the MaterialApp widget and the CupertinoApp widget. However, it does have some additional functions for you.

Contents

ShrineAppState

Inline

Parameters

MaterialApp

CupertinoApp

WidgetsApp

The State of Your App Should Be An Adaptive One

Instead of explicitly passing parameters values to the App's State object, you have the option of defining a function for each and every parameter. That means, instead of having to supply a parameter value when your app's State object is first called, the more adaptive approach of calling a function only when required by a particular parameter can instead be used.

You'll find this ability indispensable.

Below is two screenshots the AppState class, _ShrineAppState, from the Shrine Example App. In the first one, you see the supportedLocales parameter, for example, is passed an explicity value---a value that must be conceived before the AppState object is called. However note the functions onLocale() and onTheme() further down the screenshot. Because there is some further functionality necessary, both the parameters, locale, and theme, are instead supplied values from the specified functions---but only when they're needed. A powerful capability.

_ShrineAppState Example

(Note: If a parameter is still supplied, any function is ignored. An explicit parameter takes precedence.)

app.dart

Support for inline functions

In the second screenshot above, you'll notice the supportedLocales parameter in now addressed, but it's instead using the inline function to pass a value: inSupportedLocales. Like the other function, it's called after the AppState object is instantiated allowing your code to be more concise, adaptive and modular. Notice in the first screenshot, an required aspect of the supportedLocales feature (assigning the L10n.translation property) had to be called in the State class' initState() function. In the second screenshot, the process is a little more localized and concise and called just when it's needed by using the inline function, inSupportedLocales.

(Note: Of the two functions, the 'on' version takes precedence over the inline function.)

It Takes Class

As it's been stated before, the AppState class is very much an amalgamation of both the MaterialApp widget and the CupertinoApp widget. Both widgets have pretty much the same parameters, and so you now have this one location to define the overall 'look and feel' of your app.

Note, the MaterialApp does includes a few more parameters pertaining to the app's general theme: darkTheme , highContrastTheme , themeMode and themeAnimationDuration. However, both also have a 'router' version that involves you explicitly listing out specific routes or screens. In fact, you'll find both MaterialApp and CupertinoApp pass on all those attributes and properties to yet another common 'Design App' widget called, WidgetsApp.

There's nothing new here if you know Flutter. And if you don't, working with the Fluttery Framework is a good way to learn Flutter. The Fluttery Frameworks strives to use Flutter's own functions and features as well as its own approach of doing things.

MaterialApp

(Tap on any of the parameters below to view its description right in Flutter's own source code.)

The CupertinoApp is the 'iOS style' counterpart when it comes to the interface. The graphic below is that of the router version.

CupertinoApp

(Tap on any of the parameters below to view its description right in Flutter's own source code.)

WidgetsApp

Again, both the MaterialApp and CupertinoApp widget pass many of their parameters on to the widget, WidgetsApp (see below). This implies that there's nothing stopping you from writing your own 'Design App' widget. The Flutter framework can utilize a whole new style of interface if you're so inclined to write one.

(Screenshot below of CupertinoApp's _buildWidgetApp() function)

app,dart