Sử dụng GridView để hiển thị danh sách trong Flutter

Mục đích cho bài thực hành này là sử dụng GridView để hiển thị danh sách các loại món ăn trong một thực đơn.

Bước 1: Tạo một đối tượng Categories để chứa các thông tin của.

import 'package:flutter/material.dart';

class Categories {
  final int id;
  final String nameOfCat;
  final Color color;

  Categories({
    @required this.id,
    @required this.nameOfCat,
    this.color});
}

Bước 2: Tạo ra một số dữ liệu kiểu Mãng với đối tượng trên.

import 'package:flutter/material.dart';
import './Modules/categories.dart';

var fakeCategories = [
  Categories(id: 1, nameOfCat: 'Món ăn Việt', color: Colors.blue ),
  Categories(id: 2, nameOfCat: 'Món ăn Nhật', color: Colors.red),
  Categories(id: 3, nameOfCat: 'Món ăn Hàn', color: Colors.green),
  Categories(id: 4, nameOfCat: 'Món ăn Trung', color:Colors.blue),
  Categories(id: 5, nameOfCat: 'Món ăn Ý', color: Colors.amber),
  Categories(id: 6, nameOfCat: 'Món ăn Pháp', color: Colors.deepPurpleAccent),
  Categories(id: 7, nameOfCat: 'Món ăn Đức', color:Colors.indigo ),
  Categories(id: 8, nameOfCat: 'Món cay Thái', color: Colors.lime),
  Categories(id: 9, nameOfCat: 'Ẩm thực chay', color: Colors.greenAccent),
  Categories(id: 10, nameOfCat: 'Ẩm thực Miền Bắc', color:Colors.green ),
  Categories(id: 11, nameOfCat: 'Ẩm thực miền Trung', color: Colors.orange),
  Categories(id: 12, nameOfCat: 'Ẩm thực Miền Nam', color: Colors.indigo),
];

Bước 3: Định nghĩa các hiển thị 1 Category trên giao diện

import 'package:flutter/material.dart';
import './Modules/categories.dart';

class CategoryItem extends StatelessWidget {
  Categories category;
  CategoryItem({this.category});
  // Color _color = this.category.color;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
        Text(this.category.nameOfCat,style: TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.bold,
          color: Colors.white
        ),)
      ],),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        color: this.category.color,
      ),
    );
  }
}

Bước 4: Đưa các Category ở trên vào GridView

import 'package:flutter/material.dart';
import 'fakelistofcategories.dart';
import 'category_item.dart';

class CategoryView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Container(
        padding: EdgeInsets.all(10),
        decoration:  BoxDecoration(
          borderRadius: BorderRadius.circular(10)
        ),
        child: GridView(
          children: fakeCategories.map((eachCategory) => CategoryItem(category: eachCategory,)).toList(),
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 300,
            childAspectRatio: 4/2.5,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
        ),
      )
    );
  }
}

Bước cuối: Trong MyApp đưa GridView vào:

import 'package:flutter/material.dart';
import 'category_view.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Food App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(

        appBar: AppBar(
          title: Text('Food Menu'),
        ),
        body: SafeArea(
          child: CategoryView(),
        )


      ),
    );
  }
}