How to set Container height fit to screen

Question

Note: This widget is child of another Column

I need to use ListView.builder inside Column but to use it inside Column i need to wrap it with Container not only that i need to set the height,
here i used MediaQuery.of(context).size.height and it works,
but with one issue,it is showing that A RenderFlex overflowed by 226 pixels on the bottom.
How to avoid it ?

 Column(
                  children: <Widget>[
                    getTopWidget(),
                    Container(    
                      height: MediaQuery.of(context).size.height,
                      width: MediaQuery.of(context).size.width,
                      child: ListView.builder(
                          itemCount: shapShot.data.length,
                          itemBuilder: (context,index){
                        return  EventCard(
                          title: shapShot.data[index].title,
                          details: shapShot.data[index].details,
                          imageUrl: shapShot.data[index].imageUrl,
                        );
                      }),
                    ),
                  ],
                );

I tried with Flexible and it not worked
When in try with Expanded it makes below error

App screenshot

RenderBox was not laid out: RenderRepaintBoundary#76ded NEEDS-LAYOUT NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1695 pos 12: 'hasSize'

The parent class code

import 'dart:collection';

import 'package:devaayanam/DevaayanamApp/devaayanam_app_communities.dart';
import 'package:devaayanam/DevaayanamApp/devaayanam_app_home_page.dart';
import 'package:devaayanam/DevaayanamApp/devaayanam_app_temples_listing.dart';
import 'package:devaayanam/DevaayanamApp/devaayanam_app_videos.dart';
import 'package:flutter/material.dart';

import '../GradientAppBar.dart';
import 'temples_listing_with_tab_mode.dart';

class DevaayanamAppFramePage extends StatefulWidget {
  DevaayanamAppFramePage({Key key}) : super(key: key);

  @override
  _DevaayanamAppFramePageState createState() => _DevaayanamAppFramePageState();
}

class _DevaayanamAppFramePageState extends State<DevaayanamAppFramePage> {
  int _selectedIndex = 0;
  ListQueue<Widget> page1,page2,page3,page4;
  _DevaayanamAppFramePageState(){
    page1=ListQueue();
    page1.add(DevaayanamAppHomePage());
    page2=ListQueue();
    page2.add(DevaayanamAppTemplesListing());
    page3=ListQueue();
    page3.add(DevaayanamAppCommunities());
    page4=ListQueue();
    page4.add(DevaayanamAppVideos());
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,

      bottomNavigationBar: BottomNavigationBar(
          onTap: _onItemTapped,
          unselectedItemColor: Colors.grey,
          selectedItemColor: Colors.grey,
          currentIndex: _selectedIndex,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                  color: Colors.grey,
                ),
                title: Text(
                  "Home",
                  style: TextStyle(color: Colors.grey),
                )),
            BottomNavigationBarItem(
                icon: Icon(Icons.assessment),
                title: Text(
                  "Temples",
                  style: TextStyle(color: Colors.grey),
                )),
            BottomNavigationBarItem(
                icon: Icon(Icons.comment),
                title: Text(
                  "Communities",
                  style: TextStyle(color: Colors.grey),
                )),
            BottomNavigationBarItem(
                icon: Icon(Icons.play_arrow),
                title: Text(
                  "Videos",
                  style: TextStyle(color: Colors.grey),
                )),
          ]),

      body: Container(
        child: Column(
          children: <Widget>[GradientAppBar(),getBody()],
        ),
      ),
    );
  }


  Widget getBody(){
    switch(_selectedIndex){
      case 0:
        return page1.last;
      case 1:
        return page2.last;
      case 2:
        return page3.last;
      case 3:
        return page4.last;
    }
  }
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

Have you try this : https://stackoverflow.com/a/54160305/7666442 — AskNilesh, Dec 30 '19 at 11:25

Yudhishthir Singh · Accepted Answer · 2019-12-30T11:54:25.130

11

Its happening because of the topWidget(), what you can do is wrap the inner container with Expanded and remove the height you are giving. Expanded widget will make the container take up the complete space that is available.

