1.底部导航基础样式

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'bottome_navigation_widget.dart';
  4. void main() =>runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       title: "Flutter 底部导航",
  11.       theme: ThemeData.light(),//默认形态 默认皮肤
  12.       home: BottomNavigationWidget(),
  13.     );
  14.   }
  15. }

bottome_navigation_widget.dart文件

  1. import 'package:flutter/material.dart';
  3. class BottomNavigationWidget extends StatefulWidget {//动态widget
  4.   @override
  5.   _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
  6. }
  8. class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  9.   final _BottomNavigationColor=Colors.blue;       //定义颜色
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Scaffold(                //脚手架相对于一个磨具，定义好位置
  13.       bottomNavigationBar: BottomNavigationBar(
  14.         items: [
  15.           BottomNavigationBarItem(icon: Icon(Icons.home,color: _BottomNavigationColor),//设置图标+颜色
  16.             title: Text(
  17.               "首页",
  18.               style: TextStyle(color: _BottomNavigationColor),
  19.             )
  20.           ),  BottomNavigationBarItem(icon: Icon(Icons.account_balance_wallet,color: _BottomNavigationColor),//设置图标+颜色
  21.               title: Text(
  22.                 "钱包",
  23.                 style: TextStyle(color: _BottomNavigationColor),
  24.               )
  25.           ),  BottomNavigationBarItem(icon: Icon(Icons.airplay_sharp,color: _BottomNavigationColor),//设置图标+颜色
  26.               title: Text(
  27.                 "商品",
  28.                 style: TextStyle(color: _BottomNavigationColor),
  29.               )
  30.           ),  BottomNavigationBarItem(icon: Icon(Icons.account_box_rounded,color: _BottomNavigationColor),//设置图标+颜色
  31.               title: Text(
  32.                 "个人中心",
  33.                 style: TextStyle(color: _BottomNavigationColor),
  34.               )
  35.           ),
  36.         ],
  37.       ),
  38.     );
  39.   }
  40. }

2.导航栏的跳转

shifting模式（导航栏点进去才显示与图标相关的文本）

20190304151830905.gif

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'bottome_navigation_widget.dart';
  4. void main() =>runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       title: "Flutter 底部导航",
  11.       theme: ThemeData.light(),//默认形态 默认皮肤
  12.       home: BottomNavigationWidget(),
  13.     );
  14.   }
  15. }

bottome_navigation_widget.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'pages/airplay_screen.dart';
  3. import 'pages/home_screen.dart';
  4. import 'pages/money_screen.dart';
  5. import 'pages/pages_screen.dart';
  6. class BottomNavigationWidget extends StatefulWidget {//动态widget
  7.   @override
  8.   _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
  9. }
  11. class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  12.   final _BottomNavigationColor=Colors.black;       //定义颜色
  14.   int _currentIndex=0;//声明一个索引
  16.   List<Widget> list=List();
  18.   @override
  19.   void initState(){
  20.     list
  21.         ..add(HomeScreen())
  22.         ..add(MoneyScreen())
  23.         ..add(AirplayScreen())
  24.         ..add(PagesScreen());
  25.     super.initState();
  26.   }
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Scaffold(      //脚手架相对于一个磨具，定义好位置
  31.       body: list[_currentIndex],//屏幕中间的主题
  33.       bottomNavigationBar: BottomNavigationBar(
  34.         items: <BottomNavigationBarItem>[
  35.           BottomNavigationBarItem(icon: Icon(Icons.home,color: _BottomNavigationColor),//设置图标+颜色
  36.             title: Text(
  37.               "首页",
  38.               style: TextStyle(color: _BottomNavigationColor),
  39.             ),
  40.             backgroundColor: Colors.blue,
  41.           ),  BottomNavigationBarItem(
  42.               icon: Icon(Icons.airplay_sharp,color: _BottomNavigationColor),//设置图标+颜色
  43.               title: Text(
  44.                 "商品",
  45.                 style: TextStyle(color: _BottomNavigationColor),
  46.               ),
  47.             backgroundColor: Colors.amber,
  48.           ),   BottomNavigationBarItem(icon: Icon(Icons.account_balance_wallet,color: _BottomNavigationColor),//设置图标+颜色
  49.             title: Text(
  50.               "钱包",
  51.               style: TextStyle(color: _BottomNavigationColor),
  52.             ),
  53.             backgroundColor: Colors.green,
  54.           ),BottomNavigationBarItem(icon: Icon(Icons.account_box_rounded,color: _BottomNavigationColor),//设置图标+颜色
  55.               title: Text(
  56.                 "个人中心",
  57.                 style: TextStyle(color: _BottomNavigationColor),
  58.               ),
  59.             backgroundColor: Colors.red,
  60.           ),
  61.         ],
  62.         currentIndex: _currentIndex,//那个是高亮（被选中）
  63.         selectedItemColor: Colors.pink,
  64.         onTap: (int index){     //点击事件添加index
  65.           setState(() {
  66.             _currentIndex=index;
  67.           });
  68.         },
  69.       ),
  70.     );
  71.   }
  72. }

在lib下创建pages文件夹

