Flutter 知识点汇总

最新推荐文章于 2024-06-26 13:22:21 发布

barnett_y

最新推荐文章于 2024-06-26 13:22:21 发布

阅读量3.4k

点赞数 1

分类专栏：【Flutter点滴知识】

原文链接：https://www.jianshu.com/p/286c8beacb11

版权

【Flutter点滴知识】专栏收录该内容

397 篇文章 74 订阅

订阅专栏

1.主题色主题色设置

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',//针对Android 里面可用
      theme: ThemeData(
        primarySwatch: Colors.yellow,//主题色设置，深色：则时间和电池颜色为白色；浅色：则时间和电池颜色为黑色
        highlightColor: Color.fromRGBO(1, 0, 0, 0.0),//去掉tabBar默认选中效果
        splashColor: Color.fromRGBO(1, 0, 0, 0.0),//去掉tabBar默认选中效果
      ),
      home: RootPage(),
    );
  }
}

2.ListView去掉iPhoneX刘海

MediaQuery.removePadding -> removeTop: true

Container(
  color: Color.fromRGBO(220, 220, 220, 1.0),
  child: MediaQuery.removePadding(
    removeTop: true,
    context: context,
    child: ListView(
      children: <Widget>[
        Container(
          color: Colors.white,
          height: 200,
        ),
        SizedBox(height: 10,),
        DiscoverCell(imageName: 'images/微信支付1.png',title: '支付',),
      ],
    ),
  ),
),

3.Image设置圆角

Row(
children: <Widget>[
  Container(
    width: 70,
    height: 70,
   // child: Image(image: AssetImage('images/Steven.png'),),//写在此处设置圆角无效
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(10.0),
      image: DecorationImage(image:AssetImage('images/Steven.png'),
      fit: BoxFit.cover)//设置图片的填充模式
    ),
  ),//头像
  Container(),//右边部分
],
)

设置圆形图片

CircleAvatar(
          backgroundImage: new AssetImage('images/1.jpeg'),
          radius: 100.0,
        )

4.设备的宽高获取

width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,

5.文字居中方向设置

//Container属性
alignment: Alignment.centerLeft,

6.网络图片和本地图片的加载

Container(
  width: 34,
  height: 34,
  margin: EdgeInsets.all(10),
  decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6.0),
      image: DecorationImage(
        image: imageUrl != null
            ? NetworkImage(imageUrl) //网络图片
            : AssetImage(imageAssets),//本地图片
      )),
)

7.链式编程-添加数据

 @override
 //数据、对象创建
  void initState() {
    super.initState();
    //链式编程，调用两次addAllData并返回数组到 _listDatas
    _listDatas..addAll(datas)..addAll(datas);
    //数据排序
    _listDatas.sort((Friends a, Friends b){
      return a.indexLetter.compareTo(b.indexLetter);
    });
    //print('_listDatas:$_listDatas');
  }

8.相除取整

~/

onVerticalDragUpdate: (DragUpdateDetails details){
  print(details.globalPosition.dy);//相对于整个屏幕的值
  RenderBox box = context.findRenderObject();
  //计算当前位置 坐标转换, 算出y值
  double y = box.globalToLocal(details.globalPosition).dy;
  //y值除以每个item的高度就是当前的索引
  //每一个item的高度
  var itemH = ScreenHeight(context)/2/INDEX_WORDS.length;
  int index = y ~/ itemH;//相除取整
  print(box.globalToLocal(details.globalPosition));
},

9.数组越界处理

//使用clamp
//取值范围0~INDEX_WORDS.length-1 添加安全判断 
int index = (y ~/ itemHeight).clamp(0, INDEX_WORDS.length - 1);

10.定义回调函数和调用

//定义回调函数
final void Function(String str) indexBarCallBack;
//构造方法
const IndexBar({Key key, this.indexBarCallBack}) : super(key: key);
//调用该callBack
//监听所在位置：计算当前位置
onVerticalDragUpdate: (DragUpdateDetails details){
  widget.indexBarCallBack(getIndex(context, details.globalPosition));
},
//外部使用
IndexBar(
    indexBarCallBack: (String str){
      print("收到了：$str");
    },
  ),

11.PopupMenuButton 使用

Container(
    margin: EdgeInsets.only(right: 10),
    child: PopupMenuButton(
      offset: Offset(0, 60.0),
      child: Image(image: AssetImage('images/圆加.png'),width: 25,),
      itemBuilder: _buildPopupMenuItem,
    ),
  )
    //创建Item的方法！
  PopupMenuItem<String> _buildItem(String imgAss, String title) {
    return PopupMenuItem(
      child: Row(
        children: <Widget>[
          Image(
            image: AssetImage(imgAss),
            width: 20,
          ),
          Container(
            width: 20,
          ),
          Text(
            title,
            style: TextStyle(color: Colors.white),
          ),
        ],
      ),
    );
  }

//回调方法
  List<PopupMenuItem<String>> _buildPopupMenuItem(BuildContext context) {
    return <PopupMenuItem<String>>[
      _buildItem('images/发起群聊.png', '发起群聊'),
      _buildItem('images/添加朋友.png', '添加朋友'),
      _buildItem('images/扫一扫1.png', '扫一扫'),
      _buildItem('images/收付款.png', '收付款'),
    ];
  }

设置popup背景颜色

//MaterialApp -> theme -> cardColor
MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Flutter Demo',//针对Android 里面可用
  theme: ThemeData(
    primarySwatch: Colors.yellow,//主题色设置，深色：则时间和电池颜色为白色；浅色：则时间和电池颜色为黑色
    highlightColor: Color.fromRGBO(1, 0, 0, 0.0),//去掉tabBar默认选中效果
    splashColor: Color.fromRGBO(1, 0, 0, 0.0),//去掉tabBar默认选中效果
    cardColor: Color.fromRGBO(1, 1, 1, 0.65),//设置popup背景颜色
  ),
  home: RootPage(),
)

效果图：

PopupMenuButton

12.滑动ListView让键盘消失

FocusScope.of(context).requestFocus(FocusNode());

//监听ListView的滑动事件，让键盘消失
Expanded(
    flex: 1, //占据剩余空间
    child: MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: NotificationListener(
        onNotification: (ScrollNotification note){
          FocusScope.of(context).requestFocus(FocusNode());
        },//滑动让键盘消失
        child: ListView.builder(
          itemCount: _models.length,
          itemBuilder: _itemForRow,
        ),
      ),
    ),
  )

