• GitHub address for Flutter and Dart series articles and code
  • FlutterEverything isWidgetThe core idea of the book provides us with two thematic styles
  • CupertinoApp: One encapsulates a lotiOSStyle widgets, generally as the top layerwidgetuse
  • MaterialApp: a package that encapsulates a number of Android-style widgets, usually as a top layerwidgetSo let’s look at this one firstWidget

MaterialApp

Here we first look at the constructor and related functions of the MaterialApp

const MaterialApp({
    Key key,
    GlobalKey
      
    this.navigatorKey,
    // Home page, Widget
    this.home,
    / / routing
    this.routes = const <String, WidgetBuilder>{},
    // Initialize the route, String
    this.initialRoute,
    // Construct the route, RouteFactory
    this.onGenerateRoute,
    // So far route, RouteFactory
    this.onUnknownRoute,
    // Navigation viewer
    this.navigatorObservers = const <NavigatorObserver>[],
    // Build widgets
    this.builder,
    // APP name
    this.title = ' '.// GenerateAppTitle, which is regenerated each time WidgetsApp is built
    this.onGenerateTitle,
    // Background color
    this.color,
    // Theme, ThemeData
    this.theme,
    // App language support, Locale
    this.locale,
    // Multilanguage delegate, Iterable
      
       >
      
    this.localizationsDelegates,
    // flutter.widgets.widgetsApp.localeListResolutionCallback
    this.localeListResolutionCallback,
    // flutter.widgets.widgetsApp.localeResolutionCallback
    this.localeResolutionCallback,
    // Support multiple languages, Iterable
      
    this.supportedLocales = const <Locale>[Locale('en'.'US')].// Whether to display the grid
    this.debugShowMaterialGrid = false.// Whether to enable performance monitoring, overlay at the top of the screen
    this.showPerformanceOverlay = false.// Whether to open the checker for raster cache images
    this.checkerboardRasterCacheImages = false.// Whether to open the check panel for layers that are displayed to the off-screen bitmap
    this.checkerboardOffscreenLayers = false.// Whether to turn on the overlay graph to display the border for accessibility information reported by the frame
    this.showSemanticsDebugger = false.// Whether to display the Debug label in the upper right corner
    this.debugShowCheckedModeBanner = true,})Copy the code

A few points to note

  • ifhomeThe home page specifies,routesThere can’t be any inside'/'The root route of the/The specified root route is redundant
  • If there is nohomeSpecify the specific page, thatroutesJust one/To specify the root route
  • Routes are routed in the following order:
    • 1. If yeshome, you will get fromhomeEnter the
    • 2. If nothome, there areroutesAnd,routesSpecify the entry point'/', you will get fromroutesthe/Enter the
    • 3. If neither of the above is available, or the route cannot be reached, if yesonGenerateRoute, will enter the generated route
    • 4, if there is no generated route above, it will go toonUnknownRouteFor example, if the network connection fails, you can enter the disconnected page

routes

  • Declare which of the programs passesNavigation.of(context).pushNamedHop route
  • Parameters are passed as key-value pairs
    • key: Route name
    • value: the correspondingWidget
routes: {
  '/home': (BuildContext content) => Home(),
  '/mine': (BuildContext content) => Mine(),
},
Copy the code

initialRoute

  • Initialize the route, when the user enters the program, automatically open the corresponding route (home is still at level 1)
  • The incoming is up hereroutesthekey, the jump is corresponding toWidget(if theWidgetThere areScaffold.AppBar, do not make any changes, there is a back key in the upper left corner.
routes: {
  '/home': (BuildContext content) => Home(),
  '/mine': (BuildContext content) => Mine(),
},
initialRoute: '/mine'.Copy the code

onGenerateRoute

This method is called when a route is jumped through navigation.of (context).pushnamed and routes cannot be found

onGenerateRoute: (RouteSettings setting) {
  return MaterialPageRoute(
    settings: setting,
    builder: (BuildContext content) => Text('Generate a route')); },Copy the code

onUnknownRoute

The unknown route has the same effect as onGenerateRoute. OnUnknownRoute is called only when onGenerateRoute is not set

onUnknownRoute: (RouteSettings setting) {
  return MaterialPageRoute(
    settings: setting,
    builder: (BuildContext content) => Text('This is an unknown route')); },Copy the code

navigatorObservers

  • Route observer when calledNavigatorThe related operation is called back when the related method is used
  • Such aspush.pop.remove.replaceIs to get the current route and the following route information
  • Get the route name:route.settings.name
// navigatorObservers: [HomeObserver()],

/ / NavigatorObserver inheritance
class HomeObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route previousRoute) {
    super.didPush(route, previousRoute);

