top of page

[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,),
                  )
                ],
              )
            ],
          )
        )
    );
  }


Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Komentarze


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page