Flutter Tutorial

gridview in flutter with image and text

gridview in flutter with image and text

Hi flutter in this example i am making a project using flutter gridview.builder and showing a list of data on the screen with grid view. In gridview flutter, I am showing 2 items in a row, and for each item I am using an image and text in side of card view.

Grid views are visual control elements that can be employed to display items in a tabular format. In this article we will find out how to render things using a grid view inside The Flutter app.

GridView widget that is part of Flutter which displays elements in a 2D grid (two-dimensional columns and rows). The name implies that it is utilized to display the items of a Grid. You can choose the item we want from the grid’s list by pressing the grid.

The widget may be made up of images, text icons or other items. to display on a grid in accordance with the requirements of the user. It is also known as a scrollable two-dimensional collection of widgets. Because it’s scrollable, it is possible to specify the direction within which it scrolls.

GridView.count()

The most commonly employed grid design used in Flutter because we have the grid’s dimensions. Developers can define the exact number of columns and rows. It is a function called GriedView.count(). GriedView.count() includes these properties:

crossAxisCount It’s used to define the number of columns that can be found in the grid view.

crossAxisSpacing It’s used to indicate the amount of pixels that are between each widget’s child on the cross axis.

mainAxisSpacing It’s used to indicate the amount of pixels between every child widget that is listed on the primary axis.

padding(EdgeInsetsGeometry): It is used to specify the space around the whole list of widgets.

ScrollDirection This is used in order to indicate the direction that GridView’s items scroll. In default, it scrolls in the vertical direction.

reverse In the event that it’s true, it will flip it’s list, but in opposite directions, along an axis that is the primary one.

Physics: It is used to determine the behavior of the list when the user gets to the point where they have reached the end of the list or the beginning of the widget as they scroll.

shrinkWrap In the event that it’s not true, the scrollable list will take up more space to scroll in the direction of scrolling. This isn’t a good thing since it wastes memory and can affect the performance of apps. We will therefore wrap our widgets for children with shrinkWrap, setting it to true, to prevent the leakage of memory while scrolling.

gridview flutter with image and text  Souce code

import 'dart:math';

import 'package:flutter/material.dart';
import '../../Utils/constants.dart';

class ServiceScreenView extends StatefulWidget {
  

  @override
  _ServiceScreenViewState createState() => _ServiceScreenViewState();
}

class _ServiceScreenViewState extends State<ServiceScreenView> {

  List<GridListItems> items = [
    GridListItems(title: 'Alexa', icon: "assets/images/alexa.png"),
    GridListItems(title:'FAQ', icon: "assets/images/faq.png"),
    GridListItems(title: 'Smart Watch', icon: "assets/images/watch.png"),
    GridListItems(title: 'CallBack Request', icon: "assets/images/callback.png"),
    GridListItems(title: 'Google Assistant', icon: "assets/images/google_assest.png"),
    GridListItems(title: 'Contact us', icon: "assets/images/contact_us.png"),
  ];

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery
        .of(context)
        .size;