13.Containter 设置部分圆角和阴影效果

 @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 10, bottom: 10),
      decoration: BoxDecoration(
        color: Colors.white,
        // 设置阴影 要在裁剪之外添加一个Containter里面处理，否则无效
        boxShadow: [
          BoxShadow(
              color: Color(0xff333333).withOpacity(0.05),
              offset: Offset(0, 1.0),
              blurRadius: 5),
        ],
      ),
      child: new ClipRRect(
        // 设置局部圆角
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(5),
          bottomRight: Radius.circular(5),
        ),
        child: Container(
          height: ScreenUtil().setHeight(147),
          child: Container(
            margin: EdgeInsets.only(left: 40, right: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: navigatorList.map((item) {
                return _navigatorItem(context, item);
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }

14. Scaffold 的 appBar 去掉底部阴影

return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.white,
    centerTitle: true,
    title: Text(
      "发现",
      style: TextStyle(
          color: Color(0xff333333), fontSize: ScreenUtil().setSp(34)),
    ),
    bottomOpacity: 0,
    elevation: 0, // 去掉底部阴影
  ),
);

其他

@override
  Widget build(BuildContext context) {
    return Scaffold(
      //头部元素 比如：左侧返回按钮 中间标题 右侧菜单
      appBar: AppBar(
        title: Text('Scaffold脚手架组件示例'),
      ),
      //视图内容部分 通常作为应用页面的主显示区域
      body: Center(
        child: Text('Scaffold'),
      ),
      //底部导航栏
      bottomNavigationBar: BottomAppBar(
        child: Container(height: 50.0,),
      ),
      //添加FAB按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
      //FAB按钮居中展示
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );

15.Image图片设置宽度自适应

Container(
    margin: EdgeInsets.only(left: 15, right: 15),
    height: ScreenUtil().setHeight(243),
    decoration: BoxDecoration(
        image: DecorationImage(
      image: NetworkImage(
          'http://fdfs.xmcdn.com/group63/M0A/99/95/wKgMaFz_RD-BDyFjAAIO0iRtj0U176.jpg'),
      fit: BoxFit.fitWidth,
      alignment: Alignment.topCenter,
    )),
  ),

16.FlutterListView嵌套GridView滚动冲突问题

ListView和GirdView都是滚动Widget 两个部件嵌套就会存在滚动冲突，解决办法如下

body: new ListView(
          shrinkWrap: true,
          padding: EdgeInsets.all(0),
          children: <Widget>[
            new GridView.count(
             padding: EdgeInsets.all(0),
            physics: new NeverScrollableScrollPhysics(),//增加
            shrinkWrap: true,//增加
            crossAxisCount: 3,
            children:<Widget>[]
          ],
        ),

① 处理listview嵌套报错

shrinkWrap: true,

②处理GridView中滑动父级Listview无法滑动

physics: new NeverScrollableScrollPhysics();

17.Flutter 自定义TabBar和修改indiactor 宽度

1. 关键代码

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

class FriendsList extends StatefulWidget {
  @override
  _FriendsListState createState() => _FriendsListState();
}
class _FriendsListState extends State<FriendsList>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(initialIndex: 0, length: 2, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Container(
              height: ScreenUtil().setHeight(73),
              alignment: Alignment.topLeft,
              child: TabBar(
                tabs: [
                  Tab(text: '好友'),
                  Tab(text: '心动'),
                ],
                controller: _tabController,
                indicatorWeight: 2,
                indicatorPadding: EdgeInsets.only(left: 10, right: 10),
                labelPadding: EdgeInsets.symmetric(horizontal: 10),
                isScrollable: true,
                indicatorColor: Color(0xffFF7E98),
                labelColor: Color(0xffFF7E98),
                labelStyle: TextStyle(
                  fontSize: ScreenUtil().setSp(36),
                  color: Color(0xffFF7E98),
                  fontWeight: FontWeight.w500,
                ),
                unselectedLabelColor: Color(0xffAAAAAA),
                unselectedLabelStyle: TextStyle(
                    fontSize: ScreenUtil().setSp(32), color: Color(0xffAAAAAA)),
                indicatorSize: TabBarIndicatorSize.label,
              )),
          backgroundColor: Colors.white,
          elevation: 0,
        ),
        body: TabBarView(
          children: [
            Container(
              child: Center(
                child: Text("好友页面"),
              ),
            ),
            Container(
              child: Center(
                child: Text("心动页面"),
              ),
            ),
          ],
          controller: _tabController,
        ),
      ),
    );
  }
}

2. 效果图

效果图.gif

18 fluro 插件实现appBar不要出现返回键

Application.router.navigateTo(context, "/index",replace: true);

19.文字溢出处理

①Expanded + TextOverflow.ellipsis 设置省略号

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("LayoutPage")),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.star,
              size: 16.0,
              color: Colors.grey,
            ),
            Padding(padding: new EdgeInsets.only(left: 5.0)),
            Expanded(
              child: Text(
                "100010001000100010001000100010001000100010001000100010001000100010001000100010001000100010001000",
                style: new TextStyle(color: Colors.grey, fontSize: 14.0),
                // 设置省略号
                overflow: TextOverflow.ellipsis,
                // 设置最大行数
                maxLines: 1,
              ),
            )
          ],
        ),
      ),
    );
  }

② Expanded + TextOverflow.ellipsis 不生效

通过

限定Container 宽度
Row 布局嵌套 Expanded 可以添加约束

TextOverflow.ellipsis 不生效

20.数据解析报错之关键字 do

do 为关键字，不能设置为Model的属性，应该用其他名称替换

