Open source address

This blog post is not about the science of Ethereum knowledge, but about the small details I encountered while developing my wallet with Flutter. If you have developed the wallet, you can take it to use directly, without authorization.

Github repository address

The wallet ability

  • A new purse
  • Import/export a wallet
  • Add a Token
  • transfer
  • exchange

demo

Reference font icon

www.jianshu.com/p/960ee951a…

New Icon(IconData(0xe648, fontFamily: 'Iconfont '), size: 50.0, color: color.black26)Copy the code

Flutter built-in icon online preview

IO /resources/ I… (Ladder required)

The widget gap

As the picture shows, there is a round containerCircleAvatar, set the background colorbackgroundColor=Colors.white.radiusSet it to half the size of the font icon. Ideally, the icon fits the container perfectly, and the icon will be offset in both real and debug mode. To fit together, change to the stack layout

CircleAvatar(backgroundColor: Colors. White, RADIUS: 25.0, Child: Icon(IconData(0xe648, fontFamily: 'iconfont'), size: 50.0, color: color.black12); // Stack(children: <Widget>[Container(width: 50.0, height: 50.0, decoration: new BoxDecoration(border: New Border. All (width: 2.4, color: color.black12), color: color.white, borderRadius: 21. New Borderradio.all (new radio.circular (25.0))),), child:Icon(IconData(0xe648, fontFamily: 'iconfont'), size: 50.0, color: color.black12),],);Copy the code

Bottom pop-up box set rounded corners

The default pop-up box of a Flutter is a rectangular border. You can set Radius on the upper left and upper right corner of the Container using decoration.

Container(
      decoration: new BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(18),
          topRight: Radius.circular(18)
        ),
      ),
      child: Column(
        children: ...
      ),
)
Copy the code

Generate qr code

import 'package:qr_flutter/qr_flutter.dart'; QrImage(data: <your data>, size: 100.0,) QrImage(data: <your data>, size: 100.0,)Copy the code

Customize icon to open Draw

leading: Builder(
    builder: (context) => GestureDetector(
          child: new Icon(icon.menu)
          ),
          onTap: () => Scaffold.of(context).openDrawer(),
        ),
Copy the code

Access the Bugly monitor

Import 'package:flutter_bugly/flutter_bugly.dart'; // Step 2: The outermost layers in the main function enable the SDK void main () = > FlutterBugly. PostCatchedException (() is async {WidgetsFlutterBinding. The ensureInitialized (); runApp(MyApp()); });Copy the code

Immersive status bar

// import 'dart: IO '; import 'package:flutter/services.dart'; ... runApp (MyApp ()); If (platform.isAndroid) {// The following two lines set the Android status bar to transparent immersion. Written after component rendering to override the status bar for set assignment after rendering. Written before rendering, the MaterialApp component overwrites this value. SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); }Copy the code

Concurrent requests

In a Web development environment, it is common to encounter a callback that requires multiple interfaces to be requested at the same time, and then proceed to the next step after all the interfaces return data. The Web side can easily implement this requirement using promise.all, so how do you implement concurrent requests in the context of DART? The answer is future. wait, Dart’s Future is very powerful and there are many more ways to explore

demo1(){
    return true;
}
demo2(){
    return true;
}
Future.wait([
    demo1,
    demo2
]).then((list) {
   print(list); // [true, true]
}).catchError((e) {
   print(e);
}).whenComplete(() {
   print("whenComplete");
});
Copy the code

Delay request

You can use future.delayed, where the argument is how long the execution should be delayed, in milliseconds

Future.delayed(Duration(seconds: 1), () => {
   demo2;
});
Copy the code

Page loading status

In real project development, loading effect is a page transition state that must be used. During Web development, the front-end prepares the loading state. When the interface returns data, the loading state is set to false. This effect can be easily achieved using FutureBuilder in Flutter

New Scaffold(body: FutureBuilder(/*getData is the asynchronous data interface */ Future: getData(), Builder: (BuildContext context, AsyncSnapshot<Map> snapshot) {/* Indicates that data is successfully returned */ if (snapshot.hasdata) {Map response = snapshot.data; return buildPage(response); } else { return LoadingDialog(); }}));Copy the code

Some common exceptions

Waiting for another flutter command to release the startup lock…

Go to the local Flutter installation directory, find the lockfile under \bin\cache and delete the file

reference

  • pub.flutter-io.cn/
  • book.flutterchina.club/
  • dartpad.dartlang.org/
  • Github.com/wanglu1209/…
  • Pub. Flutter – IO. Cn/packages/qr…