Flutter GridView Example – In this article I have explained how to implement Flutter Grid View example in android using Dart programming language. In every app we need grid format in some places like list of user address details, contact numbers, qualification, salary, designation etc. So in that time we applied grid design layout in our project.
All of the programming language we need this concept for implement on next level. Here I developed attractive UI design layout of grid with hover animation effects. Everybody like this effect because it’s very attractive looks.
Apart from this article you can earn money online without any investment from home. The Job is very easy like Watch Video & Earn $5 per Day. It’s very helpful for your primary income.
Create Project
Okay let’s start our project to build simple grid layout. Alternate options also available that’s not looks like grid format. So it’s recommended view for most of developers. In below I give one simple official example for dart grid orders. We can change both of vertical and horizontal view formats.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Grid List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: GridView.count(
// Create a grid with 2 columns. If you change the scrollDirection to
// horizontal, this produces 2 rows.
crossAxisCount: 2,
// Generate 100 widgets that display their index in the List.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: Theme.of(context).textTheme.headline5,
),
);
}),
),
),
);
}
}Screenshot of Output
Flutter GridView Example
Above example is just basic of grid concept. But in below I have develop the attract look design of gridview implementation. In java we manually work external libraries for to do that but here we can easily call automatic widgets.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage()
)
);
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final List<String> _listItem = [
'assets/images/two.jpg',
'assets/images/three.jpg',
'assets/images/four.jpg',
'assets/images/five.jpg',
'assets/images/one.jpg',
'assets/images/two.jpg',
'assets/images/three.jpg',
'assets/images/four.jpg',
'assets/images/five.jpg',
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[600],
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: Icon(Icons.menu),
title: Text("Home"),
actions: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
child: Container(
width: 36,
height: 30,
decoration: BoxDecoration(
color: Colors.grey[800],
borderRadius: BorderRadius.circular(10)
),
child: Center(child: Text("0")),
),
)
],
),
body: SafeArea(
child: Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
Container(
width: double.infinity,
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage('assets/images/one.jpg'),
fit: BoxFit.cover
)
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
gradient: LinearGradient(
begin: Alignment.bottomRight,
colors: [
Colors.black.withOpacity(.4),
Colors.black.withOpacity(.2),
]
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text("Lifestyle Sale", style: TextStyle(color: Colors.white, fontSize: 35, fontWeight: FontWeight.bold),),
SizedBox(height: 30,),
Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 40),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white
),
child: Center(child: Text("Shop Now", style: TextStyle(color: Colors.grey[900], fontWeight: FontWeight.bold),)),
),
SizedBox(height: 30,),
],
),
),
),
SizedBox(height: 20,),
Expanded(
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: _listItem.map((item) => Card(
color: Colors.transparent,
elevation: 0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(item),
fit: BoxFit.cover
)
),
child: Transform.translate(
offset: Offset(50, -50),
child: Container(
margin: EdgeInsets.symmetric(horizontal: 65, vertical: 63),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white
),
child: Icon(Icons.bookmark_border, size: 15,),
),
),
),
)).toList(),
)
)
],
),
),
),
);
}
}
Download Source Code
Okay fine get full free source code of flutter dart grid view example step by step procedure with official example & material design layout. If face any difficult just comment below I will try to fix your bug within a days. If you want to learn flutter course online, mail me on jjvetri2@gmail.com.
Want to read our other popular articles?