Skip to main content

Flutter Development (Day -07):
  • All source code : Click Here
  • Today we are going to talk more about lists and its types.
  • Lists are very important in any field like if we want to return large amount of data we can't assing every single value to a String variable and display it is a tedious task to do , but Flutter makes it easy for us just wrap the list in a ListView widget then it is ready.

    Types of Lists.

    1. Horizontal List
    2. Vertical List
    3. Grid List

Horizontal List:

  • Same as returning the ListView in previous tutorials just add a property scrollDirection:Axis.horizontal.

Vertical List:

  • We already discussed in our previous tutorials.

Grid List:
  • Sometimes you might want to display your items as a grid rather than a normal list of items that come one after the next. For this task, use the GridView widget.

Ex.

import 'Package:flutter/material.dart';
import 'package:random_color/random_color.dart';

class WorkingWithLists extends StatefulWidget {
  @override
  _WorkingWithListsState createState() => _WorkingWithListsState();
}

class _WorkingWithListsState extends State<WorkingWithLists> {
  RandomColor randomColor = RandomColor();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Working with Lists"),
        centerTitle: true,
        backgroundColor: RandomColor().randomColor(),
      ),
      body: GridView(
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
        scrollDirection: Axis.vertical,
        children: <Widget>[
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
          _showGrid(),
        ],
      ),
    );
  }

  Widget _showGrid() {
    return Container(
      margin: const EdgeInsets.all(2.0),
      color: RandomColor().randomColor(),
      child: Center(
        child: Text(
          "Grid",
          style: TextStyle(
              color: Colors.white, fontSize: 30.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

  • Here I used some extra stuff like returning a function instead typing again and again same code.
  • Used random_color: ^1.0.3 package to generate random colors.
  • Grid view is also a type of Scrollable widget.It requires a crossAxisCount which is nothing but it returns two 2 columns change the number and scrollDirection and see the magic.
  • For more info on any other widgets visit here.



Follow me on:
 Twitter  Github   LinkedIn

Comments

Post a Comment

Popular posts from this blog

Flutter Development (Day-00): This is the First Post from this Blog.This blog will tell you about Flutter.If you don't know about it then the upcoming posts will explain you everything.This is 30 day tutorial which explains about Flutter for absolute beginners. prerequsites:  If you are enthusiastic and Curious. All source code :  Click Here . If you are following this tutorial / blog please leave your opinion 👀 / say Hii ✋/ Your e-mail in the comment section that I can improve myself and it will gives boost for me to do more tutorials. If you have any doubts feel free to ask me in the comment section or email me ramubugudi4@gmail.com I can definetly give reply. Follow me on:   Twitter   Github     LinkedIn
5 comments
Read more
Flutter Development (Day-16): All source code :  Click Here . Sorry for the last two days I haven't posted anything because I am ready to leave my hometown to attend my college.Is there anyone from AndhraPradesh or Tamilnadu .If yes please provide your city name in the comment section. In this post we are going to proceed the next level of our todo app.We are going add animations to our app,Code clean Up and some UI changes. We add the animation to our FloationgActionButton.You may ask why you haven't add animations to others as well? I tried it but it is looking weird. Adding animations to  FloationgActionButton is very much similar to our previous basic animation tutorial. From the next we are going to deal with some of the important widgets which we will be using in further tutorials. If you are following this tutorial / blog please leave your opinion 👀 / say Hii ✋/ Your e-mail in the comment section that I can improve myself and it will gives boost for me to
4 comments
Read more
Flutter Development (Day-11): In the last post we have discussed about how to implement brand new Todo application. All source code :  Click Here . Building its User Interface. How to display the data. How to remove the items from the List by tapping the Delete Icon or by Swiping it. Showing which item is deleted in the form of SnackBar. And finally modify some UI stuff. If you want to copy the exact same code  click here . List _todos = []; First of all create a empty list which will be holding all of our Todo's. When we tap on the ADD button we have to perfom some operation see below.   _validateForm() {if (_key.currentState.validate()) {setState(() {_todos.add(_controller.text);});_controller.clear();Navigator.of(context).pop();}} Here we have used setState () in order to refresh every single time of changing the data in the TextField and then we add the text to _todos list. Then we clear the data in the TextField and go back to homeScreen .
2 comments
Read more