This article is reprinted from the introduction of common Widgets for aTaller Flutter

Level: ★☆☆ Label: “Flutter commonly used widgets” “SafeArea” “Expanded” “Wrap” “FutureBuilder” author: ITWYW Review: aTaller team

preface

I recently read the Flutter Widget of the Week! And landed the code FlutterLearningRecord. In this article, I share a few usage scenarios and how to use widgets. In this article, the following widgets are introduced: SafeArea, Expanded, Wrap, AnimatedContainer, Opacity, FutureBuilder, and FloatingActionButton in the bottom AppBar.

I’ll start by showing you some of the widgets I’ve made so far.

Common Widget Demo effects

The common Widget Demo above, The usage scenarios and effects of SafeArea, Expanded, Wrap, AnimatedContainer, Opacity, FutureBuilder, and FloationgActionButton in the bottom AppBar are displayed.

Widget Usage scenarios
SafeArea Equipment for curtain and chin
Expanded Open up the remaining space after the child widgets in Row and Column are laid out
Wrap Used to wrap scenarios where a child Widget might cross screen boundaries so that the child Widget can be wrapped
AnimatedContainer Use to animate child widgets
Opacity Used to do opacity on child widgets
AnimatedOpacity Use to animate the child Widget’s opacity changes
FutureBuilder It is used for time-consuming tasks and returns the requested data after the time-consuming tasks are completed
FloationActionButton You can center it at the bottom of the BottomAppBar, which is suitable for Posting video articles to some extent, or you can float it in other places on the screen

Here’s a quick overview of how to use the above widgets.

Common ways to use widgets

1. SafeArea

1.1 Without SafeArea Schematic Diagram

1.2 Schematic diagram with SafeArea

Use SafeArea as the child Widget of the Body, and the original child Widget as the child Widget of SafeAreade;

1.3 SafeArea Example code
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: <Widget>[
            _randomColorContainer(),
          ],
        ),
      ),
    );
  }
Copy the code

####2. Expanded

2.1 Expanded (yellow part Widget) accounted for 2:1 of the remaining space

Expanded will obviously lay out other widgets of the same class, and then expand will take up the remaining space.

Expanded’s Flex parameter, used to specify the proportion of empty space to be occupied when there are more than one Expanded.

2.2 Expaned Example code
Row _expandedRow3() {
    return Row(
      children: <Widget>[
        Text(
          '3.LeftText',
          style: TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
        ),
        Expanded(
            flex: 2,
            child: Container(
              height: 20.0,
              color: Colors.yellow,
            )),
        Container(
          color: Colors.blue,
          width: 100.0./ / width: 10.0.
          height: 50.0,
          child: Text(
            'C',
            style:
                TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
          ),
        ),
        Expanded(
            flex: 1,
            child: Container(
              height: 20.0,
              color: Colors.yellow,
            )),
        Container(
          width: 100.0,
          height: 50.0,
          child: Text(
            'Right',
            style:
                TextStyle(fontSize: 32.0, backgroundColor: Colors.greenAccent),
          ),
        ),
      ],
    );
  }
Copy the code

####3. Wrap

3.1 Wrap Demo Diagram

3.2 Wrap sample code
Wrap horizontalWrap(int index) {
    return Wrap(
      // The default spindle is horizontal
      // direction: Axis.horizontal,
      children: <Widget>[
        horizontalRandomColorWrapContainer(index++),
        horizontalRandomColorWrapContainer(index++),
        horizontalRandomColorWrapContainer(index++),
        horizontalRandomColorWrapContainer(index++),
      ],
    );
  }
Copy the code

####4. AnimatedContainer

4.1 AnimatedContainer Diagram before animation

4.2 AnimatedContainer Schematic diagram after animation execution

AnimatedContainer changes the background color, width, height, and alignment of the widgets before and after execution.

AnimatedContainer sample code
AnimatedContainer(
  onEnd: () {
    print('End of animation');
  },
  child: DecoratedBox(
    child: FlutterLogo(size: halfContainerWH,),
    decoration: BoxDecoration(
    //TODO:BorderRadius effect
    borderRadius: selected ? BorderRadius.all(Radius.circular(25.0)) : BorderRadius.all(Radius.circular(0)),
  )),
  duration: Duration(seconds: 2),
  curve: Curves.linearToEaseOut,
  width: selected ? halfContainerWH : containerWH,
  height: selected ? containerWH : halfContainerWH,
  alignment: selected ? Alignment.topCenter : Alignment.center,
  color: selected ? Colors.purpleAccent : Colors.blueGrey),
Copy the code

####5. Opacity

Opacity 5.1 Opacity

5.2 Opacity sample code
Opacity(
  opacity: 1.0,
  child: Container(
    decoration: BoxDecoration(color: Colors.blue),
    child: Text(
      'Opacity: 1.0',
      style: TextStyle(
          color: Colors.white,
          backgroundColor: Colors.blue,
          fontSize: 24.0),),),/ / the child: Text (' Opacity: 1.0),
),
Copy the code

6. AnimatedOpacity

Before changing opacity

After the opacity is changed

6.3 AnimatedOpacity sample code
AnimatedOpacity(
  onEnd: () {
    print('End of animation');
  },
  opacity: animatedOpacityValue,
  duration: Duration(seconds: 2),
  curve: Curves.fastOutSlowIn,
  child: FlutterLogo(size: 100.0),),Copy the code

####7. FutureBuilder

7.1 FutureBuilder effect drawing

7.2 FutureBuilder sample code
FutureBuilder(
future: Dio().get('https://api.github.com/orgs/flutterchina/repos'),
builder: (BuildContext context, AsyncSnapshot snapshot) {
  if (snapshot.connectionState == ConnectionState.done) {
    Response response = snapshot.data;
    // Request result is incorrect, error message is displayed
    if (snapshot.hasError) {
      return Text(snapshot.error.toString());
    }
    // Display the request result
    return ListView(
      children: response.data
          .map<Widget>((obj) => ListTile(
              title: Text(obj["name"]),
              subtitle: Text(obj["full_name"])))
          .toList(),
    );
  } else if (snapshot.connectionState == ConnectionState.waiting) {

  } else if (snapshot.connectionState == ConnectionState.none) {

  }
  // A progress indicator is returned during the request
  return CircularProgressIndicator(
    strokeWidth: 10.0,
    semanticsLabel: 'Just a moment... ',); }),Copy the code

####8. FloationgActionButton

8.1 Center FloatingActionButton Effect

8.2 floationActionButton centered example code
floatingActionButton: FloatingActionButton(
    // child: Text('FAB'),
    child: Icon(Icons.add),
    onPressed: () {
      print('click FAB');
    },
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    color: Colors.blue,
    child: Container(
      height: 44.0,),),Copy the code

Third, the Demo

Demo download address:FlutterLearningRecord

4. Refer to the learning website

  • flutter.cn
  • Building a web application with Flutter
  • Flutter document
  • Flutter Combat free online PDF
  • Core principles of Flutter
  • In-depth understanding of Flutter application startup
  • The principle of Flutter: three important trees (rendering process, layout constraints, application view construction, etc.)
  • First Flutter web
  • Write a simple page with Flutter

The author’s wechat: you can add and pull into “aTaller Technology Exchange Group”.

The ways to follow us are: aTaller(Brief book) aTaller(Gold digging) aTaller(wechat official account)

The principle of the use of the Flutter Platform Channel and source code analysis of the use and principle of the Flutter Platform View