Flutter SingleChildScrollView with a Column that has Expanded as a child

Question

i am trying to make the home screen scrollable with SingleChildScrollView but reading other questions on Stackoverflow, it seems that Expanded causes problems. I am new to Flutter, so i am here to ask you if you know how could i fix this. I noticed that if i wrap the Column in a SingleChildScrollView widget it works without the Expanded widget, so that's the problem for sure. Do you know how could i replace the Expanded widget? I don't know what height it is going to have, since i am probably going to add more buttons.

Here there is the code:

return Scaffold(
  body: Stack(
  children: [

    Container(
      margin: EdgeInsets.symmetric(horizontal: size.width * 0.10),
      child: Column(children: [

        SizedBox(height: statusBarHeight), // spazio per statusbar

        Align(
          alignment: Alignment.topLeft,
          child: Container(
            margin: EdgeInsets.only(top: size.height * 0.04),
            height: 20,
            // color: Colors.orange,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [

              Icon(Icons.wb_sunny_sharp, size: 20, color: Color(0xff8276f4)),

              SizedBox(width: 8), //  Spazio laterale da icona
              
              Text("MER 18 AGO", style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18,
                color: Color(0xff8276f4),
              ),),
              
            ],)
          ),
        ),

        Container(
          margin: EdgeInsets.only(top: 15, bottom: 20),
          width: size.width * 0.80,
          decoration: BoxDecoration(
            // color: Color(0xffaf8eff),
            borderRadius: BorderRadius.circular(29.5)
            ),
          child: Text("Ciao, Andrea!", style: TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 30,
            color: Color(0xff2e3760),
          ),),
          alignment: Alignment.centerLeft,
          


        ),

      
      
        Container(
          height: size.height * 0.30,
          width: size.width * 0.80,
          decoration: BoxDecoration(
          color: Color(0xffdee0e3),
          image: DecorationImage(
            scale: 0.5,
            image: AssetImage('assets/images/standing.png')
            ),
          borderRadius: BorderRadius.circular(29.5)
          ),
          
        ),

        SizedBox(height: 20),

        Align(
          alignment: Alignment.topLeft,
          child: Container(
              child: Text("Cosa vuoi fare oggi?", style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20,
                color: Color(0xff2e3760),
              ),),
            ),
        ),

        Expanded(
          
          
          child: Container(
            // color: Colors.orange,
            margin: EdgeInsets.only(top: 20),
            child: GridView.count(
              padding: EdgeInsets.all(0),
              childAspectRatio: 0.8,
              crossAxisSpacing: 20,
              mainAxisSpacing: 20,
              children: <Widget>[

              CategoryCard(
                title: "Profilo",
                numeroicona: 60307,
                numerocolore: 0xFF8c7ffd,
              ),
              CategoryCard(
                title: "Università",
                numeroicona: 58713,
                numerocolore: 0xffb08dff,
              ),
              CategoryCard(
                title: "Idee",
                numeroicona: 58235,
                numerocolore: 0xFF1a88ff,
              ),
              CategoryCard(
                title: "Progetti",
                numeroicona: 61080,
                numerocolore: 0xFF4b5982,
              ),

              

              ],
              crossAxisCount: 2),
          ),
            
        ),
          
          
      ],),
    ),

Try to wrap your ```Column``` with ```SliverFillRemaining``` and put everything inside ```CustomScrollView``` within ```silvers```, Ex ```CustomScrollView(silvers: [SliverFillRemaining(child:Column(..))])```, then you can use your ```Expanded``` inside the ```Column``` — ikerfah, Aug 18 '21 at 21:02
i failed to produce the error. as you commented `Ex`. im using `CustomScrollView >> SliverAppBar>` — Md. Yeasin Sheikh, Aug 18 '21 at 21:11
@YeasinSheikh It worked the way you suggest me, but i noticed that i can only scroll the Gridview widget. It doesn't let me scroll the widgets that appear before the gridview. To let you understand better i am uploading all the code here: https://github.com/manylittlestorms/FlutterProject/ — iocomxda, Aug 18 '21 at 21:37
@YeasinSheikh I probably didn't get what you meant then. Could you make a pull request, so i can see how should i merge your idea. Thank you for all the help — iocomxda, Aug 18 '21 at 21:59

score 0 · Accepted Answer · answered Aug 18 '21 at 22:01

0

Now it will scroll like this

I used SliverToBoxAdapter on Column, then replaced GridView with SliverGrid.count. I'm making pr to the repo. After checking, let me know this is what you wanted?

answered Aug 18 '21 at 22:01

Md. Yeasin Sheikh

54,221
7
29
56

Flutter SingleChildScrollView with a Column that has Expanded as a child

1 Answers1