🚀 Mengenal Navigation dan Routing di Flutter! 📱✨

Navigasi dan routing adalah aspek penting dalam pengembangan aplikasi Flutter untuk berpindah antar halaman atau skenario tertentu dalam aplikasi. Flutter menyediakan beberapa cara untuk mengelola navigasi, termasuk Direct Navigation, Named Routes, dan menggunakan package pihak ketiga seperti GoRouter.

1. Named Route vs Direct Navigation

a. Direct Navigation (Push and Pop)

Direct Navigation menggunakan metode Navigator.push() dan Navigator.pop() untuk berpindah antar halaman. Ini sering digunakan untuk navigasi sederhana.

Contoh penggunaan Direct Navigation:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

b. Named Route

Named Route memberikan cara yang lebih terorganisir dengan mendefinisikan rute di MaterialApp.

Contoh Named Route:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomePage(),
      '/second': (context) => SecondPage(),
    },
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

2. Deep Linking dan Dynamic Routes

Deep Linking memungkinkan pengguna untuk membuka halaman tertentu dalam aplikasi menggunakan URL. Ini bisa diterapkan menggunakan onGenerateRoute.

Contoh Dynamic Routes dengan onGenerateRoute:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    onGenerateRoute: (settings) {
      if (settings.name == '/detail') {
        final args = settings.arguments as String;
        return MaterialPageRoute(
          builder: (context) => DetailPage(data: args),
        );
      }
      return MaterialPageRoute(builder: (context) => HomePage());
    },
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/detail', arguments: 'Hello from Home!');
          },
          child: Text('Go to Detail Page'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final String data;
  DetailPage({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(child: Text(data)),
    );
  }
}

3. Navigation dengan GoRouter

GoRouter adalah package yang memudahkan navigasi dengan fitur seperti declarative routing dan deep linking.

Tambahkan dependensi dalam pubspec.yaml:

dependencies:
  go_router: ^10.0.0

Implementasi GoRouter:

import 'package:flutter/material.dart';

import 'package:go_router/go_router.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  final GoRouter _router = GoRouter(

    routes: [

      GoRoute(

        path: '/',

        builder: (context, state) => HomePage(),

      ),

      GoRoute(

        path: '/detail/:message',

        builder: (context, state) {

          final message = state.pathParameters['message']!;

          return DetailPage(message: message);

        },

      ),

    ],

  );

  @override

  Widget build(BuildContext context) {

    return MaterialApp.router(

      routerConfig: _router,

    );

  }

}

class HomePage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Home')),

      body: Center(

        child: ElevatedButton(

          onPressed: () {

            context.go('/detail/Hello%20from%20Home!');

          },

          child: Text('Go to Detail Page'),

        ),

      ),

    );

  }

}

class DetailPage extends StatelessWidget {

  final String message;

  DetailPage({required this.message});

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Detail Page')),

      body: Center(child: Text(message)),

    );

  }

} 

Kesimpulan

Flutter menawarkan berbagai cara untuk navigasi:

Direct Navigation cocok untuk navigasi sederhana.
Named Route lebih terstruktur dan mudah dikelola.
Deep Linking dan Dynamic Routes memudahkan navigasi berbasis parameter.
GoRouter menyederhanakan navigasi dengan fitur deklaratif dan deep linking.

Dengan pemahaman ini, Anda dapat memilih metode yang paling sesuai untuk proyek Kalian!