Flutter Mobile Development · Pelajaran

Rute Bernama dan Argumen

Manfaatkan rute bernama untuk navigasi yang lebih rapi dan teruskan data antar-layar menggunakan argumen rute secara efektif.

Pelajaran 2 dari 411 langkah

Rute Bernama dan Argumen adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Why Named Routes?

In previous lessons, we used MaterialPageRoute for navigation. While effective for simple apps, managing many routes this way can get messy.

Each route requires a new MaterialPageRoute instance.
Harder to identify screens by a unique name.
Can lead to repetitive code.

Named routes offer a cleaner, more structured way to manage your app's navigation.

Defining Named Routes

To use named routes, you define them in your MaterialApp widget. This is done using the routes property.

The routes property takes a Map.
The key is the route's name (a String, e.g., '/details').
The value is a function that builds the widget for that route.

The '/' route is special; it's your app's initial route.

Navigating to Named Routes

Once named routes are defined, you can navigate to them using Navigator.pushNamed(). This method takes the BuildContext and the name of the route.

It's simpler and more readable than creating a new MaterialPageRoute every time you want to go to a specific screen.

Basic Named Route Demo

Let's see how to set up and navigate using named routes. We'll create two simple screens: HomeScreen and DetailScreen.

Tap the 'Run' button to see it in action!

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
    );
  }
}

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

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Text('You are on the Detail Screen!',
          style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

Why Pass Arguments?

Often, when navigating to a new screen, you need to pass some data to it. For example:

A product ID to a product detail page.
User details to a profile editing screen.
A message to a confirmation page.

Route arguments allow you to send this information along with your navigation request.

Sending Arguments

You can pass arguments to a named route by using the arguments property in Navigator.pushNamed().

The arguments property accepts any Object.
It's best practice to pass simple data types (like String, int) or a custom class/map that encapsulates your data.

For example: Navigator.pushNamed(context, '/details', arguments: 'Hello from Home!');

Receiving Arguments

In the destination screen, you can retrieve the arguments using ModalRoute.of(context)!.settings.arguments.

ModalRoute.of(context) gets the current route.
.settings accesses the route's settings.
.arguments retrieves the data that was passed.

Remember to use ! for null safety if you're sure arguments will be present, or handle potential null values.

Type Safety & Casting

The .arguments property returns an Object?. This means you'll usually need to cast it to the expected type.

For example, if you passed a String, you'd retrieve it like this:

final String message = ModalRoute.of(context)!.settings.arguments as String;

It's good practice to add checks (e.g., if (arguments is String)) for robustness, especially with complex argument types.

Named Routes with Arguments Demo

This example demonstrates passing a simple String message from the HomeScreen to the DetailScreen using named routes and arguments.

The DetailScreen then displays this message.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes with Args',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details with Message'),
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/details',
              arguments: 'Hello from Home Screen!',
            );
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String? message = 
        ModalRoute.of(context)!.settings.arguments as String?;

    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You are on the Detail Screen!',
              style: TextStyle(fontSize: 20)),
            SizedBox(height: 20),
            Text('Message: ${message ?? "No message received"}',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    );
  }
}

Quick Check: Arguments

You've navigated to a named route called '/settings' and passed a boolean value true as an argument. How would you correctly retrieve and use this boolean in the SettingsScreen widget?

Jawab di pelajaran interaktif

Recap: Named Routes & Arguments

Great job! You've learned how to streamline navigation and pass data efficiently.

Named Routes: Use routes in MaterialApp to define routes with unique string names.
Navigation: Use Navigator.pushNamed(context, '/routeName') for cleaner navigation.
Passing Arguments: Use the arguments property in pushNamed to send data.
Receiving Arguments: Access data on the destination screen with ModalRoute.of(context)!.settings.arguments and cast it to the correct type.

This approach makes your app's navigation more organized and easier to maintain!

Gratis untuk memulai

Belajar Dart dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 22
Pelajaran: 88

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Rute Bernama dan Argumen” gratis?

Ya — teks lengkap “Rute Bernama dan Argumen” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Rute Bernama dan Argumen”?

Manfaatkan rute bernama untuk navigasi yang lebih rapi dan teruskan data antar-layar menggunakan argumen rute secara efektif. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?

Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Rute Bernama dan Argumen” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?

Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Flutter Mobile Development