class UserChatList {
  int doType;
  UserChatList({this.doType});
  UserChatList.fromJson(Map<String, dynamic> json) {
    doType = json['do'];
  }

21.聊天消息UI搭建

效果图

聊天消息U

思路

①Positison 设置

right: ScreenUtil().setWidth(20),
bottom: -ScreenUtil().setHeight(50),

② Stack 设置溢出显示

overflow: Overflow.visible

关键代码

/// 聊天Widget
  Widget ChatWidget(String chatType, String msg) {
    // 1 发出者
    if (chatType == 'send') {
      return Container(
        decoration: BoxDecoration(
          color: Colors.white,
          // 设置阴影
          boxShadow: [
            BoxShadow(
              color: Color(0xffFF7E98),
              offset: Offset(0, 1),
              blurRadius: 8,
            )
          ],
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15),
              topRight: Radius.circular(15),
              bottomRight: Radius.circular(15)),
        ),
        height: ScreenUtil().setHeight(80),
        margin: EdgeInsets.only(
          top: ScreenUtil().setHeight(40),
        ),
        padding: EdgeInsets.only(
            left: ScreenUtil().setWidth(40),
            right: ScreenUtil().setWidth(40),
            top: ScreenUtil().setHeight(10),
            bottom: ScreenUtil().setHeight(10)),
        child: Text(
          msg != null && msg.length > 0 ? msg : '',
          style: TextStyle(
              fontSize: ScreenUtil().setSp(30), color: Color(0xff333333)),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
      );
    } else if (chatType == 'minisend') {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Stack(
            overflow: Overflow.visible,
            children: <Widget>[
              // 消息
              Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  // 设置阴影
                  boxShadow: [
                    BoxShadow(
                      color: Color(0xffFF7E98),
                      offset: Offset(1, 1),
                      blurRadius: 8,
                    )
                  ],
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15),
                      topRight: Radius.circular(15),
                      bottomRight: Radius.circular(15)),
                ),
                height: ScreenUtil().setHeight(80),
                margin: EdgeInsets.only(
                  top: ScreenUtil().setHeight(40),
                ),
                padding: EdgeInsets.only(
                    left: ScreenUtil().setWidth(40),
                    right: ScreenUtil().setWidth(40),
                    top: ScreenUtil().setHeight(10),
                    bottom: ScreenUtil().setHeight(10)),
                child: Text(
                  '😊很想认识你😊',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(30),
                      color: Color(0xff333333)),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              Positioned(
                right: ScreenUtil().setWidth(20),
                bottom: -ScreenUtil().setHeight(50),
                child: // 小程序路径
                    Container(
                  margin: EdgeInsets.only(top: ScreenUtil().setHeight(16)),
                  child: Row(
                    children: <Widget>[
                      Text(
                        '去小程序查看',
                        style: TextStyle(
                            fontSize: ScreenUtil().setSp(22),
                            color: Color(0xffFF7E98)),
                      ),
                      Icon(
                        MyIcons.sex_boy,
                        size: ScreenUtil().setSp(16),
                        color: Color(0xffFF7E98),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      );
    } else if (chatType == 'mine') {
      return Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              // 设置阴影
              boxShadow: [
                BoxShadow(
                  color: Color(0xffFF7E98),
                  offset: Offset(0, 1),
                  blurRadius: 8,
                )
              ],
              // 设置渐变色
              gradient: LinearGradient(
                colors: [Color(0xFFFF7E98), Color(0xFFFD7BAB)],
                begin: Alignment(-1, -1),
                end: Alignment(1.0, 0.56),
              ),
              // 设置圆角
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(15),
                  topRight: Radius.circular(15),
                  bottomLeft: Radius.circular(15)),
            ),
            height: ScreenUtil().setHeight(80),
            margin: EdgeInsets.only(
              top: ScreenUtil().setHeight(40),
            ),
            padding: EdgeInsets.only(
                left: ScreenUtil().setWidth(40),
                right: ScreenUtil().setWidth(40),
                top: ScreenUtil().setHeight(10),
                bottom: ScreenUtil().setHeight(10)),
            child: Text(
              msg != null && msg.length > 0 ? msg : '',
              style: TextStyle(
                  fontSize: ScreenUtil().setSp(30), color: Colors.white),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          )
        ],
      );
    } else {
      return Container(
        margin: EdgeInsets.only(bottom:ScreenUtil().setHeight(40) ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    // 设置阴影
                    boxShadow: [
                      BoxShadow(
                        color: Color(0xffFF7E98),
                        offset: Offset(0, 1),
                        blurRadius: 8,
                      )
                    ],
                    // 设置渐变色
                    gradient: LinearGradient(
                      colors: [Color(0xFFFF7E98), Color(0xFFFD7BAB)],
                      begin: Alignment(-1, -1),
                      end: Alignment(1.0, 0.56),
                    ),
                    // 设置圆角
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(15),
                        topRight: Radius.circular(15),
                        bottomLeft: Radius.circular(15)),
                  ),
                  height: ScreenUtil().setHeight(80),
                  margin: EdgeInsets.only(
                    top: ScreenUtil().setHeight(40),
                  ),
                  padding: EdgeInsets.only(
                      left: ScreenUtil().setWidth(40),
                      right: ScreenUtil().setWidth(40),
                      top: ScreenUtil().setHeight(10),
                      bottom: ScreenUtil().setHeight(10)),
                  child: Text(
                    msg != null && msg.length > 0 ? msg : '',
                    style: TextStyle(
                        fontSize: ScreenUtil().setSp(30), color: Colors.white),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                // 小程序路径
                Positioned(
                  left: ScreenUtil().setWidth(20),
                  bottom: -ScreenUtil().setHeight(50),
                  child: Container(
                    margin: EdgeInsets.only(top: ScreenUtil().setHeight(16),),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Text(
                          '去小程序查看',
                          style: TextStyle(
                              fontSize: ScreenUtil().setSp(22),
                              color: Color(0xffFF7E98)),
                        ),
                        Icon(
                          MyIcons.sex_boy,
                          size: ScreenUtil().setSp(16),
                          color: Color(0xffFF7E98),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      );
    }
  }

22. Flutter 复制到剪切板

通过Clipboard实现复制操作

1.声明key并在Scaffold指定key

/// 剪切板Key
final clicpBoardKey  = new GlobalKey<ScaffoldState>();
return Scaffold(
key: clicpBoardKey,
);

2.实现复制操作并弹出SnackBar

Clipboard.setData(ClipboardData(text: '人生若只初相见'));
clicpBoardKey.currentState.showSnackBar(SnackBar(content: Text('已复制到剪贴板')));

其他

Scaffold.of(context).showSnackBar(SnackBar(
                //提示信息内容部分
                content: Text("显示SnackBar"),
              ));

23.Url 转义 decode

decodeURIComponent('%2Fpage%2Forigin%2Forigin%3Fuid%3D')

24.获取widget 控件的尺寸

通过Context
通过GlobalKey
通过LayoutChangedNotification(重写)

// 宽度
width: MediaQuery.of(context).size.width,
// 高度
height: MediaQuery.of(context).size.height * 0.05,
// 注意: context 为父组件的context

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class NewSizeChangedLayoutNotification extends LayoutChangedNotification{
  Size size;

  NewSizeChangedLayoutNotification(this.size);
}

class NewSizeChangedLayoutNotifier extends SingleChildRenderObjectWidget {
  const NewSizeChangedLayoutNotifier({
    Key key,
    Widget child,
  }) : super(key: key, child: child);

  @override
  _NewRenderSizeChangedWithCallback createRenderObject(BuildContext context) {
    return _NewRenderSizeChangedWithCallback(
        onLayoutChangedCallback: (Size size) {
          NewSizeChangedLayoutNotification(size).dispatch(context);
        }
    );
  }
}

typedef VoidCallbackWithParam = Function(Size size);

class _NewRenderSizeChangedWithCallback extends RenderProxyBox {
  _NewRenderSizeChangedWithCallback({
    RenderBox child,
    @required this.onLayoutChangedCallback,
  }) : assert(onLayoutChangedCallback != null),
        super(child);

  final VoidCallbackWithParam onLayoutChangedCallback;

  Size _oldSize;

  @override
  void performLayout() {
    super.performLayout();
    //在第一次layout结束后就会进行通知
    if (size != _oldSize)
      onLayoutChangedCallback(size);
    _oldSize = size;
  }
}

25.decoration相关

1) 边框

// 同时设置4条边框：1px粗细的黑色实线边框
BoxDecoration(
  border: Border.all(color: Colors.black, width: 1, style: BorderStyle.solid)
)

// 设置单边框：上边框为1px粗细的黑色实线边框，右边框为1px粗细的红色实线边框
BoxDecoration(
  border: Border(
    top: BorderSide(color: Colors.black, width: 1, style: BorderStyle.solid),
    right: BorderSide(color: Colors.red, width: 1, style: BorderStyle.solid),
  ),
)

2) 圆角

