I. use of Row with horizontal layout

The row component allows the child elements inside the row to be arranged horizontally. Row components can be divided into flexible arrangement and non flexible arrangement.

  • Inflexible layout: layout according to the size of Row sub elements. If the child element is insufficient, a gap will be left. If the child element exceeds, a warning will be given.
  • Flexible layout: to solve the problem that there are gaps in the inflexible layout, you can use Expanded to solve it, that is, flexible layout. Just add Expanded outside the button

Inflexible horizontal layout

/**
 * Inflexible horizontal layout
 */
class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        RaisedButton(onPressed: () {}, color: Colors.red, child: Text('Red button')),
        RaisedButton(
          onPressed: () {},
          color: Colors.orange,
          child: Text('Yellow button'),
        ),
        RaisedButton(onPressed: () {}, color: Colors.pink, child: Text('Pink button'))
      ],
    );
  }
}

Effect:

There are already three buttons on the page, but they are not full of one line, but there are gaps. This is caused by inflexible horizontal arrangement. It is arranged according to the size of the child elements. If you want to fill a row, you need to use flexible horizontal layout.

Flexible horizontal layout

/**
 * Flexible horizontal layout
 */
class RowExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
            child: RaisedButton(
                onPressed: () {}, color: Colors.red, child: Text('Red button'))),
        Expanded(
            child: RaisedButton(
          onPressed: () {},
          color: Colors.orange,
          child: Text('Yellow button'),
        )),
        Expanded(
            child: RaisedButton(
                onPressed: () {}, color: Colors.pink, child: Text('Pink button')))
      ],
    );
  }
}

Effect:

It's time to fill a line. Another is to use mixed horizontal layout if you want to realize only part of the flexible horizontal layout.

Mixed horizontal layout

/**
 * Mixed horizontal layout
 */
class RowMixWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        RaisedButton(onPressed: () {}, color: Colors.red, child: Text('Red button')),
        Expanded(
            child: RaisedButton(
          onPressed: () {},
          color: Colors.orange,
          child: Text('Yellow button'),
        )),
        RaisedButton(onPressed: () {}, color: Colors.pink, child: Text('Pink button'))
      ],
    );
  }
}

Effect:

The middle button is a flexible horizontal layout, while the buttons on both sides keep the real size, which is a non flexible horizontal layout.