Pembangunan Aplikasi Mudah Alih Flutter · Pelajaran

Riverpod untuk Keadaan

Terokai Riverpod, pustaka pengurusan keadaan yang kukuh dan boleh diuji, serta fahami kelebihannya berbanding penyelesaian lain untuk aplikasi kompleks.

Pelajaran 3 daripada 411 langkah

Riverpod untuk Keadaan ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Selamat Datang ke Riverpod!

Riverpod ialah pustaka pengurusan keadaan yang popular untuk Flutter, yang bertujuan untuk menjadi mudah, kukuh dan mudah diuji. Ia merupakan versi pakej Provider yang direka semula untuk menangani beberapa keterbatasannya.

Anggap Riverpod sebagai set alat berkuasa untuk mengurus semua data dalam aplikasi anda, daripada tetapan pengguna hingga data yang diperoleh, dengan cara yang selamat dan boleh dijangka.

Kekuatan Teras Riverpod

Riverpod menawarkan beberapa kelebihan utama:

Keselamatan pada Masa Kompilasi: Mengesan ralat lebih awal, sebelum aplikasi anda dijalankan.
Kebolehujian: Memudahkan pengujian logik perniagaan anda secara berasingan.
Pelupusan Automatik: Penyedia boleh membersihkan sumber secara automatik apabila tidak lagi diperlukan.
Tiada Kebergantungan pada Pepohon Widget: Penyedia tidak bergantung pada pepohon widget, menjadikannya lebih fleksibel.

Riverpod membantu anda menulis kod yang lebih kemas dan mudah diselenggara.

Menyediakan Aplikasi Anda

Untuk menggunakan Riverpod, mula-mula tambahkan pakej flutter_riverpod pada pubspec.yaml anda. Kemudian, balut keseluruhan aplikasi anda dengan widget ProviderScope. Widget ini menyimpan keadaan semua penyedia anda.

Beginilah cara menyediakannya:

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

void main() {
  runApp(
    // Wrap your app in a ProviderScope
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('Hello Riverpod'),
    );
  }
}

Memperkenalkan Penyedia

Penyedia ialah blok binaan teras Riverpod. Penyedia menyimpan sebahagian keadaan dan membolehkan anda mengaksesnya dari mana-mana sahaja dalam aplikasi anda.

Penyedia yang paling mudah ialah Provider, yang menyimpan nilai tidak boleh ubah. Anda menentukannya secara global supaya boleh diakses di seluruh aplikasi anda.

import 'package:flutter_riverpod/flutter_riverpod.dart';

// A simple Provider that holds an immutable string.
final greetingProvider = Provider<String>((ref) {
  return 'Hello from Riverpod!';
});

// You can also provide numbers, objects, etc.
final counterProvider = Provider<int>((ref) => 0);

Menggunakan Penyedia dengan `ConsumerWidget`

Untuk membaca nilai penyedia dalam UI anda, gunakan ConsumerWidget. Widget ini memberikan anda akses kepada WidgetRef, yang sering dinamakan ref, dan membolehkan anda “watch” atau “read” penyedia.

ref.watch() menyebabkan widget anda dibina semula apabila nilai penyedia berubah.

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

final greetingProvider = Provider<String>((ref) {
  return 'Hello Riverpod User!';
});

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConsumerWidget(
        builder: (context, ref, child) {
          final greeting = ref.watch(greetingProvider);
          return Scaffold(
            appBar: AppBar(title: Text('Riverpod App')),
            body: Center(child: Text(greeting)),
          );
        },
      ),
    );
  }
}

Keadaan Boleh Ubah dengan `StateProvider`

Apabila anda perlu mengubah sebahagian keadaan secara langsung, gunakan StateProvider. Ia mendedahkan StateController, yang mempunyai sifat state yang boleh anda ubah.

Ini sesuai untuk keadaan UI yang mudah seperti togol atau pembilang.

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

// A StateProvider for a simple counter.
final counterProvider = StateProvider<int>((ref) => 0);

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConsumerWidget(
        builder: (context, ref, child) {
          final count = ref.watch(counterProvider);
          return Scaffold(
            appBar: AppBar(title: Text('Counter App')),
            body: Center(
              child: Text(
                'Count: $count',
                style: TextStyle(fontSize: 24),
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () => ref.read(counterProvider.notifier).state++,
              child: Icon(Icons.add),
            ),
          );
        },
      ),
    );
  }
}

`StateNotifierProvider` untuk Logik

