Flutter - How to get Container with children to take up entire screen

constrainedbox flutter
flutter container
flutter container fill parent
flutter container full height
flutter container full width
flutter container alignment
flutter alignment
flutter children

As per Flutter docs Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The closest I've been to getting it to work:

return Stack(
  children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      //width: Device.screenWidth,
      //height: Device.screenHeight,
      child: Column(
        children: <Widget>[(view[1])],
      ),
    ),
    Container(
      width: MediaQuery.of(context).size.width * .50,
      height: MediaQuery.of(context).size.width * .50,
      child: Column(
        children: <Widget>[(view[0])],
      ),
    ),
  ],
);


I/flutter (12292): The following message was thrown during layout:
I/flutter (12292): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter (12292): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter (12292): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter (12292): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Can't understand why MediaQuery or Device isn't preventing overflow? The first Container always overflows by 81 pixels on both an Android phone or tablet; no iPhone or iPad to test now. Based on what I've read from other posts overflow with yellow & black is corrected simply by wrapping in a SingleChildScrollView but when I attempt to do so I get

child: SingleChildScrollView(
        child: Column(
          children: <Widget>[(view[1])],
        ),
      ),

I/flutter (12292): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (12292): The following assertion was thrown during performLayout():
I/flutter (12292): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (12292): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (12292): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (12292): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (12292): space in the vertical direction.
I/flutter (12292): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
.
.
.
I/flutter (12292):   crossAxisAlignment: center
I/flutter (12292):   verticalDirection: down
I/flutter (12292): This RenderObject had the following child:
I/flutter (12292):   RenderAndroidView#e356e NEEDS-LAYOUT NEEDS-PAINT

Made several other attempts with Expanded, ClipRect & other widgets based on the errors I've seen but it just made it worse where there was no image at all. Am I missing something simple or should I attempt to fix this another way?

EDIT: As per Amsakanna the latest attempt is below but still overflows by 81 pixels to produce identical error message above in the first code block.

return Stack(
  children: <Widget>[
    SingleChildScrollView(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: <Widget>[view[1])],
        ),
      ),
    ),

I/flutter ( 1144): The following message was thrown during layout:
I/flutter ( 1144): A RenderFlex overflowed by 81 pixels on the bottom.
I/flutter ( 1144): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 1144): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 1144): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Tried to use IntrinsicHeight inside SingleChildScrollView as found here in the Expanding content to fit the viewport section but it overflows too (by 81 pixels) with similar error message.

SizedBox.expand did it for me. Here is an example of displaying an image so that the image height matches the parent and the container draws a black background in the unused space:

  SizedBox.expand(
    child: Container(
      color: Colors.black,
      child: Image (
        fit: BoxFit.fitHeight,
        image: AssetImage('assets/myimage.png'),
      ),
    ),
  );

Flutter — Container Cheat Sheet. A convenience widget that , If the Container widget has no child it will automatically fill the given area The container will fill all the screen. child: Text("Flutter CheatSheet. which have a children property, and then provide the children to that widget. The container will fill all the screen. Center(child: Container see that the container take the size of the child. is just a property specifying the size or space a widget can take up

My approach...

return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: Container(
        color: Colors.indigo[200],
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Image.file(_image),
            ),
          ],
        ),
      ),
    );

Dealing with box constraints, Some widgets, for example Container , vary from type to type based on their if the minimum and maximum width are the same, it is said to have a tight width). forces it to exactly fill the application's content area (typically, the entire screen). in Flutter, especially those that just take a single child, pass their constraint on to � FittedBox, to scale its child to entirely fit the parent, maintaining its proportions. Container, to set the background color of unused parts of the screen. SizedBox.expand, to scale the

You did it right by wrapping it inside a SingleChildScrollView.

The second error happens whenever you have a flex widget like 'Expanded' is placed inside a Column. If you did not place any expanded widget inside the first Column, probably it is the Camera widget doing that.

