Expanded overview

Expanded is a Widget that expands the child of a Row, Column, or Flex. Expanded allows the subentries of [Row], [Column], or [Flex] to expand to fill the available space in the spindle (for example, horizontal with [Row] or vertical with [Column]). If multiple children are extended, the available space is divided into multiple children based on the [Flex] factor. The [Expanded] widget must be a descendant of [Row], [Column], or [Flex], and from the [Expanded] widget to its enclosing [Row], The path for [Column] or [Flex] must contain only [StatelessWidget] or [StatefulWidget] s (not another type of widget, such as [RenderObjectWidget]). In the use of scenarios such as the blank treatment of list words and buttons in the previous demo, expanded can be used to properly allocate elastic space among the widgets, instead of positioning the widgets in a fixed position. The key allocation parameter is Flex.

The constructor

const Expanded({
    Key key,
    int flex = 1.@required Widget child,
  })
Copy the code
  • Flex allocates the elastic coefficient of space,Row.ColumnorFlexThe percentage of space allocated for each Expanded Flex, by defaultint flex = 1
  • Child is the child Widget that needs to be assigned

The sample code

// expand

import 'package:flutter/material.dart';

class ExpandedLearn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Expand')
      ),
      body: Row(children: <Widget>[
        // Allocate the remaining space according to the Flex coefficient
        Expanded(
          flex:2,
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),

              ),
            )
        ),
        Expanded(
          flex: 1,
          child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20), gradient: LinearGradient(colors: [Colors.red, Colors.orange]), ), ) ) ], ) ); }}Copy the code

Effect of the sample