Untuk keadaan yang lebih kompleks dan melibatkan logik perniagaan, contohnya mendapatkan data atau mengurus senarai, anda akan menggunakan StateNotifier bersama StateNotifierProvider.

StateNotifier ialah kelas yang anda lanjutkan, dan ia menyimpan keadaan anda. Penyedia kemudiannya mendedahkan satu tika pemberitahu anda.

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. Define your state class (immutable recommended)
class Todo { 
  final String id; 
  final String description; 
  final bool completed; 
  Todo(this.id, this.description, this.completed); 
}

// 2. Create a StateNotifier to manage the state
class TodosNotifier extends StateNotifier<List<Todo>> {
  TodosNotifier() : super([]); // Initial state is an empty list

  void addTodo(String description) {
    state = [...state, Todo(DateTime.now().toString(), description, false)];
  }

  void toggle(String id) {
    state = [ 
      for (final todo in state) 
        if (todo.id == id) 
          Todo(todo.id, todo.description, !todo.completed) 
        else 
          todo, 
    ];
  }
}

// 3. Create the StateNotifierProvider
final todosProvider = StateNotifierProvider<TodosNotifier, List<Todo>>((ref) {
  return TodosNotifier();
});

Data Tak Segerak dengan `FutureProvider`

Riverpod memudahkan pengendalian data tak segerak seperti permintaan rangkaian dengan FutureProvider dan StreamProvider.

FutureProvider mendedahkan AsyncValue, yang mengendalikan keadaan pemuatan, ralat dan data dalam UI anda dengan baik.

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

// A FutureProvider that simulates fetching data.
final userProvider = FutureProvider<String>((ref) async {
  await Future.delayed(Duration(seconds: 2)); // Simulate network delay
  return 'John Doe';
});

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConsumerWidget(
        builder: (context, ref, child) {
          final userAsyncValue = ref.watch(userProvider);
          return Scaffold(
            appBar: AppBar(title: Text('Async Data')),
            body: Center(
              child: userAsyncValue.when(
                loading: () => CircularProgressIndicator(),
                error: (err, stack) => Text('Error: $err'),
                data: (user) => Text('User: $user', style: TextStyle(fontSize: 24)),
              ),
            ),
          );
        },
      ),
    );
  }
}

`ref.read` berbanding `ref.watch`

Apabila berinteraksi dengan penyedia, anda terutamanya akan menggunakan dua kaedah pada objek ref:

ref.watch(provider): Mendengar perubahan dalam penyedia. Jika keadaan penyedia berubah, widget atau penyedia yang mendengarnya akan dibina semula atau dilaksanakan semula. Gunakan ini dalam kaedah build.
ref.read(provider): Membaca nilai semasa penyedia sekali, tanpa mendengar perubahan seterusnya. Sesuai untuk tindakan sekali sahaja, seperti menekan butang atau persediaan awal.

Elakkan ref.read dalam kaedah build melainkan anda memang tidak mahu pembinaan semula.

Jenis Penyedia Riverpod

Jenis penyedia Riverpod yang manakah paling sesuai untuk mengurus pembilang mudah, iaitu satu integer yang boleh ditambah atau dikurangkan, dan untuk mengendalikan logik perniagaan kompleks dengan berbilang tindakan, contohnya menambah atau mengalih keluar item daripada senarai tugasan?

Jawab dalam pelajaran interaktif

Imbas Kembali Riverpod

Syabas! Anda telah meneroka Riverpod, penyelesaian pengurusan keadaan yang berkuasa dan moden untuk Flutter.

Kita telah mempelajari ProviderScope untuk persediaan aplikasi.
Kita menggunakan Provider untuk data tidak boleh ubah dan StateProvider untuk keadaan boleh ubah yang mudah.
Untuk logik kompleks, StateNotifierProvider bersama StateNotifier ialah komponen penting.
FutureProvider membantu mengurus data tak segerak dengan baik.
Ingat ref.watch untuk mendengar dan ref.read untuk akses sekali sahaja.

Keselamatan pada masa kompilasi dan kebolehujian Riverpod menjadikannya pilihan yang sangat baik untuk aplikasi Flutter yang kukuh!

Percuma untuk bermula

Pelajari Dart dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Riverpod untuk Keadaan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Riverpod untuk Keadaan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Riverpod untuk Keadaan”?

Terokai Riverpod, pustaka pengurusan keadaan yang kukuh dan boleh diuji, serta fahami kelebihannya berbanding penyelesaian lain untuk aplikasi kompleks. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Riverpod untuk Keadaan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Mudah Alih Flutter