home_screen.dart文件

  1. import 'package:flutter/material.dart';
  3. class HomeScreen extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(
  8.         title: Text("这是首页"),
  9.       ),
  10.       body: Center(child: Text("首页呀"),),
  11.     );
  12.   }
  13. }

money_screen.dart文件

  1. import 'package:flutter/material.dart';
  3. class MoneyScreen extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(
  8.         title: Text("这是钱包"),
  9.       ),
  10.       body: Center(child: Text("钱包呀"),),
  11.     );
  12.   }
  13. }

airplay_screen.dart文件

  1. import 'package:flutter/material.dart';
  3. class AirplayScreen extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(
  8.         title: Text("这是商品"),
  9.       ),
  10.       body: Center(child: Text("商品"),),
  11.     );
  12.   }
  13. }

pages_screen.dart文件

  1. import 'package:flutter/material.dart';
  3. class PagesScreen extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(
  8.         title: Text("这是页"),
  9.       ),
  10.       body: Center(child: Text("页呀"),),
  11.     );
  12.   }
  13. }

fixed模式

20190304151915134.gif

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'bottome_navigation_widget.dart';
  4. void main() =>runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       title: "Flutter 底部导航",
  11.       theme: ThemeData(
  12.         primaryColor: Colors.deepOrangeAccent//可修改主题颜色
  13.       ),//默认形态 默认皮肤
  14.       home: BottomNavigationWidget(),
  15.     );
  16.   }
  17. }

在bottome_navigation_widget.dart的Widget匿名函数里的bottomNavigationBar里面加入

type: BottomNavigationBarType.fixed,

  1. import 'package:flutter/material.dart';
  2. import 'pages/airplay_screen.dart';
  3. import 'pages/home_screen.dart';
  4. import 'pages/money_screen.dart';
  5. import 'pages/pages_screen.dart';
  6. class BottomNavigationWidget extends StatefulWidget {//动态widget
  7.   @override
  8.   _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
  9. }
  11. class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  12.   final _BottomNavigationColor=Colors.black;       //定义颜色
  14.   int _currentIndex=0;//声明一个索引
  16.   List<Widget> list=List();
  18.   @override
  19.   void initState(){
  20.     list
  21.         ..add(HomeScreen())
  22.         ..add(MoneyScreen())
  23.         ..add(AirplayScreen())
  24.         ..add(PagesScreen());
  25.     super.initState();
  26.   }
  28.   @override
  29.   Widget build(BuildContext context) {
  30.     return Scaffold(      //脚手架相对于一个磨具，定义好位置
  31.       body: list[_currentIndex],//屏幕中间的主题
  32.       bottomNavigationBar: BottomNavigationBar(
  33.         items: <BottomNavigationBarItem>[
  34.           BottomNavigationBarItem(icon: Icon(Icons.home),
  35.             title: Text(
  36.               "首页",
  37.             ),
  38.           ),  BottomNavigationBarItem(
  39.               icon: Icon(Icons.airplay_sharp),
  40.               title: Text(
  41.                 "商品",
  42.               ),
  43.           ),   BottomNavigationBarItem(icon: Icon(Icons.account_balance_wallet),
  44.             title: Text(
  45.               "钱包",
  46.             ),
  47.           ),BottomNavigationBarItem(icon: Icon(Icons.account_box_rounded),
  48.               title: Text(
  49.                 "个人中心",
  50.               ),
  51.           ),
  52.         ],
  53.         currentIndex: _currentIndex,//那个是高亮（被选中）
  54.         type: BottomNavigationBarType.fixed,//fixedColor指定的颜色,可以让文本和图标一起显示
  55.         onTap: (int index){     //点击事件添加index
  56.           setState(() {
  57.             _currentIndex=index;
  58.           });
  59.         },
  60.       ),
  61.     );
  62.   }
  63. }

不规则导航栏

image.png

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'bottom_appBar_demo.dart';
  3. void main() => runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return MaterialApp(
  9.       title: "不规则导航栏",
  10.       //自定义主题样本
  11.       theme: ThemeData(
  12.         primarySwatch: Colors.lime
  13.       ),
  14.       home: BottomAppBarDemo(),
  15.     );
  16.   }
  17. }