    // Get the name of the route
    print('name = ${route.settings.name}');
    // Get the content returned
    print('reaule = ${route.currentResult}'); }}Copy the code

builder

If this parameter is set, the Builder will be rendered first, not before walking

builder: (BuildContext content, Widget widget) => Text('builder'),
Copy the code

title

  • A one-line description of the application that the device uses to identify the user
  • inAndroidOn, the title appears above the task manager’s application snapshots, which are displayed when the user presses the Recent Applications button
  • iniOSCannot use this value. From the applicationInfo.plisttheCFBundleDisplayNameWill be referenced at any time, otherwise will be referencedCFBundleName
  • To provide an initialization title, use theonGenerateTitle

CupertinoApp

The top-level component used to create ios-style applications. The related properties are missing only theme and debugShowMaterialGrid compared to the MaterialApp. Other properties are the same, as shown below

const CupertinoApp({
    Key key,
    this.navigatorKey,
    this.home,
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onUnknownRoute,
    this.navigatorObservers = const <NavigatorObserver>[],
    this.builder,
    this.title = ' '.this.onGenerateTitle,
    this.color,
    this.locale,
    this.localizationsDelegates,
    this.localeListResolutionCallback,
    this.localeResolutionCallback,
    this.supportedLocales = const <Locale>[Locale('en'.'US')].this.showPerformanceOverlay = false.this.checkerboardRasterCacheImages = false.this.checkerboardOffscreenLayers = false.this.showSemanticsDebugger = false.this.debugShowCheckedModeBanner = true,})Copy the code

An example is as follows:

return CupertinoApp(
  title: 'Cupertino App',
  color: Colors.red,
  home: CupertinoPageScaffold(
    backgroundColor: Colors.yellow,
    resizeToAvoidBottomInset: true,
    navigationBar: CupertinoNavigationBar(
      middle: Text('Cupertino App Bar'),
      backgroundColor: Colors.blue,
    ),
    child: Center(
      child: Container(
        child: Text('Hello World'(), ((), ((), ((), ((), (()Copy the code

CupertinoPageScaffold

The basic layout structure of an ios-style page. Contains content and navigation bars

Const CupertinoPageScaffold({Key Key, // set this. NavigationBar, This. backgroundColor = cupertinocolors.white, / / child widget itself whether it should be adjusted automatically to adapt to the safe distance at the bottom of the enclosing resizeToAvoidBottomInset =true,
    @required this.child,
})
Copy the code

navigationBar

const CupertinoNavigationBar({
    Key key,
    // Navigation bar left component
    this.leading,
    // Whether to display the left component, seems to be invalid
    this.automaticallyImplyLeading = true.// Whether to display intermediate components, seems to be invalid
    this.automaticallyImplyMiddle = true.// The text to the right of the component to the left of the navigation bar appears to be invalid
    this.previousPageTitle,
    // Navigation bar middle component
    this.middle,
    // Components on the right of the navigation bar
    this.backgroundColor = _kDefaultNavBarBackgroundColor,
    EdgeInsetsDirectional to set the inside margin of the left and right components
    this.padding,
    // Color of the default component on the left and the text on the right of the component on the left
    this.actionsForegroundColor = CupertinoColors.activeBlue,
    this.transitionBetweenRoutes = true.this.heroTag = _defaultHeroTag,
})
Copy the code

Use the sample

return CupertinoApp(
  title: 'Cupertino App',
  color: Colors.red,
  debugShowCheckedModeBanner: false,
  home: CupertinoPageScaffold(
    backgroundColor: Colors.yellow,
    resizeToAvoidBottomInset: true,
    navigationBar: CupertinoNavigationBar(
      leading: Icon(Icons.person),
      automaticallyImplyLeading: false,
      automaticallyImplyMiddle: false,
      previousPageTitle: 'return',
      middle: Text('Cupertino App Bar'),
      trailing: Icon(Icons.money_off),
      border: Border.all(),
      backgroundColor: Colors.white,
      padding: EdgeInsetsDirectional.fromSTEB(10.10.10.10),
      actionsForegroundColor: Colors.red,
      transitionBetweenRoutes: false,
      heroTag: Text('data'),
    ),
    child: Center(
      child: Container(
        child: Text('Hello World'(), ((), ((), ((), ((), (()Copy the code

Scaffold

  • ScaffoldUsually used asMaterialAppThe son ofWidget(Android style), which fills up the available space and takes up the entire window or device screen
  • ScaffoldProvides functionality that most applications should have, such as the one at the topappBarAt the bottom of,bottomNavigationBar, hidden sidebardrawerEtc.
const Scaffold({
    Key key,
    // An AppBar is displayed at the top of the interface
    this.appBar,
    // The main content Widget displayed in the current interface
    this.body,
    // The hover button is displayed in the lower right corner by default
    this.floatingActionButton,
    // Set the hover button position
    this.floatingActionButtonLocation,
    // The hover button appears to disappear animation
    this.floatingActionButtonAnimator,
    // Render a set of buttons at the bottom, above [bottomNavigationBar] and below [body]
    this.persistentFooterButtons,
    // A vertical panel, displayed on the left, is initially hidden
    this.drawer,
    // A vertical panel, displayed on the right, is initially hidden
    this.endDrawer,
    // A series of horizontal buttons appear at the bottom
    this.bottomNavigationBar,
    // The persistence prompt box at the bottom
    this.bottomSheet,
    / / the background color
    this.backgroundColor,
    // Recalculate the layout space size
    this.resizeToAvoidBottomPadding = true.// Whether to display bottom, default is true will display to the top status bar
    this.primary = true,})Copy the code

appBar

Set the navigation bar to accept an abstract class, PreferredSizeWidget, which is subclassed with AppBar, as explained below

floatingActionButton

  • Set a hover button, displayed in the lower right corner by default, used hereFloatingActionButtonSet up the
  • FloatingActionButtonisMaterialA special one in the design specificationButton, usually floating somewhere on the page as a shortcut to a common action, as explained later

floatingActionButtonLocation

The position of the suspension Settings button, accept an abstract class FloatingActionButtonLocation

// Lower right corner, a little distance from bottom, default
static const FloatingActionButtonLocation endFloat = _EndFloatFabLocation();
// Lower center, a little distance from the bottom
static const FloatingActionButtonLocation centerFloat = _CenterFloatFabLocation();
// Lower right corner, no spacing from bottom
static const FloatingActionButtonLocation endDocked = _EndDockedFloatingActionButtonLocation();
// There is no spacing from the bottom
static const FloatingActionButtonLocation centerDocked = _CenterDockedFloatingActionButtonLocation();
Copy the code

FloatingActionButton

In Material Design, it is generally used to deal with the most common and basic user actions in the interface. It usually appears in front of the screen content, and is usually a circle with an icon in the middle, with the following constructors

const FloatingActionButton({
    Key key,
    this.child,
    // Text explanation, button bai long time display
    this.tooltip,
    / / the foreground
    this.foregroundColor,
    / / the background color
    this.backgroundColor,
    // The hero effect uses the same tag. By default, all FAB uses the same tag for animation
    this.heroTag = const _DefaultHeroTag(),
    // Shadow value when not clicked, default 6.0
    this.elevation = 6.0.// Shadow value when clicked, default 12.0
    this.highlightElevation = 12.0.// Click event listener
    @required this.onPressed,
    // Whether the value is mini. The default value is false
    this.mini = false.// Set the shadow. When setting the shape, the default elevation will be invalidated. The default elevation will be CircleBorder
    this.shape = const CircleBorder(),
    // Clipping style
    this.clipBehavior = Clip.none,
    // Sets the style of the click area size, the enumeration value of MaterialTapTargetSize
    this.materialTapTargetSize,
    // Whether the type is extended
    this.isExtended = false,})Copy the code

mini

  • Whether it isminiType, default isfalse
  • FloatingActionButtonThere are three types:regular.mini.extended
  • regularandminiBoth types are implemented with the default constructor, only images
  • The size restrictions are as follows
const BoxConstraints _kSizeConstraints = const BoxConstraints.tightFor(
  width: 56.0,
  height: 56.0,);const BoxConstraints _kMiniSizeConstraints = const BoxConstraints.tightFor(
  width: 40.0,
  height: 40.0,);const BoxConstraints _kExtendedSizeConstraints = const BoxConstraints(
  minHeight: 48.0,
  maxHeight: 48.0,);Copy the code

isExtended

  • Whether it isextendedType, set totrueCan be
  • In addition, it can be usedextendedThe constructor creates the type
FloatingActionButton.extended({
    Key key,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation = 6.0.this.highlightElevation = 12.0.@required this.onPressed,
    this.shape = const StadiumBorder(),
    this.isExtended = true.this.materialTapTargetSize,
    this.clipBehavior = Clip.none,
    // Set the image
    @required Widget icon,
    // Set the text
    @required Widget label,
})
Copy the code

The argument is not much different, except that the default constructor has replaced the child with icon and label, but as you can see from the code below, the label and icon passed in are also used to build the child, but wrapped with a Row

AppBar

AppBar is a Material style navigation bar, it can set the title, navigation bar menu, bottom Tab, etc

AppBar({
    Key key,
    // The navigation bar left weidget
    this.leading,
    // If leading is null, the default leading button is automatically implemented
    this.automaticallyImplyLeading = true.// Navigation bar title
    this.title,
    // The button on the right of the navigation bar accepts an array
    this.actions,
    // A control that appears below the AppBar and is the same height as the AppBar to achieve special effects. This property is usually used in SliverAppBar
    this.flexibleSpace,
    // An AppBarBottomWidget object that sets the TabBar
    this.bottom,
    The default is 4. For scrollable SliverAppBar, the value is 0 when the SliverAppBar is at the same level as the content, and the elevation value is changed when the content is scrolled to the Toolbar
    this.elevation = 4.0.// The background color. The default value is themedata.primarycolor. A change value is usually used with the following three attributes
    this.backgroundColor,
    // What is the color of the status bar? Black and white
    this.brightness,
    // Set the color, transparency, and size of the ICONS in the navigation bar
    this.iconTheme,
    // Set the text style on the navigation bar
    this.textTheme,
    // Whether the contents of the navigation bar are displayed at the top, below the status bar
    this.primary = true.// Whether to center the title. The default value varies according to the operating system
    this.centerTitle,
    // Title spacing, if you want title to occupy all available space, set this value to 0.0
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    // The transparency of the toolbar part of the application bar
    this.toolbarOpacity = 1.0.// Set the opacity of the bottom navigation bar
    this.bottomOpacity = 1.0,})Copy the code

leading

Navigation bar left weidget

final Widget leading;

/ / sample
leading: Icon(Icons.home),
Copy the code

actions

The button on the right of the navigation bar accepts an array

final List<Widget> actions;

/ / sample
actions: <Widget>[
    Icon(Icons.add),
    Icon(Icons.home),
],
Copy the code

brightness

The color of the status bar is black and white

// Status bar is white
brightness: Brightness.dark,
// Status bar black
brightness: Brightness.light,
Copy the code

iconTheme

Set the color, transparency, and size of the ICONS in the navigation bar

const IconThemeData({this.color, double opacity, this.size})

/ / sample
iconTheme: IconThemeData(color: Colors.white, opacity: 0.56, size: 30),
Copy the code

TabBar

  • inAppBarThrough thebottomProperty to add a navigation bar at the bottomtabButton group, accept onePreferredSizeWidgettype
  • PreferredSizeWidgetIs an abstract class that we use hereTabBar
class TabBar extends StatefulWidget implements PreferredSizeWidget {
  const TabBar({
    Key key,
    // Array, the contents of the Tab to display, generally using Tab objects, of course, can be other widgets
    @required this.tabs,
    / / TabController object
    this.controller,
    // Whether it can be scrolled
    this.isScrollable = false.// Indicator color
    this.indicatorColor,
    // Indicator height
    this.indicatorWeight = 2.0.// Inside margin of indicator
    this.indicatorPadding = EdgeInsets.zero,
    // Set the selected style decoration, such as border, etc
    this.indicator,
    // Indicator size, enumeration value TabBarIndicatorSize
    this.indicatorSize,
    // Select the text color
    this.labelColor,
    // Select the text style
    this.labelStyle,
    // Text margins
    this.labelPadding,
    // Unselected text color
    this.unselectedLabelColor,
    // Unselected text style
    this.unselectedLabelStyle,
  })
}

// the Tab constructor
const Tab({
    Key key,
    / / text
    this.text,
    / / icon
    this.icon,
    / / child widgets
    this.child,
})
Copy the code

Results the following

The relevant codes are as follows

void main(List<String> args) => runApp(NewApp());

class NewApp extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    returnApp(); }}class App extends State<NewApp> with SingleTickerProviderStateMixin {
  List tabs = ['Chinese'.'mathematics'.'English'.'political'.'history'.'geographic'.'physical'.'chemistry'.'biological'];
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(initialIndex: 0, length: tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('CoderTitan'),
              backgroundColor: Colors.blueAccent,
              brightness: Brightness.dark,
              centerTitle: true,
              bottom: TabBar(
                controller: _tabController,
                tabs: tabs.map((e) => Tab(text: e)).toList(),
                isScrollable: true,
                indicatorColor: Colors.red,
                indicatorWeight: 2,
                indicatorSize: TabBarIndicatorSize.label,
                labelColor: Colors.orange,
                unselectedLabelColor: Colors.white,
                labelStyle: TextStyle(fontSize: 18, color: Colors.orange),
                unselectedLabelStyle: TextStyle(fontSize: 15, color: Colors.white),
              ),
            ),
            body: TabBarView(
              controller: _tabController,
              children: tabs.map((e) {
                return Container(
                  alignment: Alignment.center,
                  child: Text(e, style:TextStyle(fontSize: 50))); }).toList(), ), ), debugShowCheckedModeBanner:false,); }}Copy the code

BottomNavigationBar

  • inScaffoldHas a property inbottomNavigationBarUsed to set the bottomtabbarThe navigation bar
  • useMaterialThe component library providesBottomNavigationBarandBottomNavigationBarItemtwoWidgetTo implement the Material style bottom navigation bar
BottomNavigationBar({
    Key key,
    // Array of child widgets
    @required this.items,
    // Click events for each item
    this.onTap,
    // The currently selected index
    this.currentIndex = 0./ / type
    BottomNavigationBarType type,
    // Text color
    this.fixedColor,
    // Image size
    this.iconSize = 24.0,})Copy the code

items

An array containing all the child widgets

final List<BottomNavigationBarItem> items;

const BottomNavigationBarItem({
    // The image is not selected
    @required this.icon,
    / / title
    this.title,
    // The selected image
    Widget activeIcon,
    / / the background color
    this.backgroundColor,
})
Copy the code

reference

  • Cupertino (iOS style) Widgets
  • Material (Android style) Widgets
  • Scaffold, TabBar and AppBar

Please scan the following wechat official account and subscribe to my blog!