Navigating Screen Menggunakan Navigator Class – Part 2

Jika aplikasi yang dikembangkan memiliki banyak screen. Menggunakan metoda push akan cukup sulit dalam melakukan maintenance, karena kita tidak memiliki gambaran gamblang navigasi aplikasi.

Untuk itu, dapat digunakan metoda pushNamed. Metoda ini memungkinkan kita melihat route dari aplikasi kita dengan jelas.

Pertama kita deklarasikan route pada main.dart, penamaan string route bebas, yang penting dapat dipahami.

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

Berikut isi lengkap 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(),
      routes: {
        '/resep-by-cat': (ctx) => ResepByCat(),
      },
    );
  }
}

Berikutnya pada file category_item.dart, kita gunakan metoda pushNamed. String route yang digunakan harus sama dengan yang kita definisikan di main.dart.

Untuk passing argument yang akan digunakan pada screen selanjutnya, gunakan property arguments.

void catOnTap(BuildContext ctx) {
  Navigator.of(ctx)
      .pushNamed('/resep-by-cat', arguments: {'id': id, 'title': title});
}

Berikut isi lengkap file category_item.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('/resep-by-cat', 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),
        ),
      ),
    );
  }
}

Pada file resepbycat_scr.dart, argument yang dipassing diekstrak dengan cara berikut. Perhatian, catid dicomment karena belum digunakan pada tutorial ini.

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

Berikut isi lengkap file resepbycat_scr.dart

import 'package:flutter/material.dart';

class ResepByCat extends StatelessWidget {
  @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'),
      ),
    );
  }
}