App的页面框架

Material Design是由Google推出的全新设计语言，这种设计语言旨在为手机、平板电脑等平台提供更一致、更广泛的外观和感觉。Material Design是一种有质感的设计风格，还会提供一些默认的交互动画。

对于没有相关基础的人，在正式学习App的UI之前，建议先了解Material Design相关的知识

关于Material Design设计风格的资料

MaterialApp

MaterialApp代表使用Material设计风格的应用，里面包含了其所需要的基本控件。一个完整的Flutter项目是由这个主组件开始的。

MaterialApp属性详解

// 在构建UI前，设置一些属性
MaterialApp(
      builder: (BuildContext context, Widget child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(
                textScaleFactor: 1.4,
              ),
          child: child,
        );
      },
    );

Scaffold

Scaffold是App的页面框架，将整个页面分为如下的几个部分

Scaffold属性

AppBar

AppBar可以显示顶部leading、title和actions等内容。底部通常为选项卡TabBar。flexibleSpace显示在AppBar的下方，高度和AppBar高度一样，可以实现一些特殊的效果

文档地址

示例

BottomAppBar

BottomAppBar 是一个不规则底部工具栏，它比BottomNavigationBar 灵活，可以放置文字和图标等等控件。

文档地址

示例

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Sample Code'),
    ),
    body: Center(
      child: Text('You have pressed the button'),
    ),
    bottomNavigationBar: BottomAppBar(
      shape: const CircularNotchedRectangle(),
      child: Container(height: 50.0,),
    ),
    floatingActionButton: FloatingActionButton(
      child: Icon(Icons.add),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );
}

公众号“编程之路从0到1”