// 同时设置4个角的圆角为5
BoxDecoration(
  borderRadius: BorderRadius.circular(5),
)

// 设置单圆角：左上角的圆角为5，右上角的圆角为10
BoxDecoration(
  borderRadius: BorderRadius.only(
    topLeft: Radius.circular(5),
    topRight: Radius.circular(10),
  ),
)

3) 阴影

BoxDecoration(
  boxShadow: [
    BoxShadow(
      offset: Offset(0, 0),
      blurRadius: 6,
      spreadRadius: 10,
      color: Color.fromARGB(20, 0, 0, 0),
    ),
  ],
)

4) 渐变色

// 从左到右，红色到蓝色的线性渐变
BoxDecoration(
  gradient: LinearGradient(
    begin: Alignment.centerLeft,
    end: Alignment.centerRight,
    colors: [Colors.red, Colors.blue],
  ),
)

// 从中心向四周扩散，红色到蓝色的径向渐变
BoxDecoration(
  gradient: RadialGradient(
    center: Alignment.center,
    colors: [Colors.red, Colors.blue],
  ),
)
// 设置角度
final gradient = Utils.parseAngleToAlignment(90);
BoxDecoration(
    gradient: LinearGradient(
        colors: [
            Color(0xFFFFA3AD),
            Color(0xFFFC5E72)
        ],
        begin: Alignment(gradient['beginX'], gradient['beginY']),
        end: Alignment(gradient['endX'], gradient['endY'])
    ),
    borderRadius: BorderRadius.circular(2)
)

26.MaterialApp 使用讲解


字段  类型

home（主页）    Widget
routes（路由）  Map<String, WidgetBuilder>
theme（主题）   ThemeData
debugShowMaterialGrid（调试显示材质网格） bool

navigatorKey（导航键）   GlobalKey<NavigatorState>
onGenerateRoute（生成路由）   RouteFactory
onUnknownRoute（未知路由）    RouteFactory
navigatorObservers（导航观察器）   List<NavigatorObserver>
initialRoute（初始路由）  String
builder（建造者）    TransitionBuilder
title（标题）   String
onGenerateTitle（生成标题）   GenerateAppTitle
color（颜色）   Color
locale(地点)  Locale
localizationsDelegates（本地化委托）   Iterable<LocalizationsDelegate<dynamic>>
localeResolutionCallback（区域分辨回调）    LocaleResolutionCallback
supportedLocales（支持区域）  Iterable<Locale>
showPerformanceOverlay（显示性能叠加）  bool
checkerboardRasterCacheImages（棋盘格光栅缓存图像）    bool
checkerboardOffscreenLayers（棋盘格层）   bool
showSemanticsDebugger（显示语义调试器）  bool
debugShowCheckedModeBanner（调试显示检查模式横幅）  bool

27.使用`FutureBuilder`每调用一次setState就会重新请求`future`

解决方法：将 future提取出来，作为一个变量

Future<int> future;

  @override
  void initState() {
    super.initState();
    future=getInt();
  }

  FutureBuilder<int>(
    future: future,
    builder: (context, snapshot) {
      return ...;
    }
  ),

  Future<int> getInt(){
    return Future.value(1);
  }

28.输入框内容为空时，长按不显示粘贴工具栏

将输入框中的autoFocus属性为ture去掉

29.Flutter 左上角返回按钮回调(CallBack)

1.1 async await 实现

/// 跳转到下级页面时 await Navigator.pushNamed
onTap: () async {
    await Navigator.pushNamed(context, '/account');
    //执行 刷新数据操作
    refrshData();
  },

2.嵌套封装会导致await 失效

class NavigatorUtil{
  /// 通用跳转
  static push(BuildContext context,Widget widget ) {
    Navigator.push(context, PageRouteBuilder(transitionDuration: Duration(milliseconds: 300),
        pageBuilder: (context, animation, secondaryAnimation){
          return new FadeTransition( //使用渐隐渐入过渡,
            opacity: animation,
            child:widget,
          );
        })
    );
  }
}

//使用导致await失效
onTap: () async {
    // 其他
     await NavigatorUtil.push(context, widget);
     //执行刷新操作
  },

解决方案
封装层嵌套 async await

class NavigatorUtil{
  /// 通用跳转
  static push(BuildContext context,Widget widget ) async {
    await Navigator.push(context, PageRouteBuilder(transitionDuration: Duration(milliseconds: 300),
        pageBuilder: (context, animation, secondaryAnimation){
          return new FadeTransition( //使用渐隐渐入过渡,
            opacity: animation,
            child:widget,
          );
        })
    );
  }
}

30.GestureDetector 手势冲突

解决手势冲突 - IgnorePointer

IgnorePointer(
  child: GestureDetector(
    child: Container(
      height: ScreenUtil().setHeight(300),
      width: Screen.width,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(ScreenUtil().setWidth(20)),
          topRight: Radius.circular(ScreenUtil().setWidth(20)),
        ),
        gradient: LinearGradient(
          colors: [
            Color(0xFFFFFFFF),
            Colors.white.withOpacity(.2),
            Colors.white.withOpacity(0),
            Colors.white.withOpacity(0),
            Colors.white.withOpacity(0)
          ],
          begin: Alignment(
              topGradient['beginX'], topGradient['beginY']),
          end: Alignment(topGradient['endX'], topGradient['endY']),
        ),
      ),
    ),
    onTap: () {
      backToTop();
    },
  ),
),

31.TextField 设置border 颜色(黑线修改颜色)

