As the eighth in a series of articles, this article focuses on practical techniques for Flutter development to help you avoid missteps and pitfalls. The whole article is a dry summary of Flutter development. It is mainly practical, and can be considered as a practical chapter in the process of deepening the principle of Flutter.

Article summary address:

A complete series of articles on Flutter

A series of articles on the world outside Flutter

1, Text textoverflow. ellipsis does not take effect

Sometimes we set Ellipsis for Text only to find that it does not work and instead an overtext-learning warning appears on the left side of the image below.

DidOverflowWidth = size.width < textsize. width; Width and textSize. Width are equal.

So you need to set a Container or something like that to constrain the size of your Text, or expand + Container on the Row to constrain the size of your Text. If you don’t know how big it should be, you can set it with LayoutBuilder.

2. Get the size and position of the control

For those of you who saw Article 6, we can use GlobalKey to get the BuildContext of the control object, and we said that the BuildContext implementation is Element, Element holds the RenderObject. So, we know the RenderObject, but we actually get the RenderBox, So we only get the size and position of the RenderBox:

  showSizes() {
    RenderBox renderBoxRed = fileListKey.currentContext.findRenderObject();
    print(renderBoxRed.size);
  }

  showPositions() {
    RenderBox renderBoxRed = fileListKey.currentContext.findRenderObject();
    print(renderBoxRed.localToGlobal(Offset.zero));
  }
Copy the code

3. Get the status bar height and security layout

If you look at the source code for The MaterialApp, you should see that inside it is a WidgetsApp, and within that WidgetsApp is a MediaQuery, Those familiar with it know that we can get the screen size by calling mediaQuery.of (context).size.

In fact, MediaQuery is an InheritedWidget, which has an InheritedWidget called MediaQueryData. This parameter is set by using the following figure and the source code. In general, the top of the MediaQueryData padding is the height of the status bar.

So we can pass MediaQueryData. FromWindow (WidgetsBinding. Instance. Windows). The padding. The top access to the status bar height, of course, sometimes may need to consider viewInsets parameters.

The default is sie.fromheight (kToolbarHeight + (bottom?.preferredsize?.height?? 0.0)), kToolbarHeight is a fixed value, Of course, you can customize the AppBar by implementing PreferredSizeWidget.

At the same time, you may find that sometimes the layout position is not normal, actually from the status bar calculation, when you need to use SafeArea nesting, as for why, look at the source code you will find the existence of MediaQueryData.

4. Set the status bar color and icon color

You can simply set the status bar color with the AppBar’s Brightness or ThemeData.

But if you don’t want to use AppBar, you can set the status bar styles by nested AnnotatedRegion

, which quickly sets the status bar and the bottom navigation bar styles.

At the same time. You can also through the SystemChrome setSystemUIOverlayStyle to set, if you didn’t use AppBar. Note that all status bar Settings are global. If you do not manually set or use AppBar on page B after setting status bar Settings on page A, the Settings will be displayed directly on page B.

5. System font scaling

Nowadays, mobile phones generally provide font scaling, which takes some work to adapt to the application development, so most of the time we choose to disable the application to follow the system font scaling.

Font scaling in Flutter is also related to the textScaleFactor of MediaQueryData. So we can set the font to default to not allow scaling by nesting the following code Settings in the outermost layer on the desired page.

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

Margin and Padding

Margin and padding are often used when using A Container. As we explained in the previous article, a Container encapsulates various layouts. Margin and padding are actually implemented using padding, and padding does not support negative numbers, so Transform is recommended if you need to use negative numbers.

  Transform(
      transform: Matrix4.translationValues(10, -10, 0),
      child: new Container(),
    );
Copy the code

7, control rounded corner cutting

In daily development, we generally use two rounded corners:

  • One is throughDecorationThe implementation of the classBoxDecorationTo achieve them.
  • One is throughClipRRectTo achieve them.

BoxDecoration is usually applied in DecoratedBox, Container and other controls. This implementation is generally implemented when drawing directly on Canvas, and the background is rounded for the current control without affecting its child. This means that if your Child is an image or also has a background color, the rounded corners will probably disappear.

The ClipRRect effect affects the Child, as shown in RenderObject.

8 PageView.

If you are using TarBarView and use KeepAlive, I recommend using PageView directly. As of the current version 1.2, in KeepAlive state, the TarBarView will cause the page’s dispose to re-initstate. Although TarBarView is also wrapped in PageView + TabBar.

JumpTo (mediaQuery.of (context).size. Width * index); Some problems can be avoided. Of course, the loss is animation. In fact TarBarView is just a wrapper around PageView + TabBar.

In addition to this, there is actually a second way to use the following PageStorageKey to keep the page number state, but because it is save and restore values, the dispose of the page and initState method will be called each time.

    return new Scaffold(
      key: new PageStorageKey<your value type>(your value)
    )
Copy the code

Lazy loading

Flutter can be easily loaded lazily with FutureBuilder or StreamBuilder. Data can be “asynchronously” retrieved from future or stream, and then loaded with data from AsyncSnapshot. As for the concepts of flow and asynchrony, I’ll expand on that later.

10. The Android Back button returns to the desktop

The purpose of the Flutter plugin is android_intent. In this case, the implementation can be as simple as the following:

  Future<bool> _dialogExitApp(BuildContext context) async {
    if (Platform.isAndroid) {
      AndroidIntent intent = AndroidIntent(
        action: 'android.intent.action.MAIN',
        category: "android.intent.category.HOME",); await intent.launch(); }return Future.value(false); }...return WillPopScope(
      onWillPop: () {
        return _dialogExitApp(context);
      },
      child:xxx);
Copy the code

Since then, chapter 8 has finally ended! (/ / / del / / /)

Resources to recommend

  • Making: github.com/CarGuo/
  • Open Source Flutter complete project:Github.com/CarGuo/GSYG…
  • Open Source Flutter Multi-case learning project:Github.com/CarGuo/GSYF…
  • Open Source Fluttre Combat Ebook Project:Github.com/CarGuo/GSYF…
Full open source project recommendation:
  • GSYGithubApp Flutter
  • GSYGithubApp React Native
  • GSYGithubAppWeex