Costum State Mixin Flutter

CostumStateMixin.dart

mixin CustomStateMixin<T> on State<T> {
  var _state = CustomState.idle;
  var _message = '';

  void setIdleState() {
    setState(() {
      _state = CustomState.idle;
    });
  }

  void setLoadingState() {
    setState(() {
      _state = CustomState.loading;
    });
  }

  void setSuccessState() {
    setState(() {
      _state = CustomState.success;
    });
  }

  void setEmptyState() {
    setState(() {
      _state = CustomState.empty;
    });
  }

  void setErrorState(String message) {
    setState(() {
      _state = CustomState.error;
      _message = message;
    });
  }

  Widget buildIdleState() => Container();

  Widget buildLoadingState() => Center(child: CircularProgressIndicator());

  Widget buildSuccessState();

  Widget buildEmptyState() => Center(child: Text('Data is empty'));

  Widget buildErrorState(String message) => Center(child: Text(message));

  @override
  Widget build(BuildContext context) {
    switch (_state) {
      case CustomState.idle:
        return buildIdleState();
      case CustomState.loading:
        return buildLoadingState();
      case CustomState.success:
        return buildSuccessState();
      case CustomState.empty:
        return buildEmptyState();
      case CustomState.error:
        return buildErrorState(_message);
      default:
        return Container();
    }
  }
}

enum CustomState { idle, loading, success, empty, error }

Example.dart

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

enum CounterEvent { increment, decrement }

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.increment:
        yield state + 1;
        break;
      case CounterEvent.decrement:
        yield state - 1;
        break;
    }
  }
}

class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> with CustomStateMixin {
  final _bloc = CounterBloc();

  @override
  void initState() {
    super.initState();
    _bloc.add(CounterEvent.increment);
  }

  @override
  void dispose() {
    _bloc.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter App')),
      body: BlocBuilder<CounterBloc, int>(
        bloc: _bloc,
        builder: (context, state) {
          if (state < 0) {
            setErrorState('Negative value is not allowed');
          } else if (state == 0) {
            setEmptyState();
          } else {
            setSuccessState();
          }

          return buildState(context);
        },
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              _bloc.add(CounterEvent.increment);
            },
            child: Icon(Icons.add),
          ),
          SizedBox(height: 16),
          FloatingActionButton(
            onPressed: () {
              _bloc.add(CounterEvent.decrement);
            },
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }

  @override
  Widget buildSuccessState() {
    return Center(
      child: Text(
        'Counter: ${_bloc.state}',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

Pada kode di atas, mixin CustomStateMixin berisikan state yang berbeda-beda yang dapat digunakan di aplikasi Flutter Anda. Setiap state memiliki method dan widget yang berbeda-beda. Misalnya, setLoadingState() akan mengubah _state menjadi CustomState.loading, dan buildLoadingState() akan menampilkan indikator loading pada layar.

Untuk menggunakan mixin ini, cukup melakukan with CustomStateMixin pada widget yang ingin digunakan. Setiap kali state diubah menggunakan method seperti setLoadingState() atau setErrorState(), maka tampilan widget juga akan berubah sesuai dengan state yang sedang aktif.

Semoga contoh ini bisa membantu Anda dalam mengembangkan aplikasi Flutter dengan state management yang lebih baik.

Pada contoh di atas, mixin CustomStateMixin di-implementasikan pada _CounterPageState. Dalam method build(), state dari bloc (_bloc.state) digunakan untuk menentukan state apa yang harus digunakan pada mixin.

Misalnya, jika state kurang dari 0, maka akan memanggil setErrorState() dengan pesan 'Negative value is not allowed', dan akan menampilkan widget yang dibangun oleh method buildErrorState(). Jika state adalah 0, maka akan memanggil setEmptyState(), dan akan menampilkan widget yang dibangun oleh method buildEmptyState(). Jika state lebih besar dari 0, maka akan memanggil setSuccessState(), dan akan menampilkan widget yang dibangun oleh method buildSuccessState().

Dalam contoh ini, state dari bloc tidak berpengaruh pada state mixin, karena CustomStateMixin tidak memperhatikan state dari bloc tersebut. Namun, mixin ini masih dapat membantu Anda untuk mengelola state-widget pada aplikasi Flutter Anda secara lebih mudah.