/// 输入框
Container(
    child: Theme(
        data: ThemeData(
                primaryColor: Colors.white, hintColor: Colors.white),
        child: TextField(
            style: TextStyle(
                fontSize: ScreenUtil().setSp(36),
                color: Colors.white,
            ),
            controller: inputController,
            onChanged: handlePhoneInput,
            autofocus: true,
            decoration: new InputDecoration(
                border: const UnderlineInputBorder(
                    borderSide: BorderSide(style: BorderStyle.solid,color: Colors.white,),
                ),
                contentPadding: EdgeInsets.only(
                    left: ScreenUtil().setWidth(100),
                    right: ScreenUtil().setWidth(20),
                    top: ScreenUtil().setWidth(20),
                    bottom: ScreenUtil().setWidth(20),
                ),
                hintText: '输入手机号',
                hintStyle: TextStyle(
                    color: Color.fromRGBO(255, 255, 255, .7),
                    fontSize: ScreenUtil().setSp(36),
                ),
            ),
        ),
    ),
),

32.decoration 阴影设置无边界

通过Opacity 以及 LinearGradient设置 stops节点和colors 结合

// 顶部阴影
Opacity(
  opacity: 0.23,
  child: Container(
    height: ScreenUtil().setHeight(129),
    decoration: BoxDecoration(
      gradient: LinearGradient(
          stops: [
            0,
            .8
          ],
          colors: [
            Color(0xff565656),
            Color(0xFF030303).withOpacity(0),
          ],
          begin:
              Alignment(gradient['beginX'], gradient['beginY']),
          end: Alignment(gradient['endX'], gradient['endY'])),
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0),
      ),
    ),
    child: Container(
      margin: EdgeInsets.only(
        left: ScreenUtil().setWidth(10),
        right: ScreenUtil().setWidth(17),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(
                top: ScreenUtil().setHeight(17)),
            child: Row(
              children: <Widget>[
                Icon(
                  MyIcons.heart,
                  size: ScreenUtil().setSp(40),
                  color: Colors.white,
                ),
                Container(
                  margin: EdgeInsets.only(
                    left: ScreenUtil().setWidth(5),
                    top: ScreenUtil().setWidth(5),
                  ),
                  child: Text(
                    this.widget.item != null &&
                            this.widget.item.praises != null
                        ? this.widget.item.praises.toString()
                        : '',
                    style: TextStyle(
                      fontSize: ScreenUtil().setSp(20),
                      color: Colors.white,
                    ),
                    textAlign: TextAlign.center,
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    ),
  ),
)

33.Dart List.asMap() 获取下标

 this.list.asMap().keys.map((i) {
   // i 为下标
    return _itemUI(context, i);
  }).toList()

34.indexWhere 获取数组索引

int currentIndex = this.renderList.indexWhere((item) => item.id == feed.id);

35.build runner 插件使用

build runner 插件编译生成属性快捷键

flutter packages run build_runner build --delete-conflicting-outputs

36.Container点击区域过小

GestureDetector 内Container不设置color点击区域会根据内容大小来定

37.xcrun instruments 打开模拟器

xcrun instruments -w "iPhone 8 Plus (13.1)"

39. GestureDetector处理手势操作 behavior 行为

HitTestBehavior.opaque 自己处理事件
HitTestBehavior.deferToChild child处理事件
HitTestBehavior.translucent 自己和child都可以接收事件

40.Widget无法居中，对齐

 Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
          Container(
              width: ScreenUtil().setHeight(114),
              height: ScreenUtil().setHeight(114),
              margin: EdgeInsets.only(
                left: ScreenUtil().setWidth(10),
              ),
              child: Center(child: FailedDot(),),
            )
          : Container()
    ],
  ),

41.Flutter Container 点击区域太小

使用GestureDetector包裹Container，发现在Container内容为空的区域点击时，捕捉不到onTap点击事件。
解决方案：在GestureDetector里面添加属性：behavior: HitTestBehavior.opaque,即可：

GestureDetector(
          behavior: HitTestBehavior.opaque,
          child: Container( width: ScreenUtil().setHeight(114),
              height: ScreenUtil().setHeight(114),child:Text('点我')),
          onTap: () {
            this.handlePlayVoice();
          },
        )

42.监听页面返回事件(返回按钮点击+侧滑返回)

侧滑不会触发onBack回调,因此使用WillPopScope的onWillPop来实现

 @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 设置草稿箱
        this.setCraft();
        return true;
      },
      child: Container()
  }

43PageView使用注意事项

问题描述：第一次指定加载第二个page，切换时需要切换两次才显示正常

原因分析：
PageView未初始化时默认index = 0,你强行修改时会导致两个index不一致

解决办法：

 _controller = PageController(initialPage: currentIndex);
/// 切换
_controller.animateToPage(
                                  currentIndex,
                                  duration: Duration(
                                    milliseconds:
                                        (pageSwitchAnimatedTime + 100),
                                  ),
                                  curve: Curves.ease,
                                );

44 ClipOval组件详解

圆形裁剪(超出部分隐藏，相当于Stack的overFlow为clip)

Center(
      child: ClipOval(
        child: Image.asset(
          "images/app.png",
          width: 100.0,
          height: 100.0,
          fit: BoxFit.cover,
        ),
      ),
    )

45如何判断设备是否为iPad

// 1.导入设备信息插件
# 设备信息
device_info: ^0.4.0

// 2. 使用
Future<bool> isIpad() async{
  DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
  IosDeviceInfo info = await deviceInfo.iosInfo;
  if (info.name.toLowerCase().contains("ipad")) {
    return true;
  }
  return false;
}

46 setState导致的内存泄漏——setState() called after dispose()

错误原因

定时器没有被销毁(dispose 销毁cancel)

解决方法

临时方案

异步消息未返回，所以在setState方法之前调用mouted属性进行判断即可

if (mounted) {
  setState(() {
    //refreshData
  });
}

最终解决方案

@override
  void dispose() {
    _countdownTimer?.cancel();
    super.dispose();
  }

47.Flutter 设置圆角图片

通过 ClipRRect + borderRadius 实现

Container(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Image.network(
          this.matchedUser.user.avatar,
          fit: BoxFit.cover,
        ),
      ),
      width: AdaptationUtils.px(140),
      height: AdaptationUtils.px(140),
    )

48.clamp 语法

顾名思义，夹紧，所得的结果不会超出这个范围，类似于闭区间[]
例如：

int origen = 10;
int result = origen.clamp(2, 11);
print(result);//MARK:结果为10
//
int origen = 10;
int result = origen.clamp(2, 9);
print(result);//MARK:结果为9

49.Flutter 扩大点击区域(Container)

效果图

扩大点击区域.gif

代码封装

