Container inside SingleChildScrollView doesnt show up without defining width and height

Question

I have a body of scaffold that structured like this :

body : Column(
children : [
Expanded(
  child : SingleChildScrollView(
  Container (
    Column( 
    //content
    )
  )
  )
),
BottomMenu()
]
)

And the problem is the content would not show up if i dont define the width and height for the Container inside SingleChildScrollView, but if i define the height then the height of my childscrollview wont work dynamically with the content, i want the height to fit the content inside of my container so i can scroll until the end of content. I am still new to this so any advice and suggestion will be appreciated. Thankyou

It is hard to tell what is the layout that you are trying to achieve. Can you post a picture describing what you want ? — Lulupointu, Oct 24 '20 at 14:35

score 0 · Answer 1 · answered Oct 24 '20 at 14:50

0

It is better to use Stack instead of the column as top Widget like this:

Stack(
  children: <Widget>[
    SingleChildScrollView(
      Container (
        Column( 
          //content
        )
      )
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: BottomMenu(),
    ),
 ],
)

Does this help you?

answered Oct 24 '20 at 14:50

Bensal

3,316
1
23
35

this actually help, but the problem is part of singlechildscrollview content would be covered by bottomenu – Jolzal Oct 25 '20 at 15:04
then add padding to the bottom of singlechildscrollview – Bensal Oct 26 '20 at 06:46

score 0 · Answer 2 · answered Oct 24 '20 at 14:54

Your layout isn't best practice, try:

return Scaffold(
      body: LayoutBuilder(builder: (context, constraints) {
      return SingleChildScrollView(
        child: Container(
          width: constraints.maxWidth,
          height: constraints.maxHeight,
          child: Column(
            children: [
              //your content
            ],
          ),
        ),
      );
    }));

This makes a container which is the size of the screen, and it contains a column which will scroll with all the content.

score -1 · Answer 3 · answered Oct 24 '20 at 14:57

I could not understand what exactly the issue is. But I could give some idea.

Try something like this,

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            color: Colors.blue,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.9,
            child: SingleChildScrollView(
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: ListView(
                  children: [
                    Row(
                      children: [
                        Container(
                          margin: const EdgeInsets.only(bottom: 10.0),
                          height: 100.0,
                          width: 100.0,
                          color: Colors.red,
                        ),
                      ],
                    ),
                     
                    
                    ....
                    
                  ],
                ),
              ),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.1,
            child: BottomMenu(),
          ),
        ],
      ),
    );
  }

Hope that solves your issue.

Container inside SingleChildScrollView doesnt show up without defining width and height

3 Answers3