因为笔者本身主要从事是Android开发，所以很多角度都是作为一个Android开发者学习Flutter的角度出发，IOS或者H5的开发同学可以选择性阅读

StatefulWidget基础组件展示

MaterialApp

MaterialApp 是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget。MaterialApp这个组件里面的参数比较多，而且一般在应用入口会用到，所以这里把它内部的所有参数都列出来了

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

基本用法：

可以看到我们在App的最外层直接使用了MaterialApp，可以指定App的名称（title），App的主题样式（theme），首页的组件（home），路由跳转配置）（routes），关于路由跳转我们在后面的章节中会介绍

void main() => runApp(App());

// This widget is the root of your application.
class App extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NavigatorPage(),
      routes: {
        'less': (BuildContext context) => StatelessWidgetPage(),
        'ful': (BuildContext context) => StatefulWidgetPage(),
        'layout': (BuildContext context) => LayoutPage()
      },
    );
  }
}

Scaffold

Scaffold 实现了基本的 Material Design 布局结构，Scaffold在英文中的解释为角手架，我们可以理解为楼体中的钢架结构，通过它可以构建一个页面
在Flutter应用开发中，我们可以将 Scaffold 理解为一个布局的容器。可以在这个容器中绘制我们的用户界面

下面是MaterialApp + Scaffold的组合的基本用法

MaterialApp(
  theme: ThemeData(primarySwatch: Colors.blue),
  home: Scaffold(
    appBar: AppBar(...),//顶部导航栏
    bottomNavigationBar: BottomNavigationBar(...),//底部菜单栏
    body: Container(...),//主体
    floatingActionButton: FloatingActionButton(...),//悬浮按钮
  ),
)

AppBar

AppBar就是顶部的导航栏组件，支持自定义标题，左右两侧的工具栏按钮等

 AppBar(
    //标题
  title: Text("AppBar"),
  //左侧按钮（一般用于设置back键）
  leading: GestureDetector(
    onTap: () {
      Navigator.pop(context);
    },
    child: Icon(Icons.arrow_back),
  ),
  //右侧按钮集合
  actions: [
    IconButton(
        icon: new Icon(Icons.add_alarm),
        tooltip: 'Add Alarm',
        onPressed: () {})
  ],
)

BottomNavigationBar

BottomNavigationBar是底部的菜单栏组件

使用方法：

一般我们会定义一个全局变量如_currentIndex用于记录当前选中的下标。然后在onTap属性的回调方法中调用

setState(() { _currentIndex = index;});更新_currentIndex就可以实现底部菜单的切换。BottomNavigationBar一般会配合BottomNavigationBarItem一起使用（如下所示）

int _currentIndex = 0;

BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home, color: Colors.grey),
      activeIcon: Icon(
        Icons.home,
        color: Colors.blue,
      ),
      title: Text("首页"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.list, color: Colors.grey),
      activeIcon: Icon(
        Icons.list,
        color: Colors.blue,
      ),
      title: Text("列表"),
    )
  ],
)

RefreshIndicator

RefreshIndicator是Flutter中的下拉刷新组件，一般配合ListView组件一起使用

RefreshIndicator(
    child: ListView(
      children: [
      ],
    ),
    onRefresh: _handleRefresh,
  )

Image

Image就类似于android中的ImageView，可以自定义图片显示的宽高

从网络中加载图片

Image.network(
 "https://upload-images.jianshu.io/upload_images/10992781-a64bd14d27699266.png?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp",
  width: 200,
  height: 200,
)

从本地（File文件）加载图片

Image.file(new File('/storage/xxx/xxx/test.jpg'))

从本地资源加载图片

Image.asset('images/logo.png')

可以将byte数组加载成图片

Image.memory(bytes)

TextField

TextField就类似于android的EditText

TextField(
  decoration: InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(5, 0, 0, 0),
      hintText: "请输入",
      hintStyle: TextStyle(fontSize: 15)),
)

PageView

PageView就类似于android中的ViewPager

PageView(
  children: [
    _item('Page1', Colors.lightBlue),
    _item('Page2', Colors.lightGreen),
    _item('Page3', Colors.red)
  ],
)
 
  //创建PageView的item
  _item(String title, Color color) {
    return Container(
      alignment: Alignment.center,
      decoration: BoxDecoration(color: color),
      child: Text(
        title,
        style: TextStyle(fontSize: 22, color: Colors.white),
      ),
    );
  }

Flutter（二）StatefulWidget基础组件

目录