/// 扩大点击区域(Container)
///
/// created by hujintao
/// created at 2020-03-19
//
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class EnlargeWrapper extends StatefulWidget {
  Widget child;
  EdgeInsetsGeometry enlarge;

  EnlargeWrapper({
    this.child,
    this.enlarge,
  });

  @override
  _EnlargeWrapperState createState() => _EnlargeWrapperState();
}

class _EnlargeWrapperState extends State<EnlargeWrapper> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: this.widget.child,
      padding: this.widget.enlarge ??
          EdgeInsets.fromLTRB(
            ScreenUtil().setWidth(40),
            ScreenUtil().setWidth(40),
            ScreenUtil().setWidth(40),
            ScreenUtil().setWidth(40),
          ),
//      color: Colors.yellow,//测试
      color: Colors.transparent,
    );
  }
}

使用

Center(
    child: GestureDetector(
      child: EnlargeWrapper(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
          child: Center(
            child: Text('点我s撒'),
          ),
        ),
        enlarge: EdgeInsets.all(50),
      ),
      onTap: () {
        Toast.show('点击了');
      },
    ),
  )

50.根据名称读取文件

//根据名称读取文件
import 'dart:io';

readFile(name) async {
  //创建文件对象
  var file = File(name);
  try {
    //判断是否存在
    bool exists = await file.exists();
    if (exists) {
      //如果存在
      print(await file.length()); //文件大小(字节)---137
      print(await file.lastModified()); //最后修改时间---2018-12-21 13:49:35.000
      print(file.parent.path); //获取父文件夹的路径---C:\Users\Administrator\Desktop\dart
      return await file.readAsString(); //读取文件并返回
    } else {
      await file.create(recursive: true); //不存在则创建文件
      return "未发现文件,已为您创建!Dart机器人:2333";
    }
  } catch (e) {
    //异常处理
    print(e);
  }
}

使用

var result = await readFile("\Users\XXX\Desktop\dart\test.txt");
  print(result);

添加所有SD卡文件名称

// 添加所有SD卡文件名称
  localPath() {
    try {
      var perm =
          SimplePermissions.requestPermission(Permission.ReadExternalStorage);
      var sdPath = getExternalStorageDirectory();
      sdPath.then((file) {
        perm.then((v) {
          file.list().forEach((i) {
            _files.add(i.path);
          });
          setState(() {});
        });
      });
    } catch (err) {
      print(err);
    }
  }

51 Flutter 微信分享和支付回调

通过 fluwx 微信SDK插件
下载插件

# 微信sdk
fluwx: ^1.2.1+1

1.微信分享回调

import 'package:fluwx/fluwx.dart' as fluwx;
/// 微信分享监听
StreamSubscription wxShareListener;
 @override
  void initState() {
    super.initState();
    this.track();
    initWxShareListener();
  }
  /// 初始化微信分享监听
  void initWxShareListener() {
    wxShareListener =
        fluwx.responseFromShare.listen(this.onWxShareResponse);
  }
  /// 微信分享响应
  void onWxShareResponse(fluwx.WeChatShareResponse response) {
    print(
        'pay success: ${response.errStr}, ${response.type}, ${response.errCode}, ${response.androidOpenId}');
    if (response.errCode == 0) {
     Toast.show('分享回来了额~~~~');
    } 
  }
  // 销毁监听
  @override
  void dispose() {
    wxShareListener.cancel();
    super.dispose();
  }

2.微信支付回调

import 'package:fluwx/fluwx.dart' as fluwx;
/// 微信支付监听
StreamSubscription fluwxPaymentListener;
 @override
  void initState() {
    super.initState();
    this.track();
    initWxPayListener();
  }
  /// 初始化微信支付监听
  void initWxPayListener() {
    fluwxPaymentListener =
        fluwx.responseFromPayment.listen(this.onWxPayResponse);
  }
  /// 微信支付响应
  void onWxPayResponse(fluwx.WeChatPaymentResponse response) {
    print(
        'pay success: ${response.errStr}, ${response.type}, ${response.errCode}, ${response.androidOpenId}');

    // 微信响应之后, 不允许关闭窗口
    if (this.canClose) {
      this.canClose = false;
      setState(() {});
    }

    if (response.errCode == 0) {
      this.checkOrderStatus();
    } else {
      if (response.errCode == -1) {
        this.onError(PayErrorEnum.WxPayError);
      } else if (response.errCode == -2) {
        this.onError(PayErrorEnum.WxPayCanceled);
      } else {
        this.onError(PayErrorEnum.WxPayUnKnowError);
      }
    }
  }
  // 销毁监听
  @override
  void dispose() {
    fluwxPaymentListener.cancel();
    super.dispose();
  }

52.数据库操作抽象类(接口封装)

//数据库操作抽象类
abstract class DateBaseOperate {

  void insert(); //定义插入的方法

  void delete(); //定义删除的方法

  void update(); //定义更新的方法

  void query(); //定义一个查询的方法
}

//数据库操作实现类
class DateBaseOperateImpl extends DateBaseOperate {

  //实现了插入的方法
  void insert(){
    print('实现了插入的方法');
  }

  //实现了删除的方法
  void delete(){
    print('实现了删除的方法');
  }

  //实现了更新的方法
  void update(){
    print('实现了更新的方法');
  }

  //实现了一个查询的方法
  void query(){
    print('实现了一个查询的方法');
  }

}


main() {

  var db = new DateBaseOperateImpl();
  db.insert();
  db.delete();
  db.update();
  db.query();

}

53 .继承

//动物类
class Animal {

  //动物会吃
  void eat(){
    print('动物会吃');
  }

  //动物会跑
  void run(){
    print('动物会跑');
  }
}
//人类
class Human extends Animal {

  //人类会说
  void say(){
    print('人类会说');
  }

  //人类会学习
  void study(){
    print('人类会学习');
  }
}

main() {
  print('实例化一个动物类');
  var animal = new Animal();
  animal.eat();
  animal.run();

  print('实例化一个人类');
  var human = new Human();
  human.eat();
  human.run();
  human.say();
  human.study();
}

54.流程控制语句

