I tried to wrap column with Singlechildscrollview Flutter but screen goes blank-CodePudding

[enter image description here][1] Inside My column, there is a stack, a carousel slider,a gridview builder. I want to scroll all of them together. I tried to use singlechildscrollview as you can see in the code below. Please Someone help me how can I scroll those things together.

[1]: https://i.stack.imgur.com/FYexC.png` enter code here`

Scaffold( backgroundColor: Colors.orange, // Color(0xFFFFF176),

  body: SingleChildScrollView(
    child: Column(
      children: [
        Expanded(
          child: Stack(
            alignment: Alignment.bottomCenter,
            children: [
              CarouselSlider(
                items: slideImage
                    .map((image) =>
                        Builder(builder: (BuildContext context) {
                          return Container(
                            height: 200,
                            width: 500,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(40),
                              image: DecorationImage(
                                  image: AssetImage(image),
                                  fit: BoxFit.fill),
                            ),
                          );
                        }))
                    .toList(),
                options: CarouselOptions(
                  onPageChanged: (index, reason) {
                    setState(() {
                      activeIndex = index;
                    });
                  },
                  height: 300,
                  viewportFraction: 1,
                  autoPlay: true,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: AnimatedSmoothIndicator(
                    activeIndex: activeIndex, count: slideImage.length),
              ),
            ],
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Expanded(
          child: GridView.builder(
            shrinkWrap: true,
            // physics: NeverScrollableScrollPhysics(),
            itemCount: menuImage.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 0.8,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
            ),
            itemBuilder: (context, index) => Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              color: Color(0xFFFFFDE7),
              elevation: 10,
              child: GridTile(
                child: Column(
                  children: [
                    Image.asset(
                      menuImage[index],
                      fit: BoxFit.fill,
                    ),
                    Text(
                      title[index],
                      style: TextStyle(fontSize: 18),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  ),
);

} }

CodePudding user response：

It would be best if you gave height to the column you are using singlechildeScrollview. Wrap column widget in container or sizedbox widget and give it height.
column widget has children widget GridView.builder that is wrapped in expanded so gridview.builder will try to take all available height in the column which will be infinite because it's not defined and you will get column covering screen taking infinite screen height in short blank screen.

CodePudding user response：

In flutter, Column will take height as much as it can, SingleChildScrollView child dont have height (infinite). Combine together, Flutter don't know how to render them correctly and causing error.

To solve it, try to determine the height of Column by widgget like SizedBox or determine the mainSize.min.

Another way to solve it is wrap Column by IntrinsicHeight but not recommend cause it heavy.

CodePudding user response：

If it takes too much height. so give height to the column.

like this..

 SingleChildScrollView(
            child: SizedBox(
              height: 500,
              child: Column(
                children: const [...],
              ),
            ),
          )