Flutter MaterialApp overview and theme configuration overview

Flutter MaterialApp

At present, the Flutter series of tutorials are published for free on the watermelon video, which is updated daily.
Welcome to pay attention to receiving reminders and click to view the various series of tutorials.

1 What is MaterialApp

MaterialApp is the most commonly used entry Widget that conforms to the Material Design design concept in our use of Flutter development. You can compare it to a web page, and it has its own routing, theme color,

等功能。

2 Case 1

````
import 'package:flutter/material.dart';

import 'package:flutter/material.dart';


//Flutter program entry
void main() => runApp(getApp());

Widget getApp() {
  return new MaterialApp(
    //Apply the interface page displayed by default
    home: new Container(color: Colors.grey,),
    //The top-level navigation table of the application, multi-page application control page jump
    //routes: ,
    // When the system modifies the language, this callback will be triggered
    //onLocaleChanged ：
    // Apply theme colors used by various UIs
    theme: ThemeData.light().copyWith(
      primaryColor: Colors.grey[850],
      accentColor: Colors.grey[850],
      indicatorColor: Colors.white,
    ),
  );
}


````

3 Brief description of construction parameters

 this . navigatorKey ,  // navigation key 
    this . home ,  // home page 
    this . routes =  const  < String , WidgetBuilder > { } , // route 
    this . initialRoute , // initial route 
    this . onGenerateRoute , // generate route 
    this . onUnknownRoute , //Location route 
    this . navigatorObservers =  const  < NavigatorObserver > [ ], // Observer for navigation 
    this . builder , // Builder for widget 
    this . title =  '' , // A one-line description of the app the device uses to identify the user. 
    this . color , // background color 
    this . theme , // theme, use ThemeData 
    this . locale , // app language supports 
    this . localizationsDelegates , // multi-language proxy 
    this . localeResolutionCallback , // 
    this . supportedLocales =  const  < Locale >[ Locale ( 'en' ,  'US' ) ] , //Multiple languages supported
     this .debugShowMaterialGrid = false ,  // Show grid 
    this .showPerformanceOverlay =  false , // Turn on performance monitoring, overlay on top of the
     screen this .checkerboardRasterCacheImages =  false , 
    this . checkerboardOffscreenLayers = false , this . showSemanticsDebugger =  false , 
    // Open an overlay  showing accessibility information reported by the framework showing borders 
    this .debugShowCheckedModeBanner =  true , //Display a debug icon in the upper right corner

MaterialApp({
  Key key,
  // A one-line description used by the device to identify the application for the user
 // On Android, the title is displayed above the task manager's app snapshots, which are displayed when the user presses the "Recent Apps" button. On iOS, this value cannot be used. The `CFBundleDisplayName` from the application's `Info.plist` is referenced at all times, otherwise the `CFBundleName` is referenced. To provide an initialized title, use onGenerateTitle.
  this.onGenerateTitle,//It will be regenerated every time WidgetsApp is built
  this.title = '', 
  
  this.home, // The widget of the default route of the application, used to define the interface displayed when the current application is opened
  this.color, // The primary color used by the application in the OS interface.
  this.theme, // The color used by the app widget.
  this.routes = const <String, WidgetBuilder>{}, // application's top-level routing table
  this.navigatorKey, // The key to use when building the navigator.
  this.initialRoute, // the name of the first route displayed if the navigator is constructed
  this.onGenerateRoute, // The route generator callback used when the application navigates to the specified route
  this.onUnknownRoute, // called when onGenerateRoute fails to generate a route (except initialRoute)
  this.navigatorObservers = const <NavigatorObserver>[], // list of observers for navigators created for this application
  this.builder, // for inserting widgets above the navigator but below other widgets created by the WidgetsApp widget, or to completely replace the navigator
  this.onGenerateTitle, // If non-null, call this callback function to generate the application's title string, otherwise use the title.
  this.locale, // The initial locale for this app's localized widgets is based on this value.
  this.localizationsDelegates, // The delegates for this app's localization widgets.
  this.localeListResolutionCallback, // This callback is responsible for selecting the app's locale when the app starts and when the user changes the device's locale.
  this.localeResolutionCallback, // 
  this.supportedLocales = const <Locale>[Locale('en', 'US')], // List of locales this application has been localized to
  this.debugShowMaterialGrid = false, // turn on the grid paper overlay that draws the baseline grid material application
  this.showPerformanceOverlay = false, // turn on performance overlay
  this.checkerboardRasterCacheImages = false, // open the checkerboard for raster cache images
  this.checkerboardOffscreenLayers = false, // Turn on the checkerboard for layers rendered to offscreen bitmaps
  this.showSemanticsDebugger = false, // turn on the overlay that shows accessibility information reported by the framework
  this.debugShowCheckedModeBanner = true, // open a small "DEBUG" banner in checked mode, indicating that the app is in checked mode
})

Use ThemeData in Flutter to share colors and font styles in applications. There are two kinds of Theme: Global Theme and Local Theme. The global Theme is the Theme created by the application root MaterialApp,

brightness

The brightness of ThemeData is a Brightness type used to configure the overall theme brightness of the application. When not using primaryColor or accentColor, when Dark mode is selected, canvas, card and primary colors are dark; when light mode is selected, canvas and card colors are bright, and the primary color is darker Changes according to the brightness of the primary color. When the brightness is dark, the primary color (primaryColor) has poor contrast with the card and canvas colors; when the brightness is dark, use white or bright blue to contrast.

The brightness theme setting is more critical, it sets the status bar icon and font color.

brightness: Brightness.dark Status bar icons and font color are white.
brightness:
Brightness.light Status bar icons and font color are black.

primaryColor

Among them, primaryColor is the Color type, which is used to configure the background color of the main part of the App (ToolBar, Tabbar, etc.); primaryColorBrightness is the Brightness type, which describes the brightness of the primaryColor and is used to determine the text and icon color set on the upper part of the primaryColor (eg: Toolbar) Text (toolbar text)), accentColor is a Color type, used to configure the foreground color, accent color, etc. (buttons, text, overlay edge effects, etc.)

iconTheme

Among them iconTheme: Set the color of the icon icon in the AppBar. The color of the icon in the AppBar will determine its own color according to the change of the primaryColor, but here you can specify the color of the icon in the iconTheme.

ButtonTheme
ButtonTheme is used to set the style of the Button class control, where textTheme represents the style of the button text, such as ButtonTextTheme.normal by default (the color of the button text is black or white, depending on ThemeData.brightness), when modified to ButtonTextTheme.accent, The color of the button text is taken from ThemeData.accentColor, and the layoutBehavior is used to set the size of the Button...

complete

Flutter MaterialApp

1 What is MaterialApp

2 Case 1

3 Brief description of construction parameters

Tags: Flutter MaterialApp overview and theme configuration overview

Related: Flutter MaterialApp overview and theme configuration overview