Navigating Screen Menggunakan Navigator Class – Part 3

Masih melanjutkan dari metoda pushNamed, kita perdalam cara penggunaan pushNamed dengan lebih baik.

Kita bisa deklarasikan route untuk home (root) dari aplikasi pada main.dart.

routes: {
  '/': (ctx) => CategoriesScr(),
  '/resep-by-cat': (ctx) => ResepByCat(),
},

Penggunaan ‘/’ adalah default untuk root. Anda bisa gunakan path lain, namun perlu dideklarasikan pada property initialRoute.

initialRoute: '/home',
routes: {
  '/home': (ctx) => CategoriesScr(),
  '/resep-by-cat': (ctx) => ResepByCat(),
},
onUnknownRoute: (setting) {
  return MaterialPageRoute(builder: (ctx) => CategoriesScr());
},

Menambahkan property onUnknowRoute juga suatu kebiasaan baik agar aplikasi tetap berjalan dengan baik walaupun terjadi routing yang tidak dikenal. Bila Anda terbiasa dengan web development, maka ini dapat disamakan sebagai 404 page.

Perbaikan berikutnya adalah, kita tidak perlu mengcopy manual penamaan path, akan lebih baik jika menggunakan static variable pada file resepbycat_scr.dart. Kemudian variable ini kita gunakan pada main.dart dan category_item.dart. Pada code digunakan variable routeNm.

//pada resepbycat_scr.dart
static const routeNm = '/resep-by-cat';



//pada main.dart
routes: {
  '/home': (ctx) => CategoriesScr(),
  ResepByCat.routeNm : (ctx) => ResepByCat(),
},



//pada category_item.dart
void catOnTap(BuildContext ctx) {
  Navigator.of(ctx)
      .pushNamed(ResepByCat.routeNm, arguments: {'id': id, 'title': title});
}

Berikut code lengkap dari masing-masing file

//main.dart

import 'package:flutter/material.dart';

import './widgets/categories_scr.dart';
import './widgets/resepbycat_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(),
      initialRoute: '/home',
      routes: {
        '/home': (ctx) => CategoriesScr(),
        ResepByCat.routeNm : (ctx) => ResepByCat(),
      },
    );
  }
}

//resepbycart_scr.dart

import 'package:flutter/material.dart';

class ResepByCat extends StatelessWidget {
  static const routeNm = '/resep-by-cat';

  @override
  Widget build(BuildContext context) {
    final routeParam =
        ModalRoute.of(context).settings.arguments as Map<String, String>;
    //final catid = routeParam['id'];
    final catnm = routeParam['title'];

    return Scaffold(
      appBar: AppBar(
        title: Text(catnm),
      ),
      body: Center(
        child: Text('Resep By Category'),
      ),
    );
  }
}

//category_item.dart

import './resepbycat_scr.dart';
import 'package:flutter/material.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)
        .pushNamed(ResepByCat.routeNm, arguments: {'id': id, 'title': 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),
        ),
      ),
    );
  }
}

Dengan pendekatan ini, kita dapat mencegah error typing.

Perhatian, penggunaan nama file membantu kita memahami isi file. Contoh resepbycat_scr.dart dan categories_src.dart, penggunaan src menunjukan ini adalah file untuk menampilkan screen atau page.

Sementara category_item.dart adalah file custom widget, bukan untuk menampilkan screen, tetapi widget tertentu, dalam hal ini item dari kategori.