Cubit Flutter - State Management - Cách quản lý State với Cubit

Cubit là một trong những phương pháp quản lý State mới. Phương pháp này có những ưu điểm nhất định so với các phương pháp khác, nổi bật là không build lại các widget có các giá trị state không thay đổi, tăng độ mượt cho ứng dụng. Sau đây Báo Flutter sẽ hướng dẫn các bước triển khai với Cubit trong Flutter.

Khai báo
Đầu tiên tạo một Flutter Project, trong pubspec.yaml khai báo thư viện:

flutter_bloc: ^8.0.1

1	flutter_bloc: ^8.0.1

chạy pub get, để sử dụng cubit, chúng ta cũng có thể sử dụng thư viện flutter_cubit, tuy nhiên mong muốn mọi người sử dụng nhiều hơn với Bloc và thư viện flutter_bloc cũng tích hợp thư viện flutter_cubit nên việc sử dụng flutter_bloc là hợp lý nhất.

Tạo Cubit
Tạo một Cubit mà trong đó lưu trữ 1 state và các hàm tương tác với state đó. State đó có thể là một giá trị nào đó – là một kiểu dữ liệu thông thường hoặc một model.

Trong Flutter Project trên, tạo một thư mục có tên cubits, bên trong đó chứa file : counter_cubit.dart

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterCubit extends Cubit<int> {

CounterCubit() : super(0);

void increment() => emit(state + 1);

void decrement() => emit(state - 1);

}

Hàm emit, có thể được hiểu giống như : yield , nó là một cách đẩy dữ liệu vào Stream
Đặt cubit trong một BlocProvider tại một widget cha
Trong ví dụ này chúng ta sẽ đặt Cubit vào BlocProvider, khối BlocProvider này trong MyApp widget:

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'cubits/counter_cubit.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BlocProvider(
        create: (_) => CounterCubit(),
        child: CounterPage(),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:flutter_bloc/flutter_bloc.dart';

import 'cubits/counter_cubit.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: BlocProvider(

create: (_) => CounterCubit(),

child: CounterPage(),

);

}

BlocProvider là một Widget dùng để xử lý các cubit, lưu trữ các giá trị trong Cubit vào Provider.
Tạo View để sử dụng Cubit
Tạo folder views và tạo file : counter_page.dart để sử dụng cubit, hiển thị và tương tác trên view

import 'package:cubit_flutter/cubits/counter_cubit.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocBuilder<CounterCubit, int>(
        builder: (context, count) => Center(child: Text('$count', style: TextStyle(fontSize: 50),)),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => context.read<CounterCubit>().increment(),
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () => context.read<CounterCubit>().decrement(),
          ),
        ],
      ),
    );
  }
}

import 'package:cubit_flutter/cubits/counter_cubit.dart';

import 'package:flutter/material.dart';

import 'package:flutter_bloc/flutter_bloc.dart';

class CounterPage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text('Counter')),

body: BlocBuilder<CounterCubit, int>(

builder: (context, count) => Center(child: Text('$count', style: TextStyle(fontSize: 50),)),

floatingActionButton: Column(

crossAxisAlignment: CrossAxisAlignment.end,

mainAxisAlignment: MainAxisAlignment.end,

children: <Widget>[

FloatingActionButton(

child: const Icon(Icons.add),

onPressed: () => context.read<CounterCubit>().increment(),

const SizedBox(height: 4),

FloatingActionButton(

child: const Icon(Icons.remove),

onPressed: () => context.read<CounterCubit>().decrement(),

);

}

BlocBuilder là một Widget hỗ trợ việc build giao diện và cung cấp giá trị được lưu trong BlocProvider mà lấy được từ Cubit.
Biến count chính là giá trị lưu trữ trong Cubit mà đặt vào Provider. Giá trị này sẽ được cập nhật khi các button được tương tác :

context.read<CounterCubit>().increment(),

1	context.read<CounterCubit>().increment(),

hoặc

context.read<CounterCubit>().decrement(),

1	context.read<CounterCubit>().decrement(),

Cách tương tác với Cubit, có vẻ giống với Provider.
Kết quả :

Kết luận : Cubit là một trong những cách quản lý State, có những phần giống như Provider. Dựa vào các bước mô tả trên bạn có thể sử dụng hiệu quả Cubit.

Cubit Flutter – State Management – Cách quản lý State với Cubit

Published by Báo Flutter

Trả lời Hủy