开源地址
这篇博客不波及以太坊常识的科普，单纯记录了我在用Flutter开发钱包的过程中遇到的各种小细节问题。如果有开发钱包的各位同学，能够拿去间接用，不须要受权。
github仓库地址
钱包能力
- 新建钱包
- 导入/导出钱包
- 增加Token
- 转账
- 兑换
演示
援用字体图标
在Flutter中援用iconFont上的字体图标非常简单，从iconfont网站上下载.ttf后缀的文件。放到APP的某个目录下，比如说 fonts 文件夹下:
project/ lib/ ... fonts/ iconfont.ttf pubspec.yaml 而后在 pubspec.yaml 中配置fonts:
fonts: - family: iconfont fonts: - asset: fonts/iconfont.ttf最初就能够在iconData中间接应用字体图标了
new Icon( IconData(0xe648, fontFamily: 'iconfont'), size: 50.0, color: Colors.black26)Flutter内置icon在线预览
在线预览： https://material.io/resources... (须要梯子)
widget缝隙
如图所示，有一个圆形容器CircleAvatar，设置背景色backgroundColor=Colors.white，radius设置为字体图标size尺寸的一半，现实状况下图标和容器完满贴合，在真机和debug模式下图标都会呈现下偏移。为了贴合在一起，更改为stack布局
// 更改前CircleAvatar( backgroundColor: Colors.white, radius: 25.0, child: Icon( IconData(0xe648, fontFamily: 'iconfont'), size: 50.0, color: Colors.black12 ));// 更改后Stack( children: <Widget>[ Container( width: 50.0, height: 50.0, decoration: new BoxDecoration( border: new Border.all(width: 2.4, color: Colors.black12), color: Colors.white, borderRadius: new BorderRadius.all(new Radius.circular(25.0)) ), ), Positioned( child:Icon(IconData(0xe648, fontFamily: 'iconfont'), size: 50.0, color: Colors.black12) ), ], );底部弹出框设置圆角
Flutter默认的弹出框是直角边框，能够利用decoration,将Container左上角和右上角设置Radius。
Container( decoration: new BoxDecoration( borderRadius: BorderRadius.only( topLeft: Radius.circular(18), topRight: Radius.circular(18) ), ), child: Column( children: ... ),)生成二维码
import 'package:qr_flutter/qr_flutter.dart';// 生成自定义二维码比较简单// 引入qr_flutter包，传递data和size即可管制二维码的内容和尺寸QrImage( data: <your data>, size: 100.0,),自定义icon关上draw
leading: Builder( builder: (context) => GestureDetector( child: new Icon(icon.menu) ), onTap: () => Scaffold.of(context).openDrawer(), ),接入bugly监控
// 第一步：导入包import 'package:flutter_bugly/flutter_bugly.dart';// 第二步：在main函数最外层启用SDKvoid main() => FlutterBugly.postCatchedException(() async { WidgetsFlutterBinding.ensureInitialized(); runApp(MyApp());});沉迷式状态栏
// 导包：import 'dart:io';import 'package:flutter/services.dart';··· runApp(MyApp()); if (Platform.isAndroid) { // 以下两行 设置android状态栏为通明的沉迷。写在组件渲染之后，是为了在渲染后进行set赋值，笼罩状态栏，写在渲染之前MaterialApp组件会笼罩掉这个值。 SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);}并发申请
在web开发环境中，常常会遇到须要同时申请多个接口，等所有接口都返回数据后进入下一步的回调。web端能够不便的应用Promise.all来实现这个需要，那么在dart的语境中，该如何实现并发申请呢？答案就是Future.wait, dart的Future十分弱小，还有更多办法期待摸索
demo1(){ return true;}demo2(){ return true;}Future.wait([ demo1, demo2]).then((list) { print(list); // [true, true]}).catchError((e) { print(e);}).whenComplete(() { print("whenComplete");});提早申请
这里能够应用Future.delayed，参数就是须要提早执行的工夫，提早的工夫以毫秒为单位
Future.delayed(Duration(seconds: 1), () => { demo2;});页面加载中状态
实在我的项目开发中，loading成果是肯定会用到的页面过渡状态。web开发的时候，前端会先筹备好loading状态，当接口返回数据后，再把loading设置为false。在Flutter中，能够很不便的应用FutureBuilder实现这个成果
new Scaffold( body: FutureBuilder( /*getData是异步数据接口*/ future: getData(), builder: (BuildContext context, AsyncSnapshot<Map> snapshot) { /*示意数据胜利返回*/ if (snapshot.hasData) { Map response = snapshot.data; return buildPage(response); } else { return LoadingDialog(); } },));一些常见异样
Waiting for another flutter command to release the startup lock...
进入本地Flutter的装置目录，找到\\bin\\cache上面的lockfile文件，删除该文件
参考
- https://pub.flutter-io.cn/
- https://book.flutterchina.club/
- https://dartpad.dartlang.org/
- https://github.com/wanglu1209...
- https://pub.flutter-io.cn/pac...