bottom_appBar_demo.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'each_view.dart';
  4. class BottomAppBarDemo extends StatefulWidget {//动态样式
  5.   @override
  6.   _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
  7. }
  9. class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
  10.   List<Widget> _list;
  11.   int _index=0;
  12.   @override
  13.   void initState() {//初始化状态方法
  14.     // TODO: implement initState
  15.     super.initState();
  16.     _list=List();
  17.     _list..add(EachView("我是主页"))..add(EachView("我是床"));
  18.   }
  19.   @override
  20.   Widget build(BuildContext context) {
  21.     return Scaffold(
  22.       body: _list[_index],
  23.       //可交互浮动按钮FAB
  24.       floatingActionButton: FloatingActionButton(
  25.         //响应方式
  26.         onPressed: (){
  27.           Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){
  28.             return EachView("我是+++");
  29.           }));
  30.         },
  31.         tooltip: "我是长按文字",
  32.         child: Icon(
  33.           Icons.add,
  34.           color: Colors.white,
  35.         ),
  36.       ),
  37.       floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  38.       bottomNavigationBar: BottomAppBar(//BottomAppBar工具栏
  39.         color: Colors.lime,
  40.         shape: CircularNotchedRectangle(),//与floatingActionButton如何时需要一个缺口(CircularNotchedRectangle圆形缺口)
  41.         child: Row(
  42.           mainAxisSize: MainAxisSize.max,
  43.           mainAxisAlignment: MainAxisAlignment.spaceAround,
  44.           children: <Widget>[
  45.             IconButton(
  46.               icon: Icon(Icons.home,),
  47.               color: Colors.white,
  48.               onPressed: (){
  49.                 setState(() {
  50.                   _index=0;
  51.                 });
  52.               },),
  53.             IconButton(
  54.               icon: Icon(Icons.airline_seat_individual_suite),
  55.               color: Colors.white,
  56.               onPressed: (){
  57.                 setState(() {
  58.                   _index=1;
  59.                 });
  60.               },),
  61.           ],
  62.         ),
  63.       ),
  64.     );
  65.   }
  66. }

each_view.dart文件

  1. import 'package:flutter/material.dart';
  3. class EachView extends StatefulWidget {
  4.   String  _title;
  5.   EachView(this._title);//获取上一个页面给的参数
  6.   @override
  7.   _EachViewState createState() => _EachViewState();
  8. }
  10. class _EachViewState extends State<EachView> {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Scaffold(
  14.       appBar: AppBar(
  15.         title: Text(widget._title),
  16.       ),
  17.       body: Center(
  18.         child: Text(widget._title),
  19.       ),
  20.     );
  21.   }
  22. }

3.动画效果

路由跳转动画

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'pages.dart';
  4. void main() {
  5.   runApp(MyApp());
  6. }
  8. class MyApp extends StatelessWidget {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return MaterialApp(
  12.       title: "炫酷导航",
  13.       //自定义主题样本
  14.       theme: ThemeData(
  15.           primarySwatch: Colors.pink
  16.       ),
  17.         home: FirsPage(),
  18.     );
  19.   }
  20. }

pages.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'custime_router.dart';
  4. class FirsPage extends StatelessWidget {
  5.   @override
  6.   Widget build(BuildContext context) {
  7.     return Scaffold(
  8.       backgroundColor: Colors.pink,
  9.       appBar: AppBar(
  10.         title: Text("第一页",style: TextStyle(fontSize: 36.0),),
  11.         //与底部融合
  12.         elevation: 0.0,
  13.       ),
  14.       body: Center(
  15.         child: MaterialButton(
  16.           child: Icon(
  17.             Icons.navigate_next,
  18.             color: Colors.white,
  19.             size: 64.0,
  20.           ),
  21.           onPressed: (){
  22.             Navigator.of(context).push(CustimeRouter(SecondPage()));
  23.           },
  24.         ),
  25.       ),
  26.     );
  27.   }
  28. }
  29. class SecondPage extends StatelessWidget {
  30.   @override
  31.   Widget build(BuildContext context) {
  32.     return Scaffold(
  33.       backgroundColor: Colors.deepPurple,
  34.       appBar: AppBar(
  35.         title: Text("第二页",style: TextStyle(fontSize: 36.0),),
  36.         backgroundColor: Colors.deepPurple,
  37.         leading: Container(),
  38.         //与底部融合
  39.         elevation: 0.0,
  40.       ),
  41.       body: Center(
  42.         child: MaterialButton(
  43.           child: Icon(
  44.             Icons.navigate_before,
  45.             color: Colors.white,
  46.             size: 64.0,
  47.           ),
  48.           onPressed: (){
  49.             Navigator.of(context).pop();
  50.           },
  51.         ),
  52.       ),
  53.     );
  54.   }
  55. }

custime_router.dart文件

  1. import 'package:flutter/material.dart';
  3. class CustimeRouter extends PageRouteBuilder{
  4.   final Widget widget;
  5.   //继承父类重写
  6.   CustimeRouter(this.widget):super(
  7.     //过度时间
  8.     transitionDuration: Duration(seconds: 1),
  9.     pageBuilder: (
  10.         BuildContext context,
  11.         Animation<double> animation1,
  12.         Animation<double> animation2,
  13.         ){
  14.       return widget;
  15.     },
  16.     transitionsBuilder: (
  17.         BuildContext context,
  18.         Animation<double> animation1,
  19.         Animation<double> animation2,
  20.         Widget child
  21.     ){
  22.       //渐隐渐先动画
  23.   /*    return FadeTransition(opacity: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
  24.         child: child,
  25.       );*/
  26.       //缩放动画效果
  27.      /* return ScaleTransition(scale: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
  28.       child: child,
  29.       );*/
  30.       //旋转加缩放
  31.       /*return RotationTransition(turns: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
  32.         child: ScaleTransition(scale: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.fastOutSlowIn)),
  33.         child: child,),
  34.       );*/
  35.       //左右滑动
  36.       return SlideTransition(position: Tween<Offset>(begin: Offset(-1.0,0.0),end: Offset(0.0,0.0)).animate(CurvedAnimation(parent: animation1, curve: Curves.decelerate)),
  37.         child: child,
  38.       );
  39.   }
  40.   );
  41. }

