flutter的一些tips

作者: smallLabel | 来源:发表于2019-11-15 10:07 被阅读0次

Flutter优化相关
flutter的一些tips
VSCode搭建Flutter开发环境 For Mac
Flutter Tips
Flutter tips
Flutter开发中的一些Tips（二）
Flutter开发中的一些Tips
关于Flutter的Tips
Flutter开发中的一些Tips（三）
Flutter Tips 01

dio忽略HTTPS

Dio dio = Dio(options);
    (dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate  = (client) {
        client.badCertificateCallback=(X509Certificate cert, String host, int port){
//          if(cert.pem==PEM){ // Verify the certificate
//            return true;
//          }
          return true;
        };
      };

dio cookie获取

// 引入 dio_cookie_manager: 1.0.0
import 'package:dio_cookie_manager/dio_cookie_manager.dart';
import 'package:cookie_jar/cookie_jar.dart';

var cookieJar = CookieJar();
dio.interceptors.add(CookieManager(cookieJar));
Response res = await dio.post(URL_Login, data: {'userid': 'liuxun2 ', 'password': rsapw, 'systemCode': 'A08'});
print(cookieJar.loadForRequest(Uri.parse(URL_Login)));

flutter用vscode时控制台日志输出不完整
不清楚什么原因，不过可以在dart Devtools上查看完整log。怎么打开dart DevTools另行百度。

1574132472220.jpg

multi_image_picker插件在iOS上的使用，版本4.5.9
问题描述：添加这个插件后莫名其妙的编译不通过了
解决方法：参考这个
因为默认工程就是用swift的，所以我仅仅只是添加权限，删除podfile.lock和pods文件夹，重新pod install，在podfile里最下面的代码添加

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['ENABLE_BITCODE'] = 'NO'
      config.build_settings['SWIFT_VERSION'] = '5.0'
    end
  end
end

可滚动页面嵌套ListView
可滚动页面CustomScrollView在嵌套其他的widget时，必须使用Sliver组件，其他的组件可以采用SliverToBoxAdapter将其包裹。以下为示例代码，数据都是写死的

Expanded(
              child:  CustomScrollView(
               slivers: <Widget>[
                 SliverToBoxAdapter(
                   child: Container(
                     color: Colors.white,
                     child: PlanDetailHeader(title: '测试巡场', time: '12:00', pinlv: '每日', type: '限时', desc: '说明', status: kNoStart,),
                   )
                 ),
                 SliverToBoxAdapter(
                   child: Container(
                     margin: EdgeInsets.symmetric(vertical: 12),
                     height: 42,
                     color: Colors.white,
                     child: InkWell(
                       onTap: (){
                         NavigatorUtils.getProblemDetailPage(context);
                       },
                       child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(left: 12),
                            child: Text('关联问题：2', style:TextStyle(color: Color(0xFF222222), fontSize: 16, fontWeight: FontWeight.bold)),
                          ),
                          Container(
                            margin: EdgeInsets.only(right: 12),
                            child: Center(child: Text('>', style: TextStyle(color: Color(0xFF222222), fontWeight: FontWeight.bold)),),
                            width: 20,
                            height: 20,
                            decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(color: Color(0xFF222222), width: 2)
                            ),
                          )
                        ],
                      ),
                     )
                   ),
                 ),
                 SliverToBoxAdapter(
                   child: Container(
                     height: 42,
                     color: Colors.white,
                     child: InkWell(
                       onTap: (){print('完成进度被点击');},
                       child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(left: 12),
                            child: Text('完成进度：1/2', style:TextStyle(color: Color(0xFF222222), fontSize: 16, fontWeight: FontWeight.bold)),
                          ),
                          Container(
                            margin: EdgeInsets.only(right: 12),
                            child: Center(child: Text('>', style: TextStyle(color: Color(0xFF222222), fontWeight: FontWeight.bold)),),
                            width: 20,
                            height: 20,
                            decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(color: Color(0xFF222222), width: 2)
                            ),
                          )
                        ],
                      ),
                     )
                   ),
                 ),
                 SliverToBoxAdapter(
                   child: Container(
                     color: Colors.white,
                     margin: EdgeInsets.only(top: 12),
                     padding: EdgeInsets.only(left: 12, top: 16, bottom: 16),
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: <Widget>[
                         Text('评论', style:TextStyle(color: Color(0xFF222222), fontSize: 16, fontWeight: FontWeight.bold)),
                         Divider(
                           height: 2,
                           color: Color(0xFFF7F7F7),
                         )
                       ],
                     )
                   ),
                 ),
                 // 评论列表
                SliverList(
                  delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
                      return Container(
                        height: 60,
                        color: Colors.white,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text('测试数据'),
                            Divider()
                          ],
                        ),
                        padding: EdgeInsets.only(left: 12),
                      );
                  },
                  childCount: 30
                  ),
                )
               ],
             ),
            ),

