Search code examples
android-studioflutterflutter-layoutflutter-design

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


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. This is the image of  second screen where just below the gridview i want to add raised button.

link of the code


Solution

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