How to put scroll view inside stack widget in flutter

Question

I am making a flutter application in which i uses body as a stack and in this stack i have two child.One is main body and other is back button which is at top of screen.The first child of stack is scrollview.Here is my build method.

  Widget build(BuildContext context) {

    return Scaffold(
      //debugShowCheckedModeBanner: false,
      key: scaffoldKey,
      backgroundColor: Color(0xFF5E68A6),

        body: Stack(
          children: <Widget>[
            Container(
              margin: const EdgeInsets.fromLTRB(0.0, 10.0  , 0.0 , 0.0 ),
              height: double.infinity,
              child:CustomScrollView(
                slivers: <Widget>[

                  new Container(
                    margin: EdgeInsets.all(15.0),
                    child:Text(getTitle(),
                      style: TextStyle(fontSize: 20.0,fontWeight: FontWeight.bold,color: Colors.white),
                    ),
                  ),


                  //middle section
                  _isLoading == false ?
                  new Expanded(child:  GridView.builder(
                      itemCount: sub_categories_list.length,
                      physics: const NeverScrollableScrollPhysics(),
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                      itemBuilder: (context, position){
                        return InkWell(
                          child: new Container(
                            //color: Colors.white,
                            padding: EdgeInsets.all(20),
                            margin: EdgeInsets.all(10),
                            height: 130,
                            width: 130,
                            child: new Center(
                                child :
                                Text(sub_categories_list[position].name,
                                  style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold),
                                )
                            ),
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.all(Radius.circular(16)),

// border: Border.all(color: Colors.black, width: 3),
                            ),
                          ),
                          onTap: () {
                            //write here
                            // Fluttertoast.showToast(msg: "You clicked id :"+sub_categories_list[position].cat_id.toString());
                            Navigator.pushNamed(context, '/advicemyself');


                          },
                        );

                      }

                  ))
                      :
                  CircularProgressIndicator(),


                  Container(

                    margin: EdgeInsets.all(18.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[

                        new Column(

                          children: <Widget>[
                            Image.asset('assets/bt1.png'),
                            Container(
                              margin: EdgeInsets.all(10.0),
                              child: Text("FIND HELP",
                                style: TextStyle(fontSize: 18.0,color: Colors.white),
                              ),
                            )
                          ],
                        ),
                        new Column(

                          children: <Widget>[
                            Image.asset('assets/bt2.png'),
                            Container(
                              margin: EdgeInsets.all(10.0),
                              child: Text("HOME",
                                style: TextStyle(fontSize: 18.0,color: Colors.white),
                              ),
                            )
                          ],
                        ),
                        new Column(
                          mainAxisAlignment:MainAxisAlignment.spaceEvenly,
                          children: <Widget>[

                            Image.asset('assets/bt3.png'),
                            Container(
                              margin: EdgeInsets.all(10.0),
                              child: Text("CALL 999",
                                style: TextStyle(fontSize: 18.0,color: Colors.white),
                              ),
                            )

                          ],
                        ),

                      ],
                    ),

                  ),
                ],
                      ),
            ),

            Positioned(
              left: 10,
              top: 30,
              child: IconButton(
                icon: Icon(Icons.arrow_back),
                onPressed: () => {
               //go back

                },
                color: Colors.white,
                iconSize: 30,
              ),
            ),
            //                                                                                                                makeview()
          ],
        ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
       }

I have also tried using SingleChildScrollView but that also does not works.What i am doing wrong here ? Here is link to the design which i want to make.

https://imgur.com/a/w7nLmKC

The back should be above scroll view so i used stack widget.

Answer 1

Running your sample code, there doesn't seem to be a need for overlapping widgets. Using Stack seems to be unnecessary. One way you could do is by using Column widget, and using Expanded as you see fit.

Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Widget(), // back button goes here
        CustomScrollView(...),
      ],
    ),
  );
}

Otherwise, if you really need to use Stack, the scroll function should work fine. I've tried this locally and the Stack widget doesn't interfere with scrolling of Slivers, ListView, and GridView.

Stack(
  children: [
    /// Can be GridView, Slivers
    ListView.builder(),
    /// Back button
    Container(),
  ],
),