Navigating Screen Menggunakan Navigator Class – Part 1

Pada tutorial kali ini kita akan membuat aplikasi resep makanan. Pada home screen akan ditampilkan category makanan atau minuman. Bila category dipilih, akan ditampilkan makanan berdasarkan category dengan summary singkat mengenai makanan tersebut.

Untuk navigasi antar screen, pada modul ini kita akan bahas menggunakan Navigator Class.

Isi file main.dart lebih ke mengatur ThemeData. Lalu kita tampilkan kategori dengan memanggil custom widget CategoryScr() yang kita buat di file category_scr.dart.

//main.dart

import 'package:flutter/material.dart';

import './widgets/categories_scr.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Buku Resep',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        accentColor: Colors.orangeAccent,
        canvasColor: Color.fromRGBO(255, 254, 229, 1),
        fontFamily: 'Raleway',
        textTheme: ThemeData.light().textTheme.copyWith(
              bodyText1: TextStyle(
                color: Color.fromRGBO(20, 51, 51, 1),
              ),
              headline1: TextStyle(
                fontSize: 18,
                fontFamily: 'RobotoCondensed',
                fontWeight: FontWeight.bold,
              ),
            ),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: CategoriesScr(),
    );
  }
}

File categories_src.dart akan berfungsi sebagai screen dan memanggil custom widget CategoryItem yang kita buat di category_item.dart. Data yang dipassing pada widget CategoryItem adalah data dummy yang kita buat di file dummy_data.dart.

//categories_src.dart

import 'package:flutter/material.dart';

import './category_item.dart';

import '../dummy_data.dart';

class CategoriesScr extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Buku Resep'),
      ),
      body: GridView(
        padding: EdgeInsets.all(15),
        children: DUMMY_CAT_DATA
            .map((e) => CategoryItem(e.id, e.title, e.color))
            .toList(),
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 200,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
        ),
      ),
    );
  }
}

File category_item.dart akan menampilkan kategori dari data yang dipasing dari category_scr.dart. Disini kita gunakan Class Navigator dari Flutter untuk melakukan navigasi antar screen.

Navigator akan memanggil screen yang akan menampilkan makanan berdasarkan category yang kita buat di widget ResepByCat yang dibuat pada file resepbycat_scr.dart.

Metoda yang digunakan adalah push(). Metoda ini cocok digunakan untuk aplikasi yang tidak terlalu banyak pergantian screen.

//category_item.dart

import 'package:flutter/material.dart';

import './resepbycat_scr.dart';

class CategoryItem extends StatelessWidget {
  final String id;
  final String title;
  final Color color;

  CategoryItem(this.id, this.title, this.color);

  void catOnTap(BuildContext ctx) {
    Navigator.of(ctx).push(
      MaterialPageRoute(
        builder: (_) {
          return ResepByCat(id, title);
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => catOnTap(context),
      splashColor: Theme.of(context).accentColor,
      borderRadius: BorderRadius.circular(10),
      child: Container(
        padding: EdgeInsets.all(10),
        child: Text(
          title,
          style: Theme.of(context).textTheme.headline1,
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [color.withOpacity(0.7), color],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    );
  }
}

Untuk saat ini file resepbycat_scr.dart hanya akan menampilkan text sederhana. Flutter akan menambahkan secara otomatis navigasi untuk back ke page sebelumnya pada pojok kiri atas.

//resepbycat_scr.dart

import 'package:flutter/material.dart';

class ResepByCat extends StatelessWidget {
  final String catid;
  final String catnm;

  ResepByCat(this.catid, this.catnm);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(catnm),
      ),
      body: Center(
        child: Text('Resep By Category'),
      ),
    );
  }
}

File dummy_data.dart akan berisi data dummy dari category. Ini dibuat untuk kemudahan tutorial agar tidak menjadi rumit karena harus menggunakan database.

import 'package:flutter/material.dart';

import 'package:flutter/material.dart';

import './models/category.dart';

const DUMMY_CAT_DATA = const [
  Category(
    id: 'c1',
    title: 'Italian',
    color: Colors.lightGreen,
  ),
  Category(
    id: 'c2',
    title: 'Quick & Easy',
    color: Colors.lightGreen,
  ),
  Category(
    id: 'c3',
    title: 'Light & Lovely',
    color: Colors.lightGreen,
  ),
  Category(
    id: 'c4',
    title: 'Breakfast',
    color: Colors.lightGreen,
  ),
  Category(
    id: 'c5',
    title: 'Asian',
    color: Colors.lightGreen,
  ),
  Category(
    id: 'c6',
    title: 'French',
    color: Colors.lightGreen,
  ),
  Category(
    id: 'c7',
    title: 'Coffee',
    color: Colors.black12,
  ),
  Category(
    id: 'c8',
    title: 'Spirit',
    color: Colors.lightBlueAccent,
  ),
];

Dummy data sendiri dibuat berdasarkan class Category yang kita buat di category.dart untuk mendefinisikan object category.

//category.dart

import 'package:flutter/material.dart';

class Category {
  final String id;
  final String title;
  final Color color;

  const Category(
      {@required this.id, @required this.title, this.color = Colors.orange});
}