Search code examples
flutterdartscrollcross-platformsinglechildscrollview

Flutter SingleChildScrollView with a Column that has Expanded as a child


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),
          ),
            
        ),
          
          
      ],),
    ),

Solution

  • Now it will scroll like this

    outPut

    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?