Flutter 7.1 - Navigating to a new page, GridView, Pass data by routes, Pop data

 1, Grid view:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('DeliMeal'),
    ),
    body: GridView(
      // cross ngang, main dọc. Nếu có quá nhiều item thì dùng GridView.buider sẽ tối ưu performance hơn
      children: DUMMY_CATEGORIES
          .map((catData) => CategoriesItem(
                catData.title,
                catData.color,
              ))
          .toList(),
      padding: const EdgeInsets.all(20),
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        // xác định chiều rộng tối đa của gridview
        maxCrossAxisExtent: 200, // chiều rộng tối đa của 1 item
        childAspectRatio: 3 / 2, // tỉ lệ 2 cạnh item
        crossAxisSpacing: 20, // khoảng cách giữa các item theo chiều ngang
        mainAxisSpacing: 20, // khoảng cách giữa các item theo chiều dọc
      ),
    ),
  );
}

2, Navigating to a new page:

- Page mới thêm vào stack luôn ở trên cùng stack

- Khi back lại thì page vừa back (page trên cùng stack) sẽ bị xóa khỏi stack

- Khi add thêm page đã có sẵn trong stack => page đó đc lôi trong stack ra và đưa lên đầu chứ ko add page mới.

Push: 

*push : new page vẫn giữ page cũ trong stack

pushReplacement: new page xóa page cũ trong stack

return InkWell( // cx có thể dùng GestureDetector - những cái này có sk onTap
  onTap: ()=>{
    _selectCategory(context),
  },
  splashColor: Theme.of(context).primaryColor, // màu gợn sóng khi ấn vào item
  borderRadius: BorderRadius.circular(15),

void _selectCategory(BuildContext context){
  Navigator.of(context).push(MaterialPageRoute(builder: (_){
    return CategoryMealsScreen();
  }),);
}

3, Pass data by routes

- Setup routes in main.dart

home: CategoriesScreen(),
routes: {
  '/category-meals': (context) => CategoryMealsScreen(),
},//

*routes đến màn home:

// home: CategoriesScreen(),
initialRoute: '/', // default is '/'
routes: {
  '/':(context) => CategoriesScreen(),
  '/category-meals': (context) => CategoryMealsScreen(),
},// set root screen

- Tại màn truyền data, sử dụng pushNamed để push data qua routes 

*pushNamed : new page by routes vẫn giữ page cũ trong stack

pushReplacementNamed: new page by routes xóa page cũ trong stack

onTap: () => {
  Navigator.of(context).pushNamed('/category-meals', arguments: {
    'id': id,
    'title': title,
  }),
},

- Tại màn nhận, nhận data bằng ModalRoute

final routeArgs = ModalRoute.of(context)!.settings.arguments as Map<String, String>;
final categoryTitle = routeArgs['title'];
final categoryId = routeArgs['id'];

* Nên define các routes ( /category-meals' ) =>

static const routeName ='/category-meals';

để ko bị nhầm lẫn lỗi typing.

* onGenerateRoute & onUnknownRoute:

onGenerateRoute : nếu 1 route name chưa đc đặt tên or sai tên thì sẽ trỏ tên route này:

Như ảnh trên, nếu 1 route ko thuộc name trong if else thì sẽ trỏ sang màn CategoriesScreen

onUnknownRoute : nếu 1 route name ko xác định thì sẽ nhảy vào func này. Giống như 1 trang báo lỗi 404 not found trong web.

4, Pop pass data

- Ở page back:

onPressed: () {
  Navigator.of(context).pop(mealId);
},

- Page đến nhận data = .then(){}

Navigator.of(context)
    .pushNamed(MealDetailScreen.routeName, arguments: id)
    .then((result) => {
      if(result != null){
        removeItem(result),
      }
});