4.磨砂特效（层叠效果，会消耗性能）

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'frosted_class_demo.dart';
  3. void main() => runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return MaterialApp(
  9.       title: "WWTA",
  10.       theme: ThemeData(
  11.         primarySwatch: Colors.deepOrange
  12.       ),
  13.       home: Scaffold(
  14.         body: FrostedClassDemo(),
  15.       ),
  16.     );
  17.   }
  18. }

frosted_class_demo.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'dart:ui';//图片过滤器时使用的
  4. class FrostedClassDemo extends StatelessWidget {
  5.   @override
  6.   Widget build(BuildContext context) {
  7.     return Scaffold(
  8.       body: Stack(//层叠组件
  9.         children: <Widget>[
  10.           ConstrainedBox(//约束盒子，添加额外的约束条件
  11.               constraints: const BoxConstraints.expand(),//约束条件随着里面的东西扩展
  12.             child: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F08%2F31%2Ff63f19162d471a33d20401a6c24b4049.jpg%21%2Ffwfh%2F804x546%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618538013&t=7025db3829d5c90648801ecf94cfbe0f"),
  13.           ),
  14.           Center(
  15.             child: ClipRect(//可裁切的矩形
  16.               child: BackdropFilter(//背景过滤器
  17.                 filter: ImageFilter.blur(sigmaX: 5.0,sigmaY: 5.0),//模糊   引用dart:ui的图片过滤器
  18.                 child: Opacity(//透明度
  19.                   opacity: 0.5,
  20.                   child: Container(//设置大小
  21.                     width: 500.0,
  22.                     height: 700.0,
  23.                     decoration: BoxDecoration(color: Colors.green.shade200),//盒子修饰器
  24.                     child: Center(
  25.                       child: Text(
  26.                         "WWTAAAA",
  27.                         style: Theme.of(context).textTheme.display3,//字的修饰，textTheme字体样式
  28.                       ),
  29.                     ),
  30.                   ),
  31.                 ),
  32.               ),
  33.             ),
  34.           ),
  35.         ],
  36.       ),
  37.     );
  38.   }
  39. }

5.页面跳转保持页面状态

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'keep_alive_demo.dart';
  3. void main() =>runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return MaterialApp(
  9.       title: "保持页面状态",
  10.       theme: ThemeData(
  11.         primarySwatch: Colors.blue,
  12.       ),
  13.       home: KeepAliveDemo(),
  14.     );
  15.   }
  16. }
  18. class KeepAliveDemo extends StatefulWidget {
  19.   @override
  20.   _KeepAliveDemoState createState() => _KeepAliveDemoState();
  21. }
  23. class _KeepAliveDemoState extends State<KeepAliveDemo> with SingleTickerProviderStateMixin{//with混入SingleTickerProviderStateMixin
  24.   TabController _controller;
  25.   //重写初始化方法
  26.   @override
  27.   void initState() {
  28.     // TODO: implement initState
  29.     super.initState();
  30.     _controller=TabController(length: 3, vsync: this);//this来自于SingleTickerProviderStateMixin
  31.   }
  32.   //重写销毁方法
  33.   @override
  34.   void dispose() {
  35.     // TODO: implement dispose
  36.     _controller.dispose();
  37.     super.dispose();
  39.   }
  41.   @override
  42.   Widget build(BuildContext context) {
  43.     return Scaffold(
  44.       appBar: AppBar(
  45.         title: Text("Keep Alive Demo"),
  46.         bottom: TabBar(
  47.           controller: _controller,
  48.           tabs: [//标签
  49.             Tab(icon: Icon(Icons.home),),
  50.             Tab(icon: Icon(Icons.access_alarms),),
  51.             Tab(icon: Icon(Icons.directions_bike_sharp),),
  52.           ],
  53.         ),
  54.       ),
  55.       body: TabBarView(
  56.         controller: _controller,
  57.         children: <Widget>[
  58.           MyHomePage(),
  59.           MyHomePage(),
  60.           MyHomePage(),
  61.         ],
  62.       ),
  63.     );
  64.   }
  65. }

keep_alive_demo.dart文件

  1. import 'package:flutter/material.dart';
  3. class MyHomePage extends StatefulWidget {
  4.   @override
  5.   _MyHomePageState createState() => _MyHomePageState();
  6. }
  8. class _MyHomePageState extends State<MyHomePage> with AutomaticKeepAliveClientMixin{
  9.   //声明计数器
  10.   int _counter=0;
  12.   @override
  13.   bool get wantKeepAlive =>true;
  15.   void _incrementCounter(){
  16.     setState(() {//setState改变状态
  17.       _counter++;
  18.     });
  19.   }
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     return Scaffold(
  24.       body: Center(
  25.         child: Column(
  26.           mainAxisAlignment: MainAxisAlignment.center,//居中对齐
  27.           children: <Widget>[
  28.             Text("点击+1"),
  29.             Text(
  30.               '$_counter',
  31.               style: Theme.of(context).textTheme.bodyText1,//字体样式
  32.             )
  33.           ],
  34.         ),
  35.       ),
  36.       floatingActionButton: FloatingActionButton(
  37.         onPressed: _incrementCounter,
  38.         tooltip: '点击+1',//长按提示
  39.         child: Icon(Icons.add),
  40.       ),
  41.     );
  42.   }
  43. }