    return Scaffold(
      backgroundColor: COLOR_BACKGROUND,
      body: Container(
        width: size.width,
        height: size.height,
        // color: COLOR_WHITE,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              padding: EdgeInsets.fromLTRB(20, 62, 20, 0),
              width: size.width,
              child: Card(
                color: COLOR_THEME,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                child: Padding(
                  padding: EdgeInsets.all(15),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Stack(
                        alignment: Alignment.bottomLeft,
                        children:[
                          Container(
                            alignment: Alignment.centerRight,
                            child:Padding(
                              padding: EdgeInsets.fromLTRB(0, 15, 0, 0),
                              child: Image.asset(
                                "assets/images/service_banner.png",
                              ),
                            ),
                          ),
                          Text("Diet plan",style: TextStyle(color: Colors.white),)
                        ]
                      ),


                    ],
                  ),
                ),
              ),
            ),
            Expanded(
              child:  Padding(
                padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
                child: GridView.custom(
                    padding: EdgeInsets.all(10.0),
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: (1.3 / 1),
                      crossAxisSpacing: 5,
                      mainAxisSpacing: 5,
                    ),
                    childrenDelegate: SliverChildListDelegate(
                      items.map((data) =>
                          GestureDetector(
                            onTap: (){
                              var index = items.indexOf(data);
                              if(index==0){

                              }else if(index==1){

                              }else if (index==2){

                              }else if (index==3){
                               
                              }else if (index==4){

                              }else if (index==5){
                               
                              }
                            },

                              child: Card(
                                color: Colors.white,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10.0),
                                ),
                                child: Padding(
                                  padding: EdgeInsets.all(10),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                    children: [
                                      Image.asset(data.icon,height: 60,width: 60,),
                                      SizedBox(
                                        height: 5,
                                      ),
                                      Row(
                                        children: [
                                          Expanded(
                                            child: Padding(
                                              padding: EdgeInsets.fromLTRB(5, 0, 0, 5),
                                              child: Text(
                                                data.title,style: TextStyle(color: Colors.black, fontWeight: FontWeight.w400, fontSize: fontsize14),
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                              )
                          ),
                      ).toList(),
                    )
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class GridListItems {
  String title;
  String icon;

  GridListItems({
    required this.title,
    required this.icon,
  });

  factory GridListItems.initial() {
    return GridListItems(
      title: "",
      icon: "assets/images/alexa.png",
    );
  }

}

gridview in flutter with image and text With Multiple color

flutter gridview with multiple card background color example screen source code.

import 'dart:math';

import 'package:flutter/material.dart';
import '../../../Utils/constants.dart';
import '../../Custom/BorderBox.dart';

class LiveStatusView extends StatefulWidget {

  @override
  _LiveStatusViewState createState() => _LiveStatusViewState();

}

class _LiveStatusViewState extends State<LiveStatusView> {

  List<GridListItems> items = [
    GridListItems(color:Colors.green[300],title: 'Bicycle', icon: Icons.directions_bike),
    GridListItems(color:Colors.pink[300],title:'Boat', icon: Icons.directions_boat),
    GridListItems(color:Colors.pink[300],title: 'Bus', icon: Icons.directions_bus),
    GridListItems(color:Colors.pink[300],title: 'Train', icon: Icons.directions_railway),
    GridListItems(color:Colors.pink[300],title: 'Walk', icon: Icons.directions_walk),
    GridListItems(color:Colors.pink[300],title: 'Contact', icon: Icons.contact_mail),
    GridListItems(color:Colors.green,title: 'Bicycle', icon: Icons.directions_bike),
  ];

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery
        .of(context)
        .size;
    final ThemeData themeData = Theme.of(context);

    return Scaffold(
      backgroundColor: COLOR_BACKGROUND,
      body: SingleChildScrollView(
        child: Container(
          width: size.width,
          height: size.height,
          // color: COLOR_WHITE,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                padding: EdgeInsets.fromLTRB(20, 62, 20, 0),
                child: Column(
                  children: [
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          BorderBox(
                            child: Icon(Icons.arrow_back_ios_new),
                            // Image.asset('assets/images/frame_green_logo.png'),
                            width: 44,
                            height: 44,
                            isAction: 1,
                            tabHandler: () {
                              Navigator.pop(context);
                            },
                          ),
                        ]),
                    SizedBox(
                      height: size.height * 0.06,
                    ),
                    Row(
                      children: [
                        Text(
                          "Live Status",
                          style: themeData.textTheme.headline1,
                          // textAlign: TextAlign.left,
                        ),
                      ],
                    ),
                    SizedBox(
                      height: size.height * 0.04,
                    ),
                    Row(
                      children: [
                        Text(
                          "Charger 1",
                            style: themeData.textTheme.headline5,
                          // textAlign: TextAlign.left,
                        ),
                      ],
                    ),
                  ],
                ),
              ),
             Expanded(
               child:  Padding(
                 padding: EdgeInsets.fromLTRB(15, 0, 15, 0),
             //     child: GridView.count(
             //     crossAxisCount: 2,
             //     children: new List<Widget>.generate(10, (index) {
             //       return new GridTile(
             //         child: new Card(
             //             color: Colors.green.shade200,
             //             child:Column(
             //               crossAxisAlignment: CrossAxisAlignment.center,
             //               children:[
             //                 Text('tile $index'),
             //                 Row(
             //                   children: [
             //                     Icon(Icons.ice_skating),
             //                     Text("data")
             //                   ],
             //                 )
             //               ]
             //
             //             )
             //         ),
             //       );
             //     }),
             // ),
                 child: GridView.custom(
                     padding: EdgeInsets.all(10.0),
                     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                       crossAxisCount: 2,
                       childAspectRatio: (1.5 / 1),
                       crossAxisSpacing: 5,
                       mainAxisSpacing: 5,
                     ),
                     childrenDelegate: SliverChildListDelegate(
                       items.map((data) =>
                           GestureDetector(
                               child: Card(
                                 color: RandomColorModel().getColor(),
                                 child: Padding(
                                   padding: EdgeInsets.all(15),
                                   child: Column(
                                     children: [
                                       Row(
                                         children: [
                                           Text("13 ",style: TextStyle(color: Colors.white, fontWeight: FontWeight.w600, fontSize: fontsize22),),
                                           Text("Hrs",style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: fontsize16),)
                                         ],
                                       ),
                                       SizedBox(
                                         height: 25,
                                       ),
                                       Row(
                                         children: [
                                           Icon(data.icon,color: Colors.white,),
                                           SizedBox(
                                             width: 10,
                                           ),
                                           Text(data.title,
                                               style: TextStyle(fontSize: 22, color: Colors.white),
                                               textAlign: TextAlign.center)
                                         ],
                                       )

                                     ],
                                   ),
                                 ),
                               )),

                       ).toList(),
                     )),
               ),
             )
            ],
          ),
        ),
      ),
    );
  }
}

class GridListItems {
  Color? color;
  String title;
  IconData icon;

  GridListItems({
    required this.color,
    required this.title,
    required this.icon,
  });

  factory GridListItems.initial() {
    return GridListItems(
      color: Colors.green,
      title: "",
      icon: Icons.directions_bike,
    );
  }

}

class RandomColorModel {
  Random random = Random();
  Color getColor() {
    return Color.fromARGB(random.nextInt(300), random.nextInt(300),
        random.nextInt(300), random.nextInt(300));
  }
}

 

 

Read More:-