How to make fixed size container inside container in flutter

Question

I am trying to make layout of app where main container will have 45% of device height and container inside main container should be of fix size.

I have written following code but inner container takes full height as its parent(main) container.

class TestContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          width: 50,
          height:MediaQuery.of(context).size.height * 0.45,
          color: Colors.red
          child:Container(
          width: 50,
          height: 100,
          color: Colors.green
          )
        );
      }
    }

Any clue what I am doing wrong with this ?

This won't fix the issue, you need to understand how constraints works in Flutter. flutter.dev/docs/development/ui/layout/constraints — timilehinjegede
– timilehinjegede, Commented Aug 7, 2020 at 18:53

timilehinjegede · Accepted Answer · 2020-08-07 18:57:56Z

7

Fix it by wrapping it with a Center widget:

class TestContainer extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          width: 50,
          height:MediaQuery.of(context).size.height * 0.45,
          color: Colors.red,
          // wrap with a center widget
          child:Center(
            child: Container(
            width: 50,
            height: 100,
            color: Colors.green
            ),
          )
        );
      }
    }

TO PLACE THE INNER CONTAINER AT THE BOTTOM CENTER

class TestContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: MediaQuery.of(context).size.height * 0.45,
      color: Colors.red,
      // wrap with a align widget
      child: Align(
        // set the alignment property
        alignment: Alignment.bottomCenter,
        child: Container(
          width: 50,
          height: 100,
          color: Colors.green,
        ),
      ),
    );
  }
}

Read more about Layout Constraints in Flutter here: https://flutter.dev/docs/development/ui/layout/constraints

edited Aug 7, 2020 at 18:57

answered Aug 7, 2020 at 18:47

timilehinjegede

14.2k4 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Over a year ago

Thanks @Derek. Is there any way to position inner container to be bottom of main container. I tried alignment: Alignment.bottomCenter, but this seems to be not working.

timilehinjegede Over a year ago

You need to wrap the inner Container with an Align widget rather than using the alignment property. I updated my answer

abhi · Accepted Answer · 2021-05-31 06:19:32Z

1

Flutter Container's basic property is to consume the parents size... So in order to add Container as child to an another Container you simply nee to specify where you need the inner container to be displayed on outer container.. otherwise the child container will grow to the size of its parent Container.

Container(
    width: 400.0,
    height: 400.0,
    color: Colors.green,
    alignment: Alignment.center, // align your child's position.
    child: Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
    ),
  ),

answered May 31, 2021 at 6:19

abhi

1,15613 silver badges17 bronze badges

Comments

Johny Saini · Accepted Answer · 2020-08-07 19:02:09Z

0

class TestContainer extends StatelessWidget {
        @override
     Widget build(BuildContext context) {
       return Container(
      width: 50,
      height:MediaQuery.of(context).size.height * 0.45,
      color: Colors.red,
      child:Stack(
  children: <Widget>[
      Positioned(
        bottom: 0,
        child: Container(
                width: 50,
                height: 100,
                color: Colors.green
                )
             )
           ] )
      ); }
}

answered Aug 7, 2020 at 19:02

Johny Saini

9191 gold badge6 silver badges6 bronze badges

1 Comment

Johny Saini Over a year ago

I agree but there is multiple way to do same task.

Collectives™ on Stack Overflow

How to make fixed size container inside container in flutter

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related