Spacer and Widget

Welcome to the Widget Challenge

Spacer manages the empty space between the widgets with flex container. Evenly with the Rowand Column MainAxis alignment we can manage the space as well as shown in example.

//Alignment example
class RowColumnAlignment extends StatelessWidget {
  List colors = [Colors.teal, Colors.red, Colors.blue];
  _sampleWidget() => List<Widget>.generate(colors.length, (index) {
        return new Container(
          color: colors[index],
          height: 50,
          width: 50,
        );
      });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Spacer and alignment"),
        ),
        body: Container(
            padding: EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                SizedBox(
                  height: 16.0,
                ),
                Text(
                    "Items are evenly distributed in the line with equal space around them (space around)"),
                SizedBox(
                  height: 8.0,
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: _sampleWidget()),
                SizedBox(
                  height: 16.0,
                ),
                Text(
                    "Items Spread across the screen however keeps equal space in  between (space between)"),
                SizedBox(
                  height: 8.0,
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: _sampleWidget()),
                SizedBox(
                  height: 16.0,
                ),
                Text(
                    "items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same (Space evenly)"),
                SizedBox(
                  height: 8.0,
                ),
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: _sampleWidget()),
              ],
            )));
  }
}

Output

{width: 200px;}

Spacer

Spacer in the flutter is as like the weight properties in the xml of java application. Spacer takes the flex in the constructor which defines the space. By default the value of flex is 1.

Sample

//Spacer example
class AlignmentWithSpacer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("Alligment with Spacer"),
        ),
        body: Container(
            padding: EdgeInsets.only(top: 16.0),
            child: Row(children: [
              Container(
                color: Colors.red,
                height: 50,
                width: 50,
              ),
              Spacer(), // default flex is 1
              Container(
                color: Colors.red,
                height: 50,
                width: 50,
              ),
              Spacer(
                flex: 2,
              ), // flex is 2
              Container(
                color: Colors.red,
                height: 50,
                width: 50,
              )
            ])));
  }
}

Output

Thanks for reading. We welcome the contributors who feels honor in helping other developers. Lets make better team together. For contribution please check https://github.com/flutterchallenge/widgetchallenge