
Listing 1: Einen einfachen State Store mit ChangeNotifier implementieren
class AppState with ChangeNotifier {
    List<Item> _items = [];

    List<Item> get items => _items;

    void addItem(Item item) {
      _items.add(item);

      notifyListeners();
    }
}
-------

Listing 2: Einen globalen State Store mit ChangeNotifierProvider einrichten
class App extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return ChangeNotifierProvider(
        create: (context) => AppState(),
        child: MaterialApp(
         titel: 'Provider Sample’,
         theme: ThemeData(
           primarySwatch: Colors.blue,
          ),
          home: Page(),
         ),
      );
    }
}
------

Listing 3: Konsum eines globalen State Store per Provider.of
floatingActionButton: FloatingActionButton(
    onPressed: () {
      final state = Provider.of<AppState>(_context, listen: false);
      state.addItem(Item(title: 'New Item'));
    },
    tooltip: 'Add',
    child: Icon(Icons.add),
),
-------

Listing 4: Konsum eines globalen State Store per Consumer-Widget
class ListViewWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Consumer<AppState>
         builder: (context, state, child) {
          return ListView.builder(
            padding: EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0),
            itemCount: state.items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(state.items[index].title),
              );
            },
       );
    );
  }
}
-------

Listing 5: Bloc mit zugehörigem Event implementieren
class AddItemEvent {
    final Item item;

    AddItemEvent(this.item);
}

class ItemBloc extends Bloc<Object, List<Item>> {
    @override
    List<Item> get initialState => [];

    @override
    Stream<List<Item>> mapEventToState(Object event) async* {
      if (event is AddItemEvent) {
        final List<Item> items = List.from(currentState)..add(event.item);
        yield items;
      }
    }
}

-------
Listing 5: Bloc per BlocProvider bereitstellen
class App extends StatelessWidget {
    @override
    Widget build(context) {
      return MaterialApp(
        title: 'Bloc Demo',
        home: BlocProvider<ItemBloc>(
          builder: (context) => ItemBloc(),
          child: Page(),
        ),
      );
    }
}
---------

Listing 6: Konsumierung eines Blocs per BlocBuilder
class ListViewWidget extends StatelessWidget {
    @override
    Widget build(context) {
      final ItemBloc _itemBloc = BlocProvider.of<ItemBloc>(context);

      return BlocBuilder<Object, List<Item>>(
        bloc: _itemBloc,
        builder: (context, items) {
          return ListView.builder(
            padding: EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0),
            itemCount: items.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(items[index].title),
              );
            },
          );
        },
      );
    }
}

--------

Listing 7: Redux Reducer mit Action und State-Klasse implementieren
@immutable
class AppState {
    final List<Item> items;

    AppState({
      this.items,
    });

    AppState.initialState() : items = [];
}

class AddItemAction {
    Item payload;

    AddItemAction({
      this.payload;
    });
}

AppState appReducer(AppState state, dynamic action) {
    return AppState(items: itemsReducer(state.items, action));
}

List<Item> itemsReducer(List<Item> state, dynamic action) {
    if (action is AddItemAction) {
      return [...state, action.payload];
    }

    return state;
}

-------

Listing 8: Redux Store per StoreProvider initialisieren und bereitstellen
class App extends StatelessWidget {
    final store = Store<AppState>(appReducer, initialState: AppState.initialState());

    @override
    Widget build(BuildContext context) {
      return StoreProvider<AppState>(
          store: store,
          child: MaterialApp( 
            title: 'Redux Sample’,
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: Page(),
          ),
        );
    }
}

-------

Listing 9: Action-Dispatch und Konsum des Redux Store per StoreConnector-Widget
floatingActionButton: StoreConnector<AppState, VoidCallback>(
    converter: (Store<AppState> store) {
      return () {
        store.dispatch(AddItemAction(payload: Item(title: 'New Item')));
      };
    },
    builder: (BuildContext context, VoidCallback onPressedCallback) {
      return FloatingActionButton(
        onPressed: onPressedCallback,
        tooltip: 'Add',
        child: Icon(Icons.add),
      );
    },
),


-------

Listing 10: MobX State Store einrichten
part '_store.g.dart';

class AppStore = _AppStore with _$AppStore;

abstract class _AppStore with Store {
    @observable
    ObservableList<Item> items = ObservableList<Item>.of([]);

    @action
    void addItem(Item item) {
      this.items.add(item);
    }
}
--------

Listing 11: MobX State Store initialisieren
class AppStore = _AppStore with _$AppStore;

abstract class _AppStore with Store {
    @observable
    ObservableList<Item> items = ObservableList<Item>.of([]);
  
    @action
    void addItem(Item item) {
      this.items.add(item);
    }
}

-----

Listing 12: MobX State Store per Observer-Widget binden
class ListViewWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Observer(builder: (_) {
        return ListView.builder(
            padding: EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0),
            itemCount: store.items.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(store.items[index].title),
              );
            });
      });
    }
}
