Flutter MaterialApp概述以及主题配置概述

原创

早起的年轻人 2022-04-22 11:03:50 ©著作权

文章标签 MaterialApp flutter flutter主题应用程序 ico 文章分类 开源

©著作权归作者所有：来自51CTO博客作者早起的年轻人的原创作品，请联系作者获取转载授权，否则将追究法律责任

Flutter MaterialApp

目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，

欢迎关注接收提醒点击查看提示各种系列的教程

1 MaterialApp 是什么

MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的，且它自带路由、主题色，

等功能。

2 案例一

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

import 'package:flutter/material.dart';


//Flutter程序入口
void main() => runApp(getApp());

Widget getApp() {
  return new MaterialApp(
    //应用默认所显示的界面 页面
    home: new Container(color: Colors.grey,),
    //应用的顶级导航表格，多页面应用 控制页面跳转
    //routes: ,
    // 当系统修改语言的时候，会触发å这个回调
    //onLocaleChanged ：
    // 应用各种 UI 所使用的主题颜色
    theme: ThemeData.light().copyWith(
      primaryColor: Colors.grey[850],
      accentColor: Colors.grey[850],
      indicatorColor: Colors.white,
    ),
  );
}


```

3 构造参数简述

this.navigatorKey, // 导航的key
    this.home, // 主页
    this.routes = const <String, WidgetBuilder>{},// 路由
    this.initialRoute,//初始路由
    this.onGenerateRoute,//生成路由
    this.onUnknownRoute,//位置路由
    this.navigatorObservers = const <NavigatorObserver>[],//导航的观察者
    this.builder,//widget的构建
    this.title = '',//设备用于识别用户的应用程序的单行描述。
    this.color,//背景颜色
    this.theme,//主题，用ThemeData
    this.locale,//app语言支持
    this.localizationsDelegates,//多语言代理
    this.localeResolutionCallback,//
    this.supportedLocales = const <Locale>[Locale('en', 'US')],//支持的多语言
    this.debugShowMaterialGrid = false,//显示网格
    this.showPerformanceOverlay = false,//打开性能监控，覆盖在屏幕最上面
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,//打开一个覆盖图，显示框架报告的可访问性信息 显示边框
    this.debugShowCheckedModeBanner = true,//右上角显示一个debug的图标

MaterialApp({
  Key key,
  // 设备用于为用户识别应用程序的单行描述
 // 在Android上，标题显示在任务管理器的应用程序快照上方，当用户按下“最近的应用程序”按钮时会显示这些快照。 在iOS上，无法使用此值。 来自应用程序的`Info.plist`的`CFBundleDisplayName`在任何时候都会被引用，否则就会引用`CFBundleName`。要提供初始化的标题，可以用 onGenerateTitle。
  this.onGenerateTitle,//每次在WidgetsApp构建时都会重新生成
  this.title = '', 
  
  this.home, // 应用程序默认路由的小部件,用来定义当前应用打开的时候，所显示的界面
  this.color, // 在操作系统界面中应用程序使用的主色。
  this.theme, // 应用程序小部件使用的颜色。
  this.routes = const <String, WidgetBuilder>{}, // 应用程序的顶级路由表
  this.navigatorKey, // 在构建导航器时使用的键。
  this.initialRoute, // 如果构建了导航器，则显示的第一个路由的名称
  this.onGenerateRoute, // 应用程序导航到指定路由时使用的路由生成器回调
  this.onUnknownRoute, // 当 onGenerateRoute 无法生成路由(initialRoute除外)时调用
  this.navigatorObservers = const <NavigatorObserver>[], // 为该应用程序创建的导航器的观察者列表
  this.builder, // 用于在导航器上面插入小部件，但在由WidgetsApp小部件创建的其他小部件下面插入小部件，或用于完全替换导航器
  this.onGenerateTitle, // 如果非空，则调用此回调函数来生成应用程序的标题字符串，否则使用标题。
  this.locale, // 此应用程序本地化小部件的初始区域设置基于此值。
  this.localizationsDelegates, // 这个应用程序本地化小部件的委托。
  this.localeListResolutionCallback, // 这个回调负责在应用程序启动时以及用户更改设备的区域设置时选择应用程序的区域设置。
  this.localeResolutionCallback, // 
  this.supportedLocales = const <Locale>[Locale('en', 'US')], // 此应用程序已本地化的地区列表 
  this.debugShowMaterialGrid = false, // 打开绘制基线网格材质应用程序的网格纸覆盖
  this.showPerformanceOverlay = false, // 打开性能叠加
  this.checkerboardRasterCacheImages = false, // 打开栅格缓存图像的棋盘格
  this.checkerboardOffscreenLayers = false, // 打开渲染到屏幕外位图的图层的棋盘格
  this.showSemanticsDebugger = false, // 打开显示框架报告的可访问性信息的覆盖
  this.debugShowCheckedModeBanner = true, // 在选中模式下打开一个小的“DEBUG”横幅，表示应用程序处于选中模式
})

在Flutter中使用ThemeData来在应用中共享颜色和字体样式，Theme有两种：全局Theme和局部Theme。全局Theme是由应用程序根MaterialApp创建的Theme ，

brightness

其中ThemeData的brightness，是一个Brightness类型，用来配置应用程序的整体主题亮度。在不使用主色（primaryColor）或强调色（accentColor）时，当选择Dark模式时，画布、卡片和原色都较暗；当选择light模式时，画布和卡片的颜色是明亮的，原色的暗度根据原色亮度变化。当亮度较暗时，原色（primaryColor）与卡片和画布颜色的对比度较差;当亮度较暗时，用白色或亮蓝色来对比。

brightness主题设置较为关键，它是设置状态栏图标与字体颜色的。

brightness: Brightness.dark 状态栏图标与字体颜色为白色。
brightness:
Brightness.light 状态栏图标与字体颜色为黑色。

primaryColor

其中primaryColor是Color类型，用来配置App主要部分的背景色（ToolBar,Tabbar等）；primaryColorBrightness是Brightness类型，描述primaryColor的亮度，用于确设定在primaryColor上部的文本和图标颜色(如:工具栏文本(toolbar text))，accentColor是Color类型，用来配置前景色、强调色等(按钮、文本、覆盖边缘效果等)

iconTheme

其中iconTheme：设置AppBar中图标icon的颜色，AppBar中icon的颜色会根据primaryColor的改变来确定自身的颜色，但这里可以在iconTheme中指定icon的颜色。

ButtonTheme

ButtonTheme用于设置Button类控件的样式，其中textTheme表示按钮文本的样式，如默认情况ButtonTextTheme.normal（按钮文本的颜色是黑色或者白色，依赖于ThemeData.brightness），当修改为ButtonTextTheme.accent时，按钮文本的颜色取用ThemeData.accentColor，layoutBehavior用来设置Button的尺寸 …