效果图如下：

带有头部的列表

scrollview嵌套ListView自动撑开，解决ListView因为没有设置高度的报错问题
Vertical viewport was given unbounded height.
解决办法：设置ListView的shrinkWrap为true,同时设置physics属性为ScrollPhysics()
示例代码如下：

import 'package:flutter/material.dart';
import 'package:multi_image_picker/multi_image_picker.dart';
import '../../utils/color_util.dart';
import '../../utils/const_value.dart';

class ProblemDetailPage extends StatefulWidget {
  ProblemDetailPage({Key key}) : super(key: key);

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

class _ProblemDetailPageState extends State<ProblemDetailPage> {

List<Widget> _bottomButton(String status) {
    // 根据计划状态设置底部按钮内容
    List<String> buttonContents;
    List<Color> colors = [Color(0xFF74CCA0), Color(0xFF10B2A3), Color(0xFF2D63DD),];
    if (status == kUnconfirm) {
      buttonContents = ['添加评论','位置查看', '确认接收'];
    } else if (status == kResilving) {
      buttonContents = ['添加评论','位置查看'];
    } else if (status == kResolved) {
      buttonContents = ['添加评论', '位置查看'];
    } 
    List<Widget> _buttons = [];
    for (var i = 0; i < buttonContents.length; i++) {
      String content = buttonContents[i];
      Color color = colors[i];
      Expanded expand = Expanded(
          flex: 1,
          child: InkWell(
          child: Container(
            child: Center( 
              child: Text(content, style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),)
            ),
            color: color,
            padding: EdgeInsets.symmetric(vertical: 12),
          ),
          onTap: (){print('按钮被按下');},
          borderRadius: BorderRadius.all(Radius.circular(0)),
        )
      );
      
      _buttons.add(expand);
    }
  