6.搜索栏预选

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'search_dar_demo.dart';
  4. void main() =>runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       title: "搜索栏的预选",
  11.       theme: ThemeData.light(),
  12.       home: SearchDarDemo(),
  13.     );
  14.   }
  15. }

search_dar_demo.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'asset.dart';
  4. class SearchDarDemo extends StatefulWidget {
  5.   @override
  6.   _SearchDarDemoState createState() => _SearchDarDemoState();
  7. }
  9. class _SearchDarDemoState extends State<SearchDarDemo> {
  10.   @override
  11.   Widget build(BuildContext context) {
  12.     return Scaffold(
  13.       appBar: AppBar(
  14.         title: Text("搜索条"),
  15.         actions: <Widget>[
  16.           IconButton(
  17.               icon: Icon(Icons.search),
  18.               onPressed:(){
  19.                 showSearch(context: context, delegate: searchBarBelegate());
  20.               }
  21.               )
  22.         ],
  23.       ),
  24.     );
  25.   }
  26. }
  29. class searchBarBelegate extends SearchDelegate<String>{
  30.   @override
  31.   List<Widget> buildActions(BuildContext context){
  32.     return [
  33.       IconButton(icon: Icon(Icons.clear), onPressed: ()=>query="")//点一下x，把搜索内容变成空
  34.     ];
  35.   }
  36.   @override
  37.   Widget buildLeading(BuildContext context){
  38.     return IconButton(
  39.         icon: AnimatedIcon(//带动画的标签
  40.           icon: AnimatedIcons.menu_arrow,progress: transitionAnimation,
  41.         ),
  42.         onPressed: ()=>close(context,null),
  43.     );
  44.   }
  46.   @override
  47.   Widget buildResults(BuildContext context){
  48.     return Container(
  49.       width: 100,
  50.       height: 100,
  51.       child: Card(
  52.         color: Colors.pinkAccent,
  53.         child: Center(
  54.           child: Text(query),
  55.         ),
  56.       ),
  57.     );
  58.   }
  59.   @override
  60.   Widget buildSuggestions(BuildContext context){
  61.     //搜索的变量
  62.     final _suggestionList=query.isEmpty ? recentSuggest : searchList.where((input) => input.startsWith(query)).toList();
  64.     return ListView.builder(
  65.       itemCount: _suggestionList.length,
  66.       itemBuilder: (context,index)=>ListTile(
  67.         title: RichText(//副文本
  68.           text: TextSpan(
  69.             //字体加黑
  70.             text: _suggestionList[index].substring(0,query.length),
  71.             style: TextStyle(
  72.               color: Colors.black,fontWeight: FontWeight.bold
  73.             ),
  74.             children:[
  75.               TextSpan(
  76.                 text: _suggestionList[index].substring(query.length),
  77.                 style: TextStyle(color: Colors.grey)
  78.               )
  79.             ]
  80.           ),
  81.         ),
  82.       ),
  83.     );
  84.   }
  85. }

asset.dart文件（模拟后台数据）

  1. //模拟后台数据
  2. const searchList=[
  3.   "蒙德-火系-可莉",
  4.   "璃玥-火系-香菱",
  5.   "璃玥-冰系-甘雨",
  6.   "稻妻-冰系-神里"
  7. ];
  9. const recentSuggest=[
  10.   "推荐-1",
  11.   "推荐-2"
  12. ];

7.Warp流式布局

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'warp_demo.dart';
  4. void main() {
  5.   runApp(MyApp());
  6. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return MaterialApp(
  11.       title: "Warp流式布局",
  12.       theme: ThemeData.light(),
  13.       home: WarpDemo(),
  14.     );
  15.   }
  16. }

warp_demo.dart文件

  1. import 'package:flutter/material.dart';
  3. class WarpDemo extends StatefulWidget {
  4.   @override
  5.   _WarpDemoState createState() => _WarpDemoState();
  6. }
  8. class _WarpDemoState extends State<WarpDemo> {
  9.   List<Widget> list;
  11.   @override
  12.   void initState() {
  13.     // TODO: implement initState
  14.     super.initState();
  15.     list=List<Widget>()..add(buildAddButton());
  16.   }
  18.   @override
  19.   Widget build(BuildContext context) {
  20.     final width=MediaQuery.of(context).size.width;//获取屏幕的宽度
  21.     final height=MediaQuery.of(context).size.height;//获取屏幕的高度
  23.     return Scaffold(
  24.       appBar: AppBar(
  25.         title: Text("warp流式布局"),
  26.       ),
  27.       body: Center(
  28.         child: Opacity(
  29.           opacity: 0.8,
  30.           child: Container(
  31.             width: width,
  32.             height: height/2,
  33.             color: Colors.grey,
  34.             child: Wrap(
  35.               children: list,
  36.               spacing: 26.0,
  37.             ),
  38.           ),
  39.         ),
  40.       ),
  41.     );
  42.   }
  44.   Widget buildAddButton(){
  45.     //手势识别
  46.     return GestureDetector(
  47.       onTap: (){
  48.        setState(() {//setState状态 一定要加状态
  49.          if(list.length<9){
  50.            list.insert(list.length-1, buildPhoto());
  51.          }
  52.        });
  53.       },
  54.       //黑色的方块+号
  55.       child: Padding(
  56.         padding: const EdgeInsets.all(8.0),
  57.         child: Container(
  58.           width: 80.0,
  59.           height: 80.0,
  60.           color: Colors.black12,
  61.           child: Icon(Icons.add),
  62.         ),
  63.       ),
  64.     );
  65.   }
  66.   //点击之后的框
  67.   Widget buildPhoto(){
  68.     return Padding(
  69.         padding: const EdgeInsets.all(8.0),
  70.       child: Container(
  71.         width: 80.0,
  72.         height: 80.0,
  73.         color: Colors.deepOrangeAccent,
  74.         child: Center(
  75.           child: Text("照片"),
  76.         ),
  77.       ),
  78.     );
  79.   }
  80. }