Try giving a definite size to your Camera widget by wrapping it inside a Container or SizedBox.

How to set the size of a Flutter Container (fit a percentage of the , As a brief note, on this page I found this example of how to set the size of a Flutter Container : I don't think it's needed in this example, so you should get the exact the size of this Flutter Container to be one-fourth of the screen height: returnContainer( height: MediaQuery.of(context).size.height / 4, child:� The screen forces the Center to be exactly the same size of the screen. So the Center fills the screen. The Center tells the Container it is free to be any size it wants, but not bigger than the

It works for me..

return Scaffold(
              appBar: AppBar(
                title: Text("chatEasy"),
                backgroundColor: Color.fromRGBO(102, 108, 218, 1),
              ),
              body: Container(
                child: Column(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        child: Image(
                          image: AssetImage("images/baseScreen.png"),
                          fit: BoxFit.fitHeight,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            );
          }
        }

Row in container occupy full screen � Issue #22169 � flutter/flutter , Hi guys, I have been searching around on google but did not find an answer configured height and row height is not sized to fit the child widget. In my Flutter project, I have initialized a container. Inside that Container I have a child 'column' and inside that I initialized 3 icons as my widget. So, I want to align the entire container block ( White block in the picture given below) to the end of the screen vertically.

Sizing widgets relative to parent/screen size in Flutter, For instance, we want a container to take 65% of the screen width or two containers that We would end up with the following code. FractionallySizedBox is a widget (a container) that lets its child have a By default, Expanded takes the whole available space, so if we want 2 widgets to take 50% of the� You can simply use a FlatButton and wrap it inside a container and add width of the container to screen width by using mediaquery look for my answer below – maheshmnj Feb 16 '19 at 2:44

A Guide to Using ScreenSize In Flutter, Get the size of the current screen in Flutter using context reducing functions. In certain layouts will require you to make some calculations on those sizes. Have a container half the size of the screen height (blue), another container a return Scaffold( body: Column( children: <Widget>[ Container( color:� When the user taps the image of a product, a new screen displays details about the product. Terminology: In Flutter, screens and pages are called routes. The remainder of this recipe refers to routes. In Android, a route is equivalent to an Activity. In iOS, a route is equivalent to a ViewController. In Flutter, a route is just a widget.

Know Your Widgets: Container in Flutter, You can use Container to any widgets to add some styling properties. That's a lot of properties, but no worries we have everything sorted. to the alignment property then it will be on the center of the screen. Container( color: Colors.amber , child: FlutterLogo( size: 200, ), alignment: Alignment(0, 0), ), ) Container is a widget class that allows you to customize its child widget. Use a Container when you want to add padding, margins, borders, or background color, to name some of its capabilities. In this example, each Text widget is placed in a Container to add margins. The entire Row is also placed in a Container to add padding around the row.

Comments
  • What are you trying to achieve? Maybe give some details. Because a simple Stack with a Container as a child should use the full screen, if you place two Container as a Stack children be aware that only the second will be visible, it's a stack after all, so it's on top of the first.
  • What is inside (view[0]) and (view[1]) ? They might be the source of the problems.
  • @MiguelRuivo I'm stacking 2 camera views on top of one another. Similar to the FrameLayout in Android. Currently both are visible, it's just the first that repeatedly overflows
  • @Willy both view[0] & view[1] are cameras. The second container sizes correctly as per MediaQuery.... * 0.50 but the first keeps overflowing. Seems I'd have issue with both views if they're the source of the problem...
  • In the second container, you're setting height = device width. Is that intentional or typo?
  • Please add more detail to explain your solution.
  • @Nakx Check doc for "alignment": "If non-null, the container will expand to fill its parent and position its child within itself according to the given value." Specifying alignment basically makes container expand to fill parent.
  • thanks for catching typo above, it should be height = ...size.height. Yes view is expanded as want to fill all available space...
  • In that case, you should wrap your column inside SingleChildScrollView with a container of device width and height.