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 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.