8.展开闭合

ExpansionTile展开闭合

main.dart

  1. import 'package:flutter/material.dart';
  2. import 'expansion_tile_demo.dart';
  4. void main() {
  5.   runApp(MyApp());
  6. }
  8. class MyApp extends StatelessWidget {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return MaterialApp(
  12.       title: "展开闭合",
  13.       theme: ThemeData.dark(),
  14.       home: ExpansionTileDemo(),
  15.     );
  16.   }
  17. }

expansion_tile_demo.dart文件

  1. import 'package:flutter/material.dart';
  4. class ExpansionTileDemo extends StatelessWidget {
  5.   @override
  6.   Widget build(BuildContext context) {
  7.     return Scaffold(
  8.       appBar: AppBar(
  9.         title: Text("expansion tile demo"),
  10.       ),
  11.       body: Center(
  12.         child: ExpansionTile(//可扩展小瓦片
  13.           title: Text("Expansion Tile"),
  14.           //左边图标
  15.           leading: Icon(Icons.ac_unit),
  16.           backgroundColor: Colors.white12,
  17.           children: <Widget>[
  18.             ListTile(
  19.               title: Text("list tile"),
  20.               subtitle: Text("subtitle"),
  21.             )
  22.           ],
  23.           //initiallyExpanded: true,  //默认打开状态
  24.         ),
  25.       ),
  26.     );
  27.   }
  28. }

ExpansionPaneList（List多个展开闭合）

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'expansion_panel_list.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return MaterialApp(
  11.       title: "展开闭合",
  12.       theme: ThemeData.dark(),
  13.       home: ExpansionPaneListDemo(),
  14.     );
  15.   }
  16. }

expansion_panel_list.dart文件

  1. import 'package:flutter/material.dart';
  3. class ExpansionPaneListDemo extends StatefulWidget {
  4.   @override
  5.   _ExpansionPaneListDemoState createState() => _ExpansionPaneListDemoState();
  6. }
  8. class _ExpansionPaneListDemoState extends State<ExpansionPaneListDemo> {
  9.   //元素统计
  10.   List<int> mList;
  11.   //列表属性
  12.   List<ExpandStateBean> expandStateList;
  14.   _ExpansionPaneListDemoState(){
  15.     mList=new List();
  16.     expandStateList=new List();
  17.     for(int i=0;i<10;i++){
  18.       mList.add(i);
  19.       expandStateList.add(ExpandStateBean(i, false));
  20.     }
  21.   }
  23.   _setCurrentIndex(int index,isExpand){
  24.     setState(() {
  25.       expandStateList.forEach((item) {
  26.         if(item.index==index){
  27.           item.isOpen=!isExpand;
  28.         }
  29.       });
  30.     });
  31.   }
  33.   @override
  34.   Widget build(BuildContext context) {
  35.     return Scaffold(
  36.       appBar: AppBar(
  37.         title: Text("expansion panel list"),
  38.       ),
  39.       body: SingleChildScrollView(
  40.         child: ExpansionPanelList(
  41.           expansionCallback: (index,bol){
  42.             _setCurrentIndex(index,bol);
  43.           },
  44.           children: mList.map((index) {
  45.             return ExpansionPanel(headerBuilder: (context,isExpanded){
  46.               return ListTile(
  47.                 title: Text("this is No.$index"),
  48.               );
  49.             },body: ListTile(
  50.               title: Text("expansion NO.$index"),
  51.             ),
  52.                 isExpanded: expandStateList[index].isOpen
  53.             );
  54.           }).toList(),
  55.         ),
  56.       ),
  57.     );
  58.   }
  59. }
  61. //控制打开闭合
  62. class ExpandStateBean{
  63.   var isOpen;
  64.   var index;
  65.   ExpandStateBean(this.index,this.isOpen);
  66. }

9.贝塞尔曲线

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'custom_clipper.dart';
  4. void main() {
  5.   runApp(MyApp());
  6. }
  8. class MyApp extends StatelessWidget {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return MaterialApp(
  12.       title: "Flutter demo",
  13.       debugShowCheckedModeBanner: false,
  14.       theme: ThemeData(
  15.         primarySwatch: Colors.blue
  16.       ),
  17.       home: HomePage(),
  18.     );
  19.   }
  20. }

