关于前端:前端工程师的以太坊入门基于Flutter开发以太坊钱包APP

开源地址

这篇博客不波及以太坊常识的科普，单纯记录了我在用 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 函数最外层启用 SDK
void 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…