This paper mainly introduces some practical techniques in Flutter development.

Tip 1: Flutter packages get fails

Waiting foranother flutter command to release the startup lock may be displayed when a project is performing a flutter packages get operation.

Because the Flutter command needs to wait for another task to complete. If the Flutter is stuck for a long time, you can open the /bin/cache/ directory of the Flutter SDK, find the lockfile, delete it, and restart the Flutter without being prompted to interrupt.

Tip 2: Quickly create StatelessWidgets and StatefulWidgets

When writing Flutter code, entering STL in the edit box automatically brings up the template option to create a StatelessWidget.

When you enter STF, the template option to create the StatefulWidget pops up.

Tip 3: Get the status bar height and disable font scaling

Mediaquery.of (context).size. In addition, inside MediaQuery there is a parameter called MediaQueryData that holds a lot of information about the device. Padding-top represents the height of the status bar, so you can get the height of the status bar where you want it and don’t need the context:

MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top
Copy the code

If you find that some controls are arranged from the status bar during development, you can wrap a SafeArea in the outer layer. Inside the SafeArea, MediaQueryData is used to make padding for the top status bar and the bottom safe distance of models above iPhone X. The Scaffold AppBar uses SafeArea internally by default.

MediaQueryData can also handle font scaling. TextScaleFactor in MediaQueryData represents the scaling information for the system font, and the default size varies with the system.

If you don’t want your app to scale with the system font, you can set the nested Settings under the desired page, setting textScaleFactor to 1 to disable font scaling within your app:

MediaQuery(
      data: MediaQueryData.fromWindow(WidgetsBinding.instance.window)
          .copyWith(textScaleFactor: 1),
      child: new Container(),
    );
Copy the code

Tip 4: Implement asynchronous page loading

Flutter can be easily loaded asynchronously via FutureBuilder or StreamBuilder.

FutureBuilder and StreamBuilder implement page layout by retrieving data from Future and Stream. The following code looks like this:

import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  const Test({Key key}) : super(key: key);

  Future<String> mockNetworkData() async {
    await Future.delayed(Duration(seconds: 3));
    return "success";
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Scaffold(
        body: Center(
          child: FutureBuilder<String>(
            future: mockNetworkData(),
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
              // Return different pages based on the results
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                  return Text('start... ');
                case ConnectionState.active:
                case ConnectionState.waiting:
                  return SizedBox(
                    width: 60,
                    height: 60,
                    child: CircularProgressIndicator(
                        valueColor:
                        new AlwaysStoppedAnimation(Color(0xff000000))));case ConnectionState.done:
                  if (snapshot.hasError)
                    return Text('Error: ${snapshot.error}');
                  return Text('Result: ${snapshot.data}');
              }
              return null; // unreachable},),),),); }}Copy the code

Tip 5: Upgrade or downgrade to a given version of the Flutter SDK

Upgrade the Flutter version

flutter upgrade
Copy the code

Upgrade to a specified version

Flutter upgrade v1.20.0-7.0. The preCopy the code

Downgrade to the specified version (you need to enter the flutter root directory and run git)

git reset --hard f139b11009aeb8ed2a3a3aa8b0066e482709dde3
Copy the code

Command of the hard code code for the current version submitted, such as 8 af6b2f038c1172e61d418869363a28dffec3cb4

List of Flutter Tags: Tags