custom_clipper.dart文件

  1. import 'package:flutter/material.dart';
  3. class HomePage extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       body: Column(
  8.         children: <Widget>[
  9.           ClipPath(//路径裁切控件
  10.             clipper: BottomClipperTest(),
  11.             child: Container(
  12.               color: Colors.deepOrangeAccent,
  13.               height: 200.0,
  14.             ),
  15.           )
  16.         ],
  17.       ),
  18.     );
  19.   }
  20. }
  22. //单个圆弧形
  23. class BottomClipper extends CustomClipper<Path>{
  24.   @override
  25.   Path getClip(Size size) {
  26.     var path=Path();
  27.     path.lineTo(0, 0);
  28.     path.lineTo(0, size.height-60);
  29.     var firstControlPint = Offset(size.width/2, size.height);
  30.     var firstEndPoint = Offset(size.width, size.height-60);
  31.     path.quadraticBezierTo(firstControlPint.dx, firstControlPint.dy, firstEndPoint.dx, firstEndPoint.dy);
  32.     path.lineTo(size.width, size.height-60);
  33.     path.lineTo(size.width, 0);
  34.     return path;
  35.   }
  36.   @override
  37.   bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
  38.     return false;
  39.   }
  41. }
  43. //波浪形
  44. class BottomClipperTest extends CustomClipper<Path>{
  46.   @override
  47.   Path getClip(Size size) {
  48.     var path=Path();
  49.     path.lineTo(0, 0);
  50.     path.lineTo(0, size.height-60);
  51.     var firstControlPint = Offset(size.width/4, size.height);
  52.     var firstEndPoint = Offset(size.width/2, size.height-60);
  53.     path.quadraticBezierTo(firstControlPint.dx, firstControlPint.dy, firstEndPoint.dx, firstEndPoint.dy);
  54.     var firstControlPint2 = Offset(size.width/4*3, size.height-120);
  55.     var firstEndPoint2 = Offset(size.width, size.height-60);
  56.     path.quadraticBezierTo(firstControlPint2.dx, firstControlPint2.dy, firstEndPoint2.dx, firstEndPoint2.dy);
  57.     path.lineTo(size.width, size.height-120);
  58.     path.lineTo(size.width, 0);
  59.     return path;
  60.   }
  61.   @override
  62.   bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
  63.     return false;
  64.   }
  66. }

10.app进入动画

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'splash_screen.dart';
  4. void main() {
  5.   runApp(MyApp());
  6. }
  8. class MyApp extends StatelessWidget {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     return MaterialApp(
  12.       title: "进入APP动画",
  13.       theme: ThemeData(
  14.         primarySwatch: Colors.blue
  15.       ),
  16.       home: SplashScreen(),
  17.     );
  18.   }
  19. }

splash_screen.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'home_page.dart';
  4. class SplashScreen extends StatefulWidget {
  5.   @override
  6.   _SplashScreenState createState() => _SplashScreenState();
  7. }
  9. class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin{//with混入
  11.   AnimationController _controller;//动画控制器
  12.   Animation _animation;//动画
  14.   @override
  15.   void initState() {
  16.     super.initState();
  17.     _controller=AnimationController(vsync: this,duration: Duration(milliseconds: 3000));//Duration动画时间 milliseconds毫秒
  18.     _animation=Tween(begin: 0.0,end: 1.0).animate(_controller);
  19.     //动画的监听事件
  20.     _animation.addStatusListener((status) {
  21.       if(status==AnimationStatus.completed){//如果动画结束
  22.         //结束了动画把动画结束然后跳转页面
  23.         Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>MyHomePage()), (route) => route==null);
  24.       }
  25.     });
  26.     _controller.forward();//播放动画
  27.   }
  28.   @override
  29.   void dispose() {
  30.     _controller.dispose();//删除动画的控制器
  31.     super.dispose();
  32.   }
  34.   @override
  35.   Widget build(BuildContext context) {
  36.     return FadeTransition(
  37.         opacity: _animation,
  38.         child: Image.network(
  39.             "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F08%2F31%2Ff63f19162d471a33d20401a6c24b4049.jpg%21%2Ffwfh%2F804x546%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618538013&t=7025db3829d5c90648801ecf94cfbe0f",
  40.             scale:2.0 ,
  41.             fit: BoxFit.cover,
  42.         ),
  44.     );
  45.   }
  46. }

home_page.dart文件

  1. import 'package:flutter/material.dart';
  3. class MyHomePage extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(title: Text("首页"),),
  8.       body: Center(child: Text("这里是首页"),),
  9.     );
  10.   }
  11. }

11.右滑返回上一页

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'right_back_demo.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return MaterialApp(
  11.       title: "右滑返回上一页",
  12.       theme: ThemeData(primarySwatch: Colors.pink),
  13.       home: RightBackDemo(),
  14.     );
  15.   }
  16. }

right_back_demo.dart文件

