Navigation & Routing : Multiple Screen

tugas ini dapat dilihat melalui link github berikut

Langkah Pengerjaan

• Buat file dart baru dengan nama multipleScreen.dart di dalam folder lib
• Berikut kode untuk menampilkan tampilan multi screen

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // home: const HomePage(), // <-- HAPUS BARIS INI
      initialRoute: '/',
      routes: {
        '/': (context) => const HomePage(),
        '/product': (context) => const MyProduct(),
      },
    );
  }
}

// HOME PAGE
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) =>
                        const MyProfile(id: 101, name: "laptop"),
                  ),
                );
              },
              child: const Text('Go to Profile'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  '/product',
                  arguments: {'id': 100, 'name': 'Laptop Gaming'},
                );
              },
              child: const Text('Go to Product'),
            ),
          ],
        ),
      ),
    );
  }
}

// MY PROFILE
class MyProfile extends StatelessWidget {
  final int id;
  final String name;

  const MyProfile({super.key, required this.id, required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Profile')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('ID: $id', style: const TextStyle(fontSize: 20)),
            Text('Name: $name', style: const TextStyle(fontSize: 20)),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('Back to Home'),
            ),
          ],
        ),
      ),
    );
  }
}

// MY PRODUCT

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

  @override
  Widget build(BuildContext context) {
    final args =
        ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>?;
    final int id = args?['id'] ?? 0;
    final String name = args?['name'] ?? 'Unknown';

    return Scaffold(
      appBar: AppBar(title: const Text('Product')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [Text('Product ID: $id'), Text('Product Name: $name')],
        ),
      ),
    );
  }
}

• Widget Product Page: menampilkan halaman produk dengan app bar dan tombol yang mengarahkan pengguna ke halaman produk detail page
• Widget Produk Detail Page: menampilkan halaman produk dengan app bar dan tombol yang mengarahkan pengguna kembali ke halaman sebelumnya yaitu produk page

• Outputnya:

• ketika tombol “go to profile” ditekan output akan menjadi:

• ketika tombol “go to product” ditekan:

LATIHAN

• Buatlah halaman login dan halaman utama, kemudian inputkan username dan password, Ketika diklik login akan berpindah ke halaman utama dengan mengirimkan data username dan password, tampilkan data tersebut pada halaman utama.
• Beberapa widget flutter telah menggunakan Konsep navigation dan routing seperti Tabs, Bottom Navigation Bar dan Drawer. Berikan contoh penerapan salah satu dari ketiga widget tersebut

Pada latihan ini saya membagi tugas ini menjadi 3 file dengan nama:

1. main.dart
2. login_page.dart
3. home_page.dart

untuk main.dart kodingan sebagai berikut:

import 'package:flutter/material.dart';
import 'login_page.dart'; // Pastikan nama file ini sesuai

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aplikasi Login Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const LoginPage(), // Halaman awal adalah LoginPage
    );
  }

untuk login_page.dart kodingan seperti berikut:

import 'package:flutter/material.dart';
import 'home_page.dart'; // Pastikan nama file ini sesuai

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // Controller untuk mengambil teks dari TextFormField
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _handleLogin() {
    final String username = _usernameController.text;
    final String password = _passwordController.text;

    // Navigasi ke HomePage dan mengirim data menggunakan Navigator.push
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => HomePage(
          username: username,
          password: password,
        ),
      ),
    );
  }

  @override
  void dispose() {
    // Penting: Membuang controller saat widget dihapus
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Halaman Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // Input Username
            TextFormField(
              controller: _usernameController,
              decoration: const InputDecoration(
                labelText: 'Username',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 20),

            // Input Password
            TextFormField(
              controller: _passwordController,
              obscureText: true, // Untuk menyembunyikan teks password
              decoration: const InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 30),

            // Tombol Login
            ElevatedButton(
              onPressed: _handleLogin,
              child: const Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

dan untuk home_page.dart seperti berikut:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  // Properti untuk menyimpan data yang dikirim dari halaman login
  final String username;
  final String password;

  // Constructor untuk menerima data
  const HomePage({
    super.key,
    required this.username,
    required this.password,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Halaman Utama'),
        // Tombol kembali (back) akan muncul otomatis
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const Text(
              'Selamat Datang di Halaman Utama!',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 30),
            
            // Menampilkan data username
            Text(
              'Username Anda:',
              style: TextStyle(fontSize: 16, color: Colors.grey[700]),
            ),
            Text(
              username,
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
            ),
            const Divider(height: 30),

            // Menampilkan data password
            Text(
              'Password Anda:',
              style: TextStyle(fontSize: 16, color: Colors.grey[700]),
            ),
            Text(
              password,
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
            ),
          ],
        ),
      ),
    );
  }
}

OUTPUT AKAN SEPERTI BERIKUT:

• pertama pada halaman login dengan username: zaky dan password: hakim
• maka pada tampilan homepage akan keluar nama zaky hakim

• untuk tampilan home_page.dart

• untuk membuat sebuah bottom navigation bar saya masih belum bisa