This week’s article focuses on the use of layout widgets in Flutter development.

1. What layout widgets are available in Flutter

Layout widgets are ways to align or limit visible widgets, similar to the LinearLayout and RelativeLayout used in Native Android development.

Flutter layout widgets can be divided into two categories:

• Single-child Layout widgets (only one child)
• Multi-child Layout widgets (can contain multiple child elements)

All layout widgets in Flutter:

Flutter. Cn/docs/develo…

2. How do I add a visible widget to a layout widget

This is a bit like adding a View (or ViewGroup) to another View (or ViewGroup) in Android native development.

In a Flutter, all layout widgets have one of the following:

• A child property, if they contain only one child — for example, Center and Container.

• A children property if they contain multiple children — such as Row, Column, ListView, and Stack.

///Container has a child attribute, so we can add a child element to the Container,
///That child element can contain its own child element, and so on...
Container(
      padding: EdgeInsets.all(20),
      // Add a Row Widget in the Container via child
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        // Add multiple Icon widgets in the Row via children
        children: <Widget>[
            Icon(Icons.star, color: Colors.green[500]),
            Icon(Icons.star, color: Colors.green[500]),
            Icon(Icons.star, color: Colors.green[500]),
            Icon(Icons.star, color: Colors.black),
            Icon(Icons.star, color: Colors.black),
        ],
      ),
    )
Copy the code

3. Subclasses of State are usually named beginning with an underscore, indicating that their implementation details are private. As described in the official Flutter Demo project:

lass MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

/// _MyHomePageState is a subclass of State
///
/// The name begins with an underscore to indicate that it is private
class _MyHomePageState extends State<MyHomePage> {... }Copy the code

4. To minimize the visual clutter that can result from highly nested layout code, various parts of the UI can be implemented in variables and functions.

For example, I want to implement the five stars outlined in red below:

Its widget tree looks like this:

// Implement a horizontal array of five stars and assign it to starts, which is available to other Widget calls
var stars = Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.black),
    Icon(Icons.star, color: Colors.black),
  ],
);

final ratings = Container(
  padding: EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      // Call one of our defined widgets directly
      stars,
      Text(
        '170 Reviews',
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.w800,
          fontFamily: 'Roboto',
          letterSpacing: 0.5,
          fontSize: 20,),),),),);Copy the code

5. MainAxisAlignment and CrossAxisAlignment in Flutter

Recommended reading: Detailed explanations of MainAxisAlignment and CrossAxisAlignment in Flutter

6.DefaultTextStyle.merge()

// First implement a generic Style and assign it to descTextStyle
static var descTextStyle = TextStyle(
  color: Colors.black,
  fontWeight: FontWeight.w800,
  fontFamily: 'Roboto',
  letterSpacing: 0.5,
  fontSize: 18,
  height: 2,);// defaulttextstyle.merge () allows you to create a DefaultTextStyle that is inherited by its children and all subsequent children.
// This means that all Text widgets in the defaulttextstyle.merge () parentheses are styled as descTextStyle.
final iconList = DefaultTextStyle.merge(
  style: descTextStyle,
  child: Container(
    padding: EdgeInsets.all(20),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Column(
          children: [
            Icon(Icons.kitchen, color: Colors.green[500]),
            Text('PREP:'),
            Text('25 min'),
          ],
        ),
        Column(
          children: [
            Icon(Icons.timer, color: Colors.green[500]),
            Text('COOK:'),
            Text('1 hr'),
          ],
        ),
        Column(
          children: [
            Icon(Icons.restaurant, color: Colors.green[500]),
            Text('FEEDS:'),
            Text(4-6 ' '() [[() [() [() [() [() [()Copy the code

7. How do children fit together tightly

Like the stars right next to each other, like the ones below:

Method: Set its mainAxisSize to mainAxissize.min

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.green[500]),
    Icon(Icons.star, color: Colors.black),
    Icon(Icons.star, color: Colors.black),
  ],
)
Copy the code