GRID VIEW IN FLUTTER Movie Ui Part 1

GRID VIEW IN FLUTTER

Before we reach to the interesting parts we going to start with the simple things in the app.

UNDERSTANDING THE CONCEPT

We are going to use one type of grid view in GridView.builder().

I like to think that GridView.builder() is sort of a custom grid view in android development.The requirement of creating are :

1. Model
2. Stateless Widget like a custom card

A Model holds the type of data is held.

A Stateless Widget shows how the data will be displayed.

Lastly the code its self.

Lets start now.

1. Create a a new dart file directly which will be a class.A model looks like this:

import 'package:flutter/cupertino.dart';

class ModelGrid {
  final String title;
  final String subtitle;
  final String ratings;
  final String logo_path;
  final String image_path;

  ModelGrid({@required this.title,@required this.subtitle,@required this.ratings,@required this.logo_path,@required this.image_path});
}

2. Create a stateless widget .

Now why do we use stateless widget instead of stateful.We can conform this from flutter cookbook.

Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself and the BuildContext in which the widget is inflated.

In few words stateless widgets are useful most when only showing the output.

Lets get in to the Code;

import 'package:fleva_icons/fleva_icons.dart';
import 'package:flutter/material.dart';
import 'package:movies/constants.dart';

class CardGrid extends StatelessWidget {

  final String title;
  final String rating;
  final String logo;
  final Function onPress;

  CardGrid({@required this.title,@required this.rating,@required this.logo, this.onPress});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GestureDetector(
        onTap: onPress,
        child: Container(
          width: double.infinity,
          height: 500,
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage(logo,),

            fit: BoxFit.cover),

            borderRadius: BorderRadius.all(Radius.circular(10)),

          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(child: SizedBox()),
              Padding(
                padding: const EdgeInsets.only(left: 4.0),
                child: Text(title, style: headStyle1),
              ),
                 Container(
                  height: 40,
                  width: 80,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Center(
                          child: Row(
                            children: <Widget>[
                              Icon(FlevaIcons.star_outline),
                              SizedBox(width: 10,),
                              Text(rating, style:       TextStyle(fontSize: 15,color: Colors.white),),
                            ],
                          )),
                    )),

            ],
          ),
        ),
      ),
    );
  }
}

If you look at the code carefully you will see we have declared some final variables.This will be a bit difficult explain but i will try.

Imagine you are creating your own type of widget that has a may be a text inside a container and may be a gesture detector to be able to press.With stateless widgets we can do this.

In the next part you will see how this us used;

3.Final Code

First lets add some data into our grid view,Now to add you can add inside where the gridview.

List<ModelGrid> home_items =[
  ModelGrid(title: "Jumanji 2", subtitle: "When Spencer goes back          into the fantastical world of Jumanji, pals Martha, Fridge and ", ratings: "6.0", 
logo_path: 'assets/images/movies/jumanji.jpg', 
image_path: 'assets/images/movies/jumanji.jpg'),
];

Inside your body you can do something;

Now lets display our data to the widget we created.Now when you declare the gridview return the CardGrid. I have bolded out the important parts.

body: Container(
        height: double.infinity,
        child: GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,),
            itemCount: home_items.length,
            itemBuilder: (BuildContext context,int index){
                 return CardGrid(
                     onPress: (){
                        
                     },
                     title: home_items[index].title,
                     rating: home_items[index].ratings,
                     logo: home_items[index].logo_path);
                   }
               ),
));

To understand more please try it on your own this is the best practice.