Dua Layar, Satu Model

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 13 dari 27.

Data yang dibagikan oleh dua layar menunjukkan manfaat Provider. Layar Settings mengubah nama, dan layar home menampilkannya, tanpa kedua layar saling meneruskan apa pun.

Letak provider itu penting. MaterialApp memuat Navigator, dan setiap layar yang kamu dorong masuk ke dalamnya di samping home, bukan di dalamnya:

ChangeNotifierProvider        <- above MaterialApp: every screen finds it
  MaterialApp
    Navigator
      HomePage
      SettingsScreen          <- pushed next to HomePage

Provider yang membungkus HomePage hanya menjangkau HomePage. Layar yang didorong tidak berada di bawahnya, jadi layar itu tidak dapat menemukan model. Letakkan provider di atas MaterialApp, di dalam main, dan semua layar akan berbagi model yang sama.

Jangan atasi error dengan menambahkan ChangeNotifierProvider kedua di layar lain. Tindakan itu membuat model kedua: error memang hilang, tetapi layar-layar itu tidak lagi berbagi apa pun.

Tantangan

Sedang

Ketuk ikon roda gigi, ketik nama, lalu tekan Save: aplikasi menampilkan error karena provider hanya membungkus HomePage.

Pindahkan ChangeNotifierProvider keluar dari MyApp dan ke dalam main, untuk membungkus MyApp.

Lalu, menyimpan Ada akan menampilkan Hello, Ada! di halaman beranda.

Coba sendiri

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Profile extends ChangeNotifier {
  String _name = 'Guest';

  String get name => _name;

  void rename(String newName) {
    _name = newName;
    notifyListeners();
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ChangeNotifierProvider(
        create: (context) => Profile(),
        child: const HomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final profile = context.watch<Profile>();
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
        actions: [
          IconButton(
            icon: const Icon(Icons.settings),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SettingsScreen()),
              );
            },
          ),
        ],
      ),
      body: Center(
        child: Text('Hello, ${profile.name}!', style: const TextStyle(fontSize: 32)),
      ),
    );
  }
}

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

  @override
  State<SettingsScreen> createState() => _SettingsScreenState();
}

class _SettingsScreenState extends State<SettingsScreen> {
  final controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final profile = context.watch<Profile>();
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Text('Signed in as ${profile.name}'),
            const SizedBox(height: 16),
            TextField(
              controller: controller,
              decoration: const InputDecoration(labelText: 'Your name'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                context.read<Profile>().rename(controller.text);
                Navigator.pop(context);
              },
              child: const Text('Save'),
            ),
          ],
        ),
      ),
    );
  }
}

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online