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

Answer 1

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

Answer 2

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,