Two and a half months of spare time to build an app-tech paper with Flutter

Technical Background: I have been working on the front-end of Flutter for several years. I will write this article as a technical summary of this period, and record some problems and experiences that are difficult to solve in the process of Flutter development. Meanwhile, I hope that students who are interested in Flutter but still watching Flutter can join the development of Flutter, so that they can easily get started

Learning materials

Learn a lot about Flutter from this ebook. Thanks to the author

Some of the summary

1. Route redirection

1. Register the route main.dart

MaterialApp(
  routes:{
    'my_page': (context) => MyPage(), ... })Copy the code

2. Dart

  FlatButton(
    onPressed: () {
      // Arguments can be passed
      Navigator.pushNamed(context, 'my_page', arguments: {'data': data}); })Copy the code

2. Circulation widget

Row(children: strings.map((item) => Text(item)).toList());

3. Set width and height

The width, height and color of HTML tags can be customized in the front-end development, but only a few widgets can be used in the Flutter.

// You can set width, height and color
Container(
  / / the full screen
  width: MediaQuery.of(context).size.width,
  height: 200,
  color: Colors.blue
)
// The width and height can be set
SizedBox(
  width: 200,
  height: 200
)
Copy the code

• If you want to size the button, you can control the size by wrapping a Container around it:

Container(
  width: 80,
  height: 30,
  child: FlatButton()
)
Copy the code

• You can also useButtonThemeTo change the button size:

ButtonTheme(
  minWidth: 65.0,
  height: 24.0,
  child: OutlineButton()
)
Copy the code

• The picture can be set width and height by itself

4. Differentiate your environment

Dart and main.dart startup files are divided into main_local,main_dev.dart and main.dart startup files according to the environment

• Android Studio sets up the operating environment, which can be switched quickly

• Vscode setlaunch.jsonOf the file"program": "lib/main.dart"For a different startup file

The problem is that any changes involving Main.dart require three files to be changed

5. Components that flutter encapsulates

Flutter encapsulates components that allow developers to focus on business, such as TabBar, DatePicker, etc

6. Dio Add configuration information

Token, version number, the IP information needed by the app to the server, not every request access to this information, it is can be unified set a dao_basis. Dart

Dio dio = Dio().. interceptors.add(InterceptorsWrapper(// Request processing
  onRequest: (RequestOptions options) async {
    String _platform = 'android';
    String_version = packageInfo.version; options.headers.. addAll({'platform': _platform,
      'version': _version,
    })
  }
  // The corresponding processing
  onResponse: (Response options) async {
    // Processing of the response status code such as 401
    if (options.data['code'] = =401) {... }}// Error handlingonError: (DioError err) { ... }))Copy the code

user_dao.dart

// Import 'dao_basis.dart' from the previous file; Response res = await dio.get('xxx);Copy the code

7. Ios Certificate Configuration Guide

Aurora push document, more detailed and new than Tencent carrier pigeon

Strange question

1. Error connecting to the service protocol: HttpException Accidentally reconnecting to your phone is all you need to do, but that’s not always the case these days, though not often.

2. Check failed: vm. Must be able to initialize the VM. The vm Must be able to initialize the VM

3. Android doesn’t work on the real machine. First run the Android emulator, then run the real machine

4. MissingPluginException(No implementation found for method startWork on channel XXX) MissingPluginException(No implementation found for Method startWork on channel XXX

Third-party packages used

List the third party packages used (dio, Flutter_swiper, etc.), so you don’t have to look for them

Popup window

Fluttertoast is very convenient to use without passing the context. Cancel () not work (issue fluttertoast.cancel () not work

loading

Modal_progress_hud Indicates the loading state of a network request

Network image processing

Caching network images with loading placeholder cacheD_network_image

The drop-down refresh

Pull down refresh and pull up load flutter_easyrefresh

The app is called Xiaoyu Gan and its main function is to provide door-to-door cat feeding service. Welcome to download and use it

Two and a half months of spare time made a Flutter app – project and year-end summary | Denver annual essay