Widgets or Items in the list and grid view Flutter

If we want to show items or widgets in a list view(Examples like list of timings ) , instead of writing them in static format we can write all the timings in a list and pass this to the row/column widgets and run it in a loop.

Example :

lets first create some data:

The data consists of a list of strings ( List<String> ).Actually we can write a list of timings directly

timings = ["5:00","5:15","5:30","5:45","6:00","6:15","6:30","6:45","7:00","7:15","7:30"]

in this way but in the real life applications we get data from the database so let us create a model and fake data in the same project and get the data in the Json format as follows

we have data in the list_data.dart and model in list_model.dart . we get the data when the page gets loaded

List<ListModel> timings;
@override
void initState() {
// TODO: implement initState
timings =
timingsMapList.map((x) => ListModel.fromJson(x)).toList();
super.initState();
}

timings consists for instances of ListModel .Now we can write listview by placing 3 time items in a row by using column and row widgets and we can use GridView and ListView widgets to get it done.(Refer : https://flutter.dev/docs/cookbook/lists/grid-lists)

1. Using GridView and ListView (Simple but not effective) :

Note : Am completing every thing in the main.dart but this is not the good approach.

if we use gridview widget it has it’s own flaws for responsiveness

this is for 450x750 pixel device

this look’s odd in 468x650 pixel device.

here is the sample code :

instead we write from basics with using rows and columns widgets

2.Using Columns and Rows (Lengthy way but effective 😜):

in this we can get rid of the fixed sized gird view as we are entering the buttons in the row .This is 450x750 pixel device

This is 468x650 pixel device :

Code :

in the above code

1. _button() widget returns a container with the time in it.
2. _rowbutton() places the _button() widgets in a row.
3. getraisedbuttons() reurns a column widget with children as a list of rowbuttons added.

in this i have used the datastructure as List<String> u can change that to List<double> and automate the timings too.

You can get full code here :

JAGDISH0008/flutter-medium

Note : if you can improve this I am ready to listen to you guys 🙂.

If you enjoyed reading this blog, please consider buying me a coffee to show your support. It would mean a lot to me and help me continue creating content that you love. https://www.buymeacoffee.com/jagadeeshmarali