void test(){

    //if else 示例
//    String today = 'Monday';
//    if (today == 'Monday') {
//      print('今天是星期一');
//    } else if (today == 'Tuesday') {
//      print('今天是星期二');
//    } else {
//      print('今天是个好日子');
//    }


    //for循环示例
    var message = new StringBuffer("Hello Dart");
    for (var i = 0; i < 5; i++) {
      message.write('!');
    }
    print(message);

    //forEach示例
//    var arr = [0, 1, 2, 3, 4, 5, 6];
//    for (var v in arr) {
//      print(v);
//    }

    //while循环示例
//    var _temp = 0;
//    while(_temp < 5){
//
//      print("这是一个循环: " + (_temp).toString());
//      _temp ++;
//    }

    //do-while循环示例
//    var _temp = 0;
//
//    do{
//      print("这是一个循环: " + (_temp).toString());
//      _temp ++;
//    }
//    while(_temp < 5);

    //break continue示例
    var arr = [0, 1, 2, 3, 4, 5, 6];
    for (var v in arr) {
      if(v == 2 ){
        //break;
        continue;
      }
      print(v);
    }


    //switch case示例
    String today = 'Monday';
    switch (today) {
      case 'Monday':
        print('星期一');
        break;
      case 'Tuesday':
        print('星期二');
        break;
    }

    //异常处理示例
    try {
      // ···
    } on Exception catch (e) {
      print('Exception details:\n $e');
    } catch (e, s) {
      print('Exception details:\n $e');
      print('Stack trace:\n $s');
    } finally {
      print('Do some thing:\n');
    }
  }

54 .Getters 和 Setters 方法

class Rectangle {
  num left;
  num top;
  num width;
  num height;

  Rectangle(this.left, this.top, this.width, this.height);

  //获取right值
  num get right         => left + width;

  //设置right值 同时left也发生变化
  set right(num value)  => left = value - width;

  //获取bottom值
  num get bottom        => top + height;

  //设置bottom值 同时top也发生变化
  set bottom(num value) => top = value - height;
}

55. Text设置下划线，虚线和删除线

TextStyle(
              //字体颜色
              color: const Color(0xffff0000),
              //文本装饰器(删除线)
              decoration: TextDecoration.lineThrough,
              //文本装饰器颜色(删除线颜色)
              decorationColor: const Color(0xff000000),
              //字体大小
              fontSize: 18.0,
              //字体样式 是否斜体
              fontStyle: FontStyle.italic,
              //字体粗细
              fontWeight: FontWeight.bold,
              //文字间距
              letterSpacing: 2.0,
            )
// 下划线
color: const Color(0xffff9900),
decoration: TextDecoration.underline,
// 虚线
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
// 斜体
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,

56.PopupMenuButton组件示例

//会控菜单项
enum ConferenceItem { AddMember, LockConference, ModifyLayout, TurnoffAll }
FlatButton(
    onPressed: () {},
    child: PopupMenuButton<ConferenceItem>(
      onSelected: (ConferenceItem result) {},
      itemBuilder: (BuildContext context) =>//菜单项构造器
      <PopupMenuEntry<ConferenceItem>>[
        const PopupMenuItem<ConferenceItem>(//菜单项
          value: ConferenceItem.AddMember,
          child: Text('添加成员'),
        ),
        const PopupMenuItem<ConferenceItem>(
          value: ConferenceItem.LockConference,
          child: Text('锁定会议'),
        ),
        const PopupMenuItem<ConferenceItem>(
          value: ConferenceItem.ModifyLayout,
          child: Text('修改布局'),
        ),
        const PopupMenuItem<ConferenceItem>(
          value: ConferenceItem.TurnoffAll,
          child: Text('挂断所有'),
        ),
      ],
    ),
  )

57.TextField组件详解

TextField(
      //绑定controller
      controller: controller,
      //最大长度，设置此项会让TextField右下角有一个输入数量的统计字符串
      maxLength: 30,
      //最大行数
      maxLines: 1,
      //是否自动更正
      autocorrect: true,
      //是否自动对焦
      autofocus: true,
      //是否是密码
      obscureText: false,
      //文本对齐方式
      textAlign: TextAlign.center,
      //输入文本的样式
      style: TextStyle(fontSize: 26.0, color: Colors.green),
      //文本内容改变时回调
      onChanged: (text) {
        print('文本内容改变时回调 $text');
      },
      //内容提交时回调
      onSubmitted: (text) {
        print('内容提交时回调 $text');
      },
      enabled: true, //是否禁用
      decoration: InputDecoration(//添加装饰效果
          fillColor: Colors.grey.shade200,//添加灰色填充色
          filled: true,
          helperText: '用户名',
          prefixIcon: Icon(Icons.person),//左侧图标
          suffixText: '用户名'),//右侧文本提示
    )

58. 滑动删除示例

效果图

滑动删除.gif

代码

import 'package:flutter/material.dart';
void main() {
  runApp(new MaterialApp(
    title: '滑动删除示例',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {

  //构建30条列表数据
  List<String> items = new List<String>.generate(30, (i) => "列表项 ${i + 1}");

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('滑动删除示例'),
      ),
      //构建列表
      body: new ListView.builder(
        itemCount: items.length,//指定列表长度
        itemBuilder: (context, index) {//构建列表

          //提取出被删除的项
          final item = items[index];

          //返回一个可以被删除的列表项
          return new Dismissible(
              key: new Key(item),
              //被删除回调
              onDismissed: (direction) {
                //移除指定索引项
                items.removeAt(index);
                //底部弹出消息提示当前项被删除了
                Scaffold.of(context).showSnackBar(
                    new SnackBar(content: new Text("$item 被删除了")));
              },
              child: new ListTile(title: new Text('$item'),)
          );
        },
      ),
    );
  }
}

59 自定义字体添加及使用

1.放置字体资源

放置字体资源
2.在pubspec.yaml配置路径

fonts:
    - family: myfont
      fonts:
        - asset: fonts/myfont.ttf

3.使用

Center(
    child: new Text(
      '你好 flutter',
      style: new TextStyle(fontFamily: 'myfont',fontSize: 36.0),
    ),
  )

效果图

效果图

60.页面跳转返回数据

//压栈操作并等待页面返回操作
final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);
//读取并显示返回值
Scaffold.of(context).showSnackBar(SnackBar(content: Text("$result")));

//出栈带上参数 返回到上一个页面
Navigator.pop(context, 'hi flutter');

61.fluro 企业级路由使用

导入依赖

fluro: ^1.5.0

组件封装

// 1.定义Application类
import 'package:fluro/fluro.dart';

//定义Application类
class Application{
  //使用静态变量创建Router对象
  static Router router;
}

// 2.定义路由集和handler
/// 2.1 handler
import 'package:fluro/fluro.dart';
import '../pages/second_page.dart';
import 'package:flutter/material.dart';

//创建Handler用来接收路由参数及返回第二个页面对象
Handler secondPageHandler = Handler(
  handlerFunc: (BuildContext context,Map<String,List<String>> params){
    //读取goodId参数 first即为第一个数据
    String goodId = params['goodId'].first;
    return SecondPage(goodId);
  }
);

/// 2.2 路由集 
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'router_handler.dart';


//路由集
class Routes{
  //根路径
  static String root = '/';
  //第二个页面路径
  static String secondPage = '/secondPage';

