8

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.

1 Answer 1

15

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.