How to Switch View from ListView to GridView in Flutter

Hello everyone, back again at sahretech. This time I will share a tutorial about flutter that is no less exciting, so this time we will discuss how to switch/switch the display from a list layout to a grid layout and vice versa. Curious?, let's follow the tutorial below.

 

Both Listview and GridView are widgets provided by flutter to create a list view that can be scrolled up and down. Ok, this tutorial is a little tricky. We only play a little setState in the stateful widget, that state change is what we use to change the screen display from a list view to a grid view, and vice versa. So we don't need to create two different pages to display two views. It is hoped that this exercise can provide an overview to create a more dynamic application display in the future.

Easy Ways to Change Views from List to Grid

1. Open visual studio code, then create a new project. Press ctrl + shift + P at the same time → select flutter new project → name the project "flutter_switch_view".

2. Create a new file in the lib folder, named data.dart. Then fill the file with the script below.

    

List data = [
    {
      "title": "Lorem Ipsum Sit Dolor Amet",
      "desc": "Lorem Ipsum Sit Dolor Amet",
      "image": "https://cdn.pixabay.com/photo/2018/03/17/20/51/white-buildings-3235135__340.jpg"
    },
    {
      "title": "Lorem Ipsum Sit Dolor Amet",
      "desc": "Lorem Ipsum Sit Dolor Amet", 
      "image": "https://cdn.pixabay.com/photo/2018/03/17/20/51/white-buildings-3235135__340.jpg"
    }
];

3. Open the main.dart file, then replace the contents in it with the script below. For explanatory information, you can check in the script and in the explanatory table. For those who are still confused, you can ask directly in the comments column below this post.

    


    // ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables

    import 'package:flutter/material.dart';
    import 'data.dart';
    
    void main() {
      runApp(MaterialApp(
        //hide debug banner
        debugShowCheckedModeBanner: false,
        title: "Switch Grid to List",
        home: MyApp(),
      ));
    }
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      var status = 0;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text("App News"),
              actions: [
                IconButton(
                  //if 0 then display icon list if other than zero display icon grid
                  icon: status == 0 ? Icon(Icons.list) : Icon(Icons.grid_view),
                  tooltip: 'Open shopping cart',
                  onPressed: () {
                    //required to add state,
                    //setstate is used to change the state,
                    //when the status variable is changed, the whole page will be re-rendered automatically
                    setState(() {
                      if (status == 0) {
                        status = 1;
                      } else {
                        status = 0;
                      }
                    });
                  },
                ),
              ],
            ),
            // if status 0 then show lisview if status other than 0 show grid view
            body: status == 0
                ? ListView.builder(
                    itemBuilder: (context, index) {
                      return ListTile(
                        leading: Image.network(data[index]['image']),
                        title: Text(data[index]['title']),
                        subtitle: Text(data[index]['desc']),
                        trailing: Icon(Icons.bookmark),
                      );
                    },
                    itemCount: data.length,
                  )
                : GridView.builder(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemBuilder: (_, index) {
                      return Padding(
                        padding: const EdgeInsets.only(top: 10),
                        child: Card(
                          //add shadow
                          elevation: 5,
                          child: Column(
                            children: [
                              Container(
                                height: 100,
                                decoration: BoxDecoration(
                                    image: DecorationImage(
                                        image: NetworkImage(
                                          data[index]['image'],
                                        ),
                                        fit: BoxFit.cover)),
                              ),
                              ListTile(
                                title: Text(data[index]['title']),
                                subtitle: Text(data[index]['desc']),
                                trailing: Icon(Icons.bookmark),
                              )
                            ],
                          ),
                        ),
                      );
                    },
                    itemCount: data.length));
      }
    }

Tabel Penjelas 

#	Syntax/Script	Keterangan
1	debugShowCheckedModeBanner: false,	hide debug banner
2	icon: status == 0 ? Icon(Icons.list) : Icon(Icons.grid_view),	Make a condition, where if var status is 0 then display icon list and if status is 1 then display icon grid
3	setState(() { if (status == 0) { status = 1; } else { status = 0; } });	Setstate is used to change state. We will change the status variable to 0 or 1. In addition to changing the variable, when setState() is executed, the entire page will be re-rendered.
4	Elevation: 5	Adding a shadow to the card
5	itemCount: data.length	itemCount is a parameter of the list view and grid view, used to set the total data to be displayed. The total data that we want to display is according to the data list that we created in the data.dart file

 

3. OK, pretty simple. We have gone through all the processes, then we just have to try it out. Run your emulator. If successful, it will look like the image below.

Final Result

Cool!, now you can create different views using flutter's setState(). You can improvise again in this exercise by adding fire data to make the application that is built more lively.

That's all from me, this tutorial is about how to switch or change the view from listview to gridview and vice versa, hopefully it's useful. If there is a problem, immediately ask in the comments column. That's all, thank you and see you in another cool tutorial.