  //配置路由对象
  static void configureRoutes(Router router){

    //没有找到路由的回调方法
    router.notFoundHandler = Handler(
      handlerFunc: (BuildContext context,Map<String,List<String>> params){
        print('error::: router 没有找到');
      }
    );

    //定义第二页面路由的Handler
    router.define(secondPage, handler: secondPageHandler);

  }

}

第一个页面

import 'package:flutter/material.dart';
import '../routers/application.dart';
import 'package:fluro/fluro.dart';


//第一个页面
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Fluro路由导航示例"),
      ),
      body: Center(
        child: RaisedButton(
          //点击处理
          onPressed: () {
            _navigateToSecondPage(context);
          },
          child: Text('打开第二个页面'),
        ),
      ),
    );
  }

  //路由至第二个页面
  _navigateToSecondPage(BuildContext context) async {
    //路由带的参数
    String goodId  = '001';
    //通过Application类里的路由router导航至第二个页面 可指定页面切换动画类型
    Application.router.navigateTo(context, "/secondPage?goodId=$goodId",transition: TransitionType.fadeIn).then((result) {//回传值
      //当第二个页面返回时带的参数为result值
      if (result != null) {
        print(result);
      }
    });
  }
}

第二个页面

import 'package:flutter/material.dart';

//第二个页面
class SecondPage extends StatelessWidget {
  //传递参数值
  final String goodId;

  SecondPage(this.goodId);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("第二个页面"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            //显示传递参数值
            Text(
              '$goodId',
              style: TextStyle(
                fontSize: 28.0,
                color: Colors.red,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: () {
                  //出栈带上参数 返回至第一个页面
                  Navigator.pop(context, '第二个页面返回参数($goodId)');
                },
                child: Text('点击返回'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

配置路由

import 'package:flutter/material.dart';
import './routers/routes.dart';
import 'package:fluro/fluro.dart';
import './routers/application.dart';
import './pages/first_page.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    //创建路由对象
    final router = Router();
    //配置路由集Routes的路由对象
    Routes.configureRoutes(router);
    //指定Application的路由对象
    Application.router = router;

    return Container(
      child: MaterialApp(
        title: "Fluro路由导航示例",
        debugShowCheckedModeBanner: false,
        //生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面
        onGenerateRoute: Application.router.generator,
        //主页指定为第一个页面
        home: FirstPage(),
      ),
    );
  }
}

62.数据库操作('Sqlite')

模型

//客户数据模型类
class Client {
  //id
  int id;
  //姓名
  String name;
  //年龄
  int age;
  //性别
  bool sex;

  Client({this.id, this.name, this.age, this.sex,});

  //将JSON数据转换成数据模型
  factory Client.fromMap(Map<String, dynamic> json) => Client(
        id: json["id"],
        name: json["name"],
        age: json["age"],
        sex: json["sex"] == 1,
      );

  //将数据模型转换成JSON
  Map<String, dynamic> toMap() => {
        "id": id,
        "name": name,
        "age": age,
        "sex": sex,
      };
}

组件封装

import 'dart:async';
import 'dart:io';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'client.dart';
import 'package:sqflite/sqflite.dart';

//数据库操作封装类
class DBProvider {
  DBProvider._();

  static final DBProvider db = DBProvider._();

  Database _database;

  //获取Database对象
  Future<Database> get database async {
    //使用单例模式创建Database对象
    if (_database != null) {
      return _database;
    }
    _database = await initDB();
    return _database;
  }

  //初始化数据库
  initDB() async {
    //获取文档目录对象
    Directory documentsDirectory = await getApplicationDocumentsDirectory();
    //获取默认数据库位置(在Android上，它通常是data/data/<package_name>/databases,在iOS上，它是Documents目录)
    String path = join(documentsDirectory.path, "client.db");
    //打开数据库 传入路径 版本号 打开完成回调函数
    return await openDatabase(path, version: 1, onOpen: (db) {},
        onCreate: (Database db, int version) async {
          //数据库创建完成后创建Client表
          await db.execute("CREATE TABLE Client ("
              "id INTEGER PRIMARY KEY,"
              "name TEXT,"
              "age INTEGER,"
              "sex BIT"
              ")");
    });
  }

  //新增Client
  insertClient(Client newClient) async {
    final db = await database;
    //获取表中最大的id再加1作为新的id
    var table = await db.rawQuery("SELECT MAX(id)+1 as id FROM Client");
    int id = table.first["id"];
    //向表中插入一条数据
    var raw = await db.rawInsert(
        "INSERT Into Client (id,name,age,sex)"
        " VALUES (?,?,?,?)",
        [id, newClient.name, newClient.age, newClient.sex]);
    return raw;
  }

  //修改性别
  updateSex(Client client) async {
    final db = await database;
    Client newClient = Client(
        id: client.id,
        name: client.name,
        age: client.age,
        sex: !client.sex);
    //更新当前Client的性别
    var res = await db.update("Client", newClient.toMap(),
        where: "id = ?", whereArgs: [client.id]);
    return res;
  }

  //更新Client
  updateClient(Client newClient) async {
    final db = await database;
    var res = await db.update("Client", newClient.toMap(),
        where: "id = ?", whereArgs: [newClient.id]);
    return res;
  }

  //根据id获取Client
  getClient(int id) async {
    final db = await database;
    //根据id查询表记录
    var res = await db.query("Client", where: "id = ?", whereArgs: [id]);
    //将查询返回的数据转换为Client对象并返回
    return res.isNotEmpty ? Client.fromMap(res.first) : null;
  }

  //获取所有Client
  Future<List<Client>> getAllClients() async {
    final db = await database;
    var res = await db.query("Client");
    List<Client> list = res.isNotEmpty ? res.map((c) => Client.fromMap(c)).toList() : [];
    return list;
  }

  //根据id删除Client
  deleteClient(int id) async {
    final db = await database;
    return db.delete("Client", where: "id = ?", whereArgs: [id]);
  }

  //删除所有Client
  deleteAll() async {
    final db = await database;
    db.rawDelete("Delete * from Client");
  }
}

组件使用

// 获取所有数据
DBProvider.db.getAllClients(),
//根据id删除Client对象
DBProvider.db.deleteClient(item.id);
//更新性别
DBProvider.db.updateSex(item);
//随机取测试数据中的一条数据作为Client对象
Client rnd = clients[math.Random().nextInt(clients.length)];
//新增加一个Client对象
await DBProvider.db.insertClient(rnd);

作者：StevenHu_Sir
链接：https://www.jianshu.com/p/286c8beacb11
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

barnett_y

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Flutter 知识点汇总

1.主题色主题色设置class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo',//针对Andr.
复制链接

扫一扫