    return _buttons;
  }
  List<Asset> images = [];
  Widget _buildGridView() {
   
   
    GridView gridview = GridView.count(
      shrinkWrap: true,
      padding: EdgeInsets.symmetric(horizontal: 12),
      crossAxisCount: 3,
      crossAxisSpacing: 12,
      mainAxisSpacing: 12,
      physics: ScrollPhysics(),
      children: List.generate(images.length + 1 , (int index) {
        if (index != images.length) {
          Asset asset = images[index];
          return Stack(
            alignment: Alignment.center,
            children: <Widget>[
                  ClipRRect(
                  child: AssetThumb(
                  width: 109,
                  height: 109,
                  asset: asset,
                ),
                borderRadius: BorderRadius.circular(8),
              ),
              Positioned(
                right: 12,
                top: 12,
                child: InkWell(
                  onTap: (){
                    setState(() {
                      images.removeAt(index);
                    });
                  },
                  child: Container(
                    padding: EdgeInsets.all(0),
                    child: Center(child: Text('X', style: TextStyle(color: Colors.white),),),
                    width: 16,
                    height: 16,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      color: Color(0xab000000)
                    ),
                  ),
                )
              )
            ],
          );
        } else {
          Widget container = InkWell(
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                border: Border.all(
                  color: Color(0xFF9EA3B7),
                  width: 0.5
                )
              ),
              height: 109,
              width: 109,
              child: Center(
                child: Image.asset('assets/xiangji.png'),
              ),
            ),
            onTap: getImages,
          );
          return container;
        }
      }),
    );
    return gridview;
  }
  // 获取图片
  Future<void> getImages() async {
    List<Asset> result = [];
    String error = 'no error';

    try {
      result = await MultiImagePicker.pickImages(
        maxImages: 5,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: 'chat'),
        materialOptions: MaterialOptions(
          actionBarColor: '#abcdef',
          actionBarTitle: '照片',
          allViewTitle: 'all photos',
          useDetailsView: false,
          selectCircleStrokeColor: '#000000'
        )
      );

      for (var r in result) {
        var t = await r.filePath;
        print(t);
      }

    } on Exception catch(e) {
      error = e.toString();
    }
    setState(() {
      for (Asset asset in result) {
        images.insert(0, asset);
      }
    });

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('问题详情'),
      ),
      body: Container(
        color: ColorUtil.backgroundColor,
        child: SafeArea(
          child: Column(
            children: <Widget>[
              Expanded(
                child: CustomScrollView(
                  slivers: <Widget>[
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.white,
                        child: ProblemDetailHeader(),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        margin: EdgeInsets.only(top: 12),
                        color: Colors.white,
                        padding: EdgeInsets.all(12),
                        child: Column(
                          children: <Widget>[
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Text('总经办巡场计划', style: TextStyle(color: Color(0xFF222222), fontSize: 16, fontWeight: FontWeight.bold),),
                                Container(
                                  margin: EdgeInsets.only(right: 12),
                                  child: Center(child: Text('>', style: TextStyle(color: Color(0xFF222222), fontWeight: FontWeight.bold)),),
                                  width: 20,
                                  height: 20,
                                  decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  border: Border.all(color: Color(0xFF222222), width: 2)
                                  ),
                                )
                              ],
                            ),
                            Container(
                              margin: EdgeInsets.symmetric(vertical: 12),
                              height: 2,
                              color: ColorUtil.dividerColor,
                            ),
                            Container(
                              margin: EdgeInsets.only(bottom: 7),
                              child: Align(
                                alignment: Alignment.centerLeft,
                                child: Text('外广场', style: TextStyle(color: Color(0xFF333333), fontSize: 12, )),
                              )
                            ),
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Text('检查项检查项检查项检查项检查项检查项检查项检查项检查项检查项检', style: TextStyle(color: Color(0xFF666666), fontSize: 12)),
                            )
                          ],
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        margin: EdgeInsets.only(top: 12),
                        color: Colors.white,
                        padding: EdgeInsets.all(12),
                        child: Column(
                          children: <Widget>[
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Text('总经办巡场计划', style: TextStyle(color: Color(0xFF222222), fontSize: 16, fontWeight: FontWeight.bold),),
                            ),
                            Container(
                              margin: EdgeInsets.symmetric(vertical: 12),
                              height: 2,
                              color: ColorUtil.dividerColor,
                            ),
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Text('检查项检查项检查项检查项检查项检查项检查项检查项检查miaoshu sdhkfjhsakjhfksahdfkasjhfkasjhfkasjghkdjhgksje项检查项检', style: TextStyle(color: Color(0xFF666666), fontSize: 12)),
                            )
                          ],
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.white,
                        margin: EdgeInsets.only(top: 12),
                        child: Column(
                           children: <Widget>[
                             Container(
                              margin: EdgeInsets.only(bottom: 12, left: 12, top: 12),
                              child: Align(
                                alignment: Alignment.centerLeft,
                                child: Text('问题描述', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                              )
                            ),

                           Container(
                             child: _buildGridView(),
                           )
                            
                           ],
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        margin: EdgeInsets.only(top: 12),
                        padding: EdgeInsets.only(left: 12, right: 12),
                        color: Colors.white,
                        child: Column(
                          children: <Widget>[
                            Align(
                              alignment: Alignment.centerLeft,
                              child: Text('评论', style: TextStyle(color: Color(0xFF222222), fontSize: 16, fontWeight: FontWeight.bold)),
                            ),
                            Divider(),
                            ListView.builder(
                              physics: ScrollPhysics(),
                              itemBuilder: (BuildContext context, int index) {
                                return Container(
                                          height: 50,
                                          color: Colors.white,
                                          child: Center(child:Text('测试数据', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),),
                                        );
                              },
                              itemCount: 30,
                              shrinkWrap: true,
                            ),
                            
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                height: 49,
                child: Flex(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Expanded(
                      child: Row(
                        children: _bottomButton(kUnconfirm),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
      ),
      )
    );
  }
}


// 问题详情头部
class ProblemDetailHeader extends StatefulWidget {
  ProblemDetailHeader({Key key}) : super(key: key);

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

class _ProblemDetailHeaderState extends State<ProblemDetailHeader> {
  @override
  Widget build(BuildContext context) {
    return Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(left: 12, top: 12, right: 12),
            width: MediaQuery.of(context).size.width,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text('店铺商品摆放凌乱', style: TextStyle(fontSize: 16, color: Color(0xFF333333), fontWeight: FontWeight.bold)),
                Text('未确认', style: TextStyle(fontSize: 12, color: Color(0xFF2D63DD), fontWeight: FontWeight.bold),)
              ],
            ),
          ),
          Container(
            height: 2,
            margin: EdgeInsets.only(left: 12, top: 12, right: 12),
            color: ColorUtil.dividerColor,
          ),// 分割线
          Column(
            children: <Widget>[
              Align(
                alignment: Alignment.centerLeft,
                child: Container(
                  margin: EdgeInsets.only(left: 12, top: 12, right: 12),
                  child: Text('问题类型：一般问题', style: TextStyle(color: ColorUtil.textGrayColor, fontSize: 12),),
                ),
              ),
              Align(
                alignment: Alignment.centerLeft,
                child: Container(
                  margin: EdgeInsets.only(left: 12, top: 12, right: 12, bottom: 12),
                  child: Text('提报时间：12：00', style: TextStyle(color: ColorUtil.textGrayColor, fontSize: 12),),
                )
              )
            ],
          ),
        ],
      );
  }
}

代码中使用了图片多选框架multi_image_picker: ^4.5.9。

原生iOS集成flutter ，我的flutter版本是1.9.1+hotfix.6, xcode 11.1
最好参考官方集成说明，因为不同的版本集成步骤可能有些微差别，我也是先搜索网上，发现版本有点旧，所以直接照着官方说明操作。
基础步骤没有太大差别，以下简要说明下，以官方为准。

安装cocoapods,这个请自行百度
关闭bitcode
在终端cd到你的iOS程序同级目录下，执行命令flutter create -t module my_flutter(my_flutter为新建的flutter工程名字，随意取)，执行完成后可在目录下看到my_flutter文件夹，如图
my_flutter
在Podfile中添加以下代码

  flutter_application_path = 'path/to/my_flutter/'    
  load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

flutter_application_path就是你新建的my_flutter的路径
在target中添加

  target 'MyApp' do
    install_all_flutter_pods(flutter_application_path)
  end
  target 'MyAppTests' do
    install_all_flutter_pods(flutter_application_path)
  end

执行pod install命令

vscode中flutter代码格式化方法
mac下快捷键shift+option+f
windows下快捷键shift+alt+f

Flutter优化相关
Flutter之禅内存优化篇Flutter ImageCacheFlutter 性能优化 Tips
flutter的一些tips
dio忽略HTTPS dio cookie获取 flutter用vscode时控制台日志输出不完整不清楚什么原因...
VSCode搭建Flutter开发环境 For Mac
Tips: Flutter 相关内容将在稀土掘金中持续更新... VSCode搭建Flutter开发环境 For ...
Flutter Tips
如何全局修改App字体大小？修改MediaQuery里面的textScaleFactor属性，以新的MediaQu...
Flutter tips
flutter禁用滚动事件Flutter进阶：深入探究 ListView 和 ScrollPhysicsFlutt...
Flutter开发中的一些Tips（二）
接着上篇 Flutter开发中的一些Tips，今天再分享一些我遇到的问题，这篇较上一篇，细节方面更多，希望“引以为...
Flutter开发中的一些Tips
学习Flutter也有一阵子了。闲着没事，用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了，所以都...
关于Flutter的Tips
占用大量空间的Widget，必须包装在Expanded widget中。一旦拆分好布局，最简单的就是采取自下而上...
Flutter开发中的一些Tips（三）
距离flutter_deer开源快3个月了，目前为止收获了1600+的Star，感谢大家的对此项目的认可支持。不过...
Flutter Tips 01
1 AppBar 1.1 被限制了宽度的leading属性在官方的这个图中，leading是被限制了宽度，且是个...