[Flutter/dart]Spread the stacked elements to fill the screen

Overview

We set the crossAxisAligment property to CrossAxisAligment.stretch to expand the elements placed in the Column with Flutter to fill the screen. However, if the child element is a Stack, a little ingenuity was required.

Method

Set the Stack's fit property to StackFit.passthrough (1). The fit property describes how to determine the width of the widget, but in the case of StackFit.passthrough it sets the width specified by the parent. That is, in this case CrossAxisAligment.stretch applies.

If you want to specify the overlapping position of child elements, wrap one widget in Align (2). If you use Positioned, you have to specify the overlapping position numerically, so you cannot expand the overall size to fit the screen width.

The code to which the above is applied is as follows.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('demo'),
        ),
        body: Container(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Stack(
                overflow: Overflow.visible,
                fit: StackFit.passthrough, //1
                children: [
                  Card(
                    child: Container( 
                      padding: const EdgeInsets.all(8),
                      child: Text(
                        'test',
                        style: TextStyle(
                          fontSize: 16
                        ),
                      ),
                    )
                  ),
                  Align(  //2
                    alignment: Alignment.topRight,
                    child: Icon(Icons.brightness_1, color: 
                      Colors.red,),
                  )
                ],
              )
            ],
          )
        )
    );
  }