Column(
              children: <Widget>[
                getTopWidget(),
               //Wrap the container below with expanded
                Container(
                 // remove this height
                  height: MediaQuery.of(context).size.height,
                  width: MediaQuery.of(context).size.width,
                  child: ListView.builder(
                      itemCount: shapShot.data.length,
                      itemBuilder: (context,index){
                    return  EventCard(
                      title: shapShot.data[index].title,
                      details: shapShot.data[index].details,
                      imageUrl: shapShot.data[index].imageUrl,
                    );
                  }),
                ),
              ],
            );

edit: Please note that Expanded won't help unless the column is outer most column in the widget hierarchy. If you have column in a column, wrap upper column's child with expanded.

edited Dec 30 '19 at 11:54

answered Dec 30 '19 at 11:27

Yudhishthir Singh

2,941
2
23
42

Im sure this is because of widgets that are up in the hierarchy. Please attach the complete build function. – Yudhishthir Singh Dec 30 '19 at 11:35
Is column a direct child or is one of a children of some other widget? – Yudhishthir Singh Dec 30 '19 at 11:36
this widget is a child of another Column – Midhilaj Dec 30 '19 at 11:39
There we go. Thats the problem. – Yudhishthir Singh Dec 30 '19 at 11:40
Okay, then what is the solution? – Midhilaj Dec 30 '19 at 11:41
Is there any widget upper to that column which is parent of inner column? – Yudhishthir Singh Dec 30 '19 at 11:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205073/discussion-between-yudhishthir-singh-and-midhilaj). – Yudhishthir Singh Dec 30 '19 at 11:42

score 1 · Answer 2 · answered Dec 30 '19 at 11:29

1

You can use it like this:

Column(
                  children: <Widget>[
                    getTopWidget(),
                    Expanded(    
                      child: ListView.builder(
                          itemCount: shapShot.data.length,
                          itemBuilder: (context,index){
                        return  EventCard(
                          title: shapShot.data[index].title,
                          details: shapShot.data[index].details,
                          imageUrl: shapShot.data[index].imageUrl,
                        );
                      }),
                    ),
                  ],
                );

Because if you are using the MediaQuery.of(context).size.height it will overflow the view. As already showing on the app.

answered Dec 30 '19 at 11:29

Sunny

3,134
1
17
31

1

RenderBox was not laid out: RenderRepaintBoundary#76ded NEEDS-LAYOUT NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1695 pos 12: 'hasSize' – Midhilaj Dec 30 '19 at 11:31
Can you Please add the screenshot. – Sunny Dec 30 '19 at 11:32
@Midhilaj Have you tried my above code? Because I think after using this your Problem get resolved if there is no other error. – Sunny Dec 30 '19 at 11:37
check my question i updated with screenshot when i use this solution – Midhilaj Dec 30 '19 at 11:39
@Midhilaj Can you Also please add the whole class code that you have implemented – Sunny Dec 30 '19 at 11:44
In this case, don't forget to set `shrinkWrap:true` in the ListView – Aditya Nigam Dec 30 '19 at 12:27

score 1 · Answer 3 · answered Dec 30 '19 at 11:53

First wrap the column with a container with set height:

Container(
      height: MediaQuery.of(context).size.height,
      child: Column(...),
),

Now in the column, wrap the child that you want to expand with Expanded widget so it would expand to the height of the column (with is limited by the outside container height).

score 0 · Answer 4 · answered Dec 30 '19 at 13:08

You can use :

Container(
      height: MediaQuery.of(context).size.height,
      width:MediaQuery.of(context).size.width,
),

to make container as per your screen size, you can also set some percent of your screen for the container. For example to set container height to 60% of screen and width to 40% of screen use:

Container(
      height: MediaQuery.of(context).size.height * 60/100,
      width:MediaQuery.of(context).size.width * 40/100,
),

make an expanded as child of that container and a column or row as child to that expanded to fill the container with required widgets

Container(
      height: MediaQuery.of(context).size.height * 60/100,
      width:MediaQuery.of(context).size.width * 40/100,
     child:Expanded(
           child : Column(
...... 
           ),
      ),
),

score 0 · Answer 5 · answered Sep 27 '21 at 19:43

simple way is IntrinsicHeight( childe: ////your widget )

This class is useful, for example, when unlimited height is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable height.

How to set Container height fit to screen

5 Answers5