在Flutter中设计风格主要为Material Design风格,Flutter也支持IOS设置风格Cupertino的一系列Widget,分别对应flutter的包下的material目录下的dart文件和cupertino目录的dart文件。

Root Widget ;

   在material design设计风格下的root widget为MaterialApp,ios 风格的root widget为CupertinoApp;

Material Design:

void main()=>runApp(MyMaterialApp());class MyMaterialApp extends StatelessWidget{@overrideWidget build(BuildContext context)  => MaterialApp(home: HomeScreen(),);
}
复制代码

Cupertino:

void main()=>runApp(MyAppCupertino());class MyAppCupertino extends StatelessWidget{@overrideWidget build(BuildContext context)  => CupertinoApp(home: HomeScreen(),);
}
复制代码

Scaffold;

   为material design小部件创建视觉支架的为Scaffold，为cupertino小部件创建视觉支架的为CupertinoTabScaffold和CupertinoPageScaffold,其中CupertinoTabScaffold可以使用底部的选项卡栏为应用程序创建布局，其中CupertinoPageScaffold 为iOS模式页面的典型内容，实现布局、顶部有导航栏。

如下为CupertinoPageScaffold和CupertinoTabScaffold混合使用实现ios风格UI的部分代码:

class HomeScreen extends StatelessWidget{@overrideWidget build(BuildContext context) {return CupertinoTabScaffold(tabBar: CupertinoTabBar(items: [BottomNavigationBarItem(icon: Icon(CupertinoIcons.book_solid),title: Text('书籍')),BottomNavigationBarItem(icon: Icon(CupertinoIcons.eye_solid),title: Text('观看'))]),tabBuilder: (context,position){return CupertinoTabView(builder: (context){return CupertinoPageScaffold(navigationBar: CupertinoNavigationBar(middle: (position==0)?Text("书籍"):Text("观看"),),child: Center(child: CupertinoButton(child:Text("this is tab :$position",), onPressed: (){Navigator.of(context).push(CupertinoPageRoute(builder: (context){return DetailScreen((position==0)?"书籍":"观看");}));})),);},);});}
}///详细页面;
class DetailScreen extends StatelessWidget{final String title;DetailScreen(this.title);@overrideWidget build(BuildContext context) {return CupertinoPageScaffold(navigationBar: CupertinoNavigationBar(middle: Text("Details"),),child: Center(child: Text("欢迎来到 :$title"),));}
}
复制代码

可以使用iOS风格的图标CupertinoIcons;

  CupertinoPageRoute为Cupertino创建一个页面路由，以便在iOS设计的应用程序中使用。MaterialPageRoute定义了以material design的方式转换的应用页面。