这一个的导包不一样是import ‘package:flutter/cupertino.dart’;

  1.   import 'package:flutter/cupertino.dart';//cupertino
  3.   class RightBackDemo extends StatelessWidget {
  4.     @override
  5.     Widget build(BuildContext context) {
  6.       return CupertinoPageScaffold(//CupertinoPageScaffold在cupertino里拿出来的
  7.           child: Center(
  8.             child: Container(
  9.               height: 100,
  10.               width: 100,
  11.               color: CupertinoColors.activeBlue,
  12.               child: CupertinoButton(
  13.                 child: Icon(CupertinoIcons.add),
  14.                 onPressed: (){
  15.                   Navigator.of(context).push(
  16.                    CupertinoPageRoute(builder: (BuildContext context){
  17.                      return RightBackDemo();
  18.                    })
  19.                   );
  20.                 },
  21.               ),
  22.             ),
  23.           )
  24.       );
  25.     }
  26.   }

12.轻量级提示ToolTip

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'tool_tip_demo.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return MaterialApp(
  11.       title: "轻量级提醒",
  12.       theme: ThemeData.light(),
  13.       home: ToolTipDemo(),
  14.     );
  15.   }
  16. }

tool_tip_demo.dart文件

  1. import 'package:flutter/material.dart';
  3. class ToolTipDemo extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Scaffold(
  7.       appBar: AppBar(
  8.         title: Text("轻量级提示"),
  9.       ),
  10.       body: Center(
  11.         child: Tooltip(
  12.           child: Image.network("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.shu163.com%2Fuploadfiles%2Fsc%2F2010%2F7%2F2010071105574273.jpg&refer=http%3A%2F%2Fimg.shu163.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618561014&t=45e2c5917fb08269760a9e6882d9d33b"),
  13.             message: "这是一个脸谱",
  14.         ),
  15.       ),
  16.     );
  17.   }
  18. }

13.Draggable拖拽控件

main.dart文件

  1. import 'package:flutter/material.dart';
  2. import 'draggable_demo.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. class MyApp extends StatelessWidget {
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return MaterialApp(
  11.       title: "拖拽控件",
  12.       theme: ThemeData(
  13.         primarySwatch: Colors.blue
  14.       ),
  15.       home: DraggableDemo(),
  16.     );
  17.   }
  18. }

draggable_widget.dart文件

  1. import 'package:flutter/material.dart';
  3. class DraggableWidget extends StatefulWidget {
  4.   final Offset offset;
  5.   final Color widgetColor;
  6.   const DraggableWidget({Key key,this.offset,this.widgetColor}):super(key: key);
  8.   @override
  9.   _DraggableWidgetState createState() => _DraggableWidgetState();
  11. }
  13. class _DraggableWidgetState extends State<DraggableWidget> {
  14.   Offset offset=Offset(0.0, 0.0);
  15.   @override
  16.   void initState() {
  17.     super.initState();
  18.     offset=widget.offset;
  19.   }
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     return Positioned(
  24.         left: offset.dx,
  25.         top: offset.dy,
  26.         child: Draggable(//拖拽动作
  27.           data: widget.widgetColor,//传递拖拽值
  28.           child: Container(
  29.             width: 100.0,
  30.             height: 100.0,
  31.             color: widget.widgetColor,
  32.           ),
  33.           feedback: Container(//当我们拖动时子元素的样子
  34.             width: 100.0,
  35.             height: 100.0,
  36.             color: widget.widgetColor.withOpacity(0.5),//拖动时颜色变浅
  37.           ),
  38.           onDraggableCanceled: (Velocity velocity,Offset offset){//当我们松手时
  39.             setState(() {
  40.               this.offset=offset;// this.offset是原来的offset，offset的拖动的
  41.             });
  42.           },
  43.         )
  44.     );
  45.   }
  46. }

draggable_demo.dart文件

  1. import 'package:flutter/material.dart';
  3. class DraggableWidget extends StatefulWidget {
  4.   final Offset offset;
  5.   final Color widgetColor;
  6.   const DraggableWidget({Key key,this.offset,this.widgetColor}):super(key: key);
  8.   @override
  9.   _DraggableWidgetState createState() => _DraggableWidgetState();
  11. }
  13. class _DraggableWidgetState extends State<DraggableWidget> {
  14.   Offset offset=Offset(0.0, 0.0);
  15.   @override
  16.   void initState() {
  17.     super.initState();
  18.     offset=widget.offset;
  19.   }
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     return Positioned(
  24.         left: offset.dx,
  25.         top: offset.dy,
  26.         child: Draggable(//拖拽动作
  27.           data: widget.widgetColor,//传递拖拽值
  28.           child: Container(
  29.             width: 100.0,
  30.             height: 100.0,
  31.             color: widget.widgetColor,
  32.           ),
  33.           feedback: Container(//当我们拖动时子元素的样子
  34.             width: 100.0,
  35.             height: 100.0,
  36.             color: widget.widgetColor.withOpacity(0.5),//拖动时颜色变浅
  37.           ),
  38.           onDraggableCanceled: (Velocity velocity,Offset offset){//当我们松手时
  39.             setState(() {
  40.               this.offset=offset;// this.offset是原来的offset，offset的拖动的
  41.             });
  42.           },
  43.         )
  44.     );
  45.   }
  46. }