How to add 'Raised button' just below the gridview?

Question

I am making an App named Picfolio in which i require multiple screens,For that i have to add a raised button below the gridview which i am unable to add.How to add raised button in the second screen below the gridview so that on pressing it, i will be taken to the third screen.

link of the code

score 1 · Accepted Answer · answered Dec 18 '20 at 09:31

You need to use Expanded widget in Column widget. Just add Column widget and add you GridView with wrapping of Expanded widget and add Raised Button Just Like below. Replace your body part from SecondScreen class with below code.

                      body: Column(
                      children: [
                        Expanded(
                          child: GridView.count(
                            crossAxisCount: 3,
                            crossAxisSpacing: 4.0,
                            mainAxisSpacing: 8.0,
                            children: <Widget>[
                              Image.network("https://lh3.googleusercontent.com/proxy/rnQUFF9vdy469uF5IWs5wbBgL4CeHhqNC5ZD3jYxlPYLf2rVYp_SvThcsoSQ1UbRcZspDRg3VD30ynyt2JTuY0JiXsyNoaXVL8DwfiliaXUbnI9BIyg"),
                              Image.network("https://earthsky.org/upl/2019/04/bluejay-e1554247141817.jpg"),
                              Image.network("https://mcmscache.epapr.in/post_images/website_350/post_16094749/full.jpg"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsX7D4Bn3S5lUX6uhXBO1qeu7pvOKLv0npCQ&usqp=CAU"),
                              Image.network("https://s.w-x.co/util/image/w/in-birdspecies.jpg?v=ap&w=980&h=551"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCh5nn0Pd4SiznJazjbkmy9bqcySX3h30adg&usqp=CAU"),
                              Image.network("https://www.galveston.com/wp-content/uploads/2019/12/Flock-of-Birds-Taking-Flight-992.jpg"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSG_m9D1JRtm763Aw1sBbSxQJLlZiBdxt8yag&usqp=CAU"),
                              Image.network("https://english.mathrubhumi.com/polopoly_fs/1.2783625.1525320130!/image/image.jpg_gen/derivatives/landscape_894_577/image.jpg"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQohIWUXQnoVAmRrAYL0gbRowatt4DSDOl4zQ&usqp=CAU"),
                              Image.network("https://9b16f79ca967fd0708d1-2713572fef44aa49ec323e813b06d2d9.ssl.cf2.rackcdn.com/1140x_a10-7_cTC/Audubon-wood-thrush-global-warming-birds-1570816207.jpg"),
                              Image.network("https://www.straitstimes.com/sites/default/files/styles/article_pictrure_780x520_/public/articles/2020/02/20/nz_bustard_200259.jpg?itok=Vo5eW3Fs&timestamp=1582179579"),
                              Image.network("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8sN97RzSkOEBZrmunFMvNPlF-cq2niG8yxw&usqp=CAU"),
                            ],
                          ),
                        ),
                        RaisedButton(
                          child: Text("Next"),
                          onPressed: (){
                            // Your navigator code
                          },
                          color: Colors.red,
                          textColor: Colors.yellow,
                          padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                          splashColor: Colors.grey,
                        ),
                      ],
                    )

@VasavChaturvedi , If this worked for you, please kindly mark it as the correct answer for this question :) — Shubham Narkhede, Dec 21 '20 at 04:45
I appreciate, could u tell me what interview questions i have to prepare for Freshers in Flutter sdk? — Vasav Chaturvedi, Dec 22 '20 at 10:44

score 1 · Answer 2 · answered Dec 18 '20 at 09:37

Use bottomSheet props:


class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
// you can use bottomSheet prop to add the Rasised button at the bottom: 
      bottomSheet: Container(
        width: double.infinity,
        child: RaisedButton(
          color: Colors.red,
          child: Text("Bottom Button"),
          onPressed: () {},
        ),
      ),
//--------------------------------------------------//
      appBar: AppBar(
        title: Text("Bird Species"),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: <Color>[
                Colors.yellowAccent,

How to add 'Raised button' just below the gridview?

2 Answers2