Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to position a Column inside the stack based on the fractional height of screen in flutter?

I want to position the Column inside the Stack, so that it takes 60% of the screen, and that it is positioned at the bottom of the screen.

////////
|
|
|40%
////////
|column
|
|
|
|60%
////////

Currently I am trying to do it with Positioned and with MediaQuery But It doesnt work.

      new Positioned(
        top: MediaQuery.of(context).size.height * .4,
        height: MediaQuery.of(context).size.height * .6,

        child: new Column(

I know there are some Fractional Widgets that should help.

like image 944
Tree Avatar asked Jun 01 '18 18:06

Tree


1 Answers

You can do that with a Column widget (which is a subclass of a Flex widget) and Expanded children with the flex property.

Stack(
  fit: StackFit.expand,
  children: [
    Column(
      children: <Widget>[
        Expanded(
            flex: 4,
            child: Container() 
            ),
        Expanded(
          flex: 6,
          child: Column(
            children: <Widget>[],
          ),
        )
      ],
    )
  ],
)
like image 74
Stephen Avatar answered Oct 02 '22 12:10

Stephen