Argumen dalam Named Route di Flutter

View Categories

Argumen dalam Named Route di Flutter

Untuk berpindah antar halaman di dalam aplikasi Flutter, Anda dapat menggunakan Navigator yang menggunakan pengenal yang sama. Kita bisa memberikan argumen ke dalam halaman-halaman ini dengan menggunakan parameter argumen pada fungsi Navigator.pushNamed. Kita bisa mengekstrak argumen tersebut dengan menggunakan fungsi ModalRoute.of atau fungsi onGenerateRoute.

Pada artikel ini, kita akan membahas cara mengekstrak argumen menggunakan fungsi ModalRoute.of. Hal ini akan dilakukan dengan mengimplementasikan kedua cara tersebut pada sebuah aplikasi sederhana. Untuk melakukannya, ikuti langkah-langkah di bawah ini:

  1. Desain argumen yang akan dilewatkan
  2. Buat widget yang akan mengekstrak argumen
  3. Tambahkan widget ke dalam tabel rute
  4. Berpindah ke widget tersebut

Kita akan membahas langkah-langkah di atas secara detail.

Mendesain Argumen

Di sini kita akan melewatkan satu set data tunggal sebagai argumen dengan merancang class ScreenArgument seperti berikut:

class ScreenArguments {
  final String titleBar;
  final String textMessage;

  ScreenArguments(this.titleBar, this.textMessage);
}

Membuat Sebuah Widget

Selanjutnya buatlah sebuah widget yang mengekstrak dan menampilkan titleBar serta textMessage dari class Argument, dan gunakan fungsi ModelRouteof untuk mengekstrak argumen seperti yang ditunjukkan di bawah ini:

class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  const ExtractArgumentsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final ScreenArguments? args =
        ModalRoute.of(context)?.settings.arguments as ScreenArguments?;

    return Scaffold(
      appBar: AppBar(
        title: Text(args?.titleBar ?? 'Tidak ada judul'),
      ),
      body: Center(
        child: Text(args?.textMessage ?? 'Tidak ada data'),
      ),
    );
  }
}

Menambahkan Widget

Untuk mendaftarkan widget yang baru dibuat ke dalam tabel rute gunakan langkah-langkah berikut:

MaterialApp(
  routes: {
    ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
  },
);

Transisi Perpindahan

Ketika tombol ditekan pada layar, akan terjadi transisi ke layar lain dan menampilkan pesan teks yang diekstrak dan bilah judul. Untuk melakukannya, gunakan langkah-langkah berikut:

ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.green),
              ),
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  ExtractArgumentsScreen.routeName,
                  arguments: ScreenArguments(
                    'Extract Arguments Screen',
                    'Extracted in the build method.',
                  ),
                );
              },
              child: const Text("Extracts arguments"),
            ),

Berikut ini source code lengkap setelah mengikuti tutorial di atas

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        onGenerateRoute: (settings) {
          if (settings.name == PassArgumentsScreen.routeName) {
            final ScreenArguments args = settings.arguments as ScreenArguments;
            return MaterialPageRoute(
              builder: (context) {
                return PassArgumentsScreen(
                  title: args.titleBar,
                  message: args.textMessage,
                );
              },
            );
          }
          assert(false, 'Implementation ${settings.name}');
          return null;
        },
        title: 'Arguments in named routes',
        home: const HomeScreen(),
        routes: {
          ExtractArgumentsScreen.routeName: (context) =>
              const ExtractArgumentsScreen(),
        });
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.blue),
              ),
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  ExtractArgumentsScreen.routeName,
                  arguments: ScreenArguments(
                    'Extract Arguments Screen',
                    'Extracted in the build method.',
                  ),
                );
              },
              child: const Text("Extracts arguments"),
            ),
            // on tap navigate to named route
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.blue),
              ),
              onPressed: () {
                // on tab change route
                Navigator.pushNamed(
                  context,
                  PassArgumentsScreen.routeName,
                  arguments: ScreenArguments(
                    'Accept Arguments Screen',
                    'Extracted in the onGenerateRoute function.',
                  ),
                );
              },
              child: const Text("Accepts arguments"),
            ),
          ],
        ),
      ),
    );
  }
}

class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  const ExtractArgumentsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final ScreenArguments? args =
        ModalRoute.of(context)?.settings.arguments as ScreenArguments?;

    return Scaffold(
      appBar: AppBar(
        title: Text(args?.titleBar ?? 'Tidak ada judul'),
      ),
      body: Center(
        child: Text(args?.textMessage ?? 'Tidak ada data'),
      ),
    );
  }
}

//Widget to accept arguments
class PassArgumentsScreen extends StatelessWidget {
  static const routeName = '/passArguments';

  final String title;
  final String message;

  const PassArgumentsScreen({
    Key? key,
    required this.title,
    required this.message,
  }) : super(key: key);

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

class ScreenArguments {
  final String titleBar;
  final String textMessage;

  ScreenArguments(this.titleBar, this.textMessage);
}

Output:

Tutorial sebelumnya : Flutter Navigator
Tutorial setelahnya : Aplikasi Multi Halaman Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan