Another state management solution

Overview

VxState

VxState is a state management library built for Flutter apps with focus on simplicity. It is inspired by StoreKeeper & libraries like Redux, Vuex etc with the power of streams. Here is a basic idea of how it works:

  • Single Store (Single source of truth) to keep app's data
  • Structured modifications to store with Mutations
  • Widgets listen to mutations to rebuild themselves
  • Enhance this process with Interceptors and Effects

Core of VxState is based on the InheritedModel widget from Flutter.

Getting started

Add to your pubpsec:

dependencies:
  ...
  vxstate: any

Create a store:

import 'package:vxstate/vxstate.dart';

class MyStore extends VxStore {
  int count = 0;
}

Define mutations:

class Increment extends VxMutation<MyStore> {
  perform() => store.count++;
}

Listen to mutations:

@override
Widget build(BuildContext context) {
  // Define when this widget should re render
  VxState.listen(context, to: [Increment]);

  // Get access to the store
  MyStore store = VxState.store;

  return Text("${store.count}");
}

Complete example:

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

// Build store and make it part of app
void main() {
  runApp(VxState(
    store: MyStore(),
    child: MyApp(),
  ));
}

// Store definition
class MyStore extends VxStore {
  int count = 0;
}

// Mutations
class Increment extends VxMutation<MyStore> {
  perform() => store.count++;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define when this widget should re render
    VxState.listen(context, to: [Increment]);

    // Get access to the store
    MyStore store = VxState.store;

    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Text("Count: ${store.count}"),
            RaisedButton(
              child: Text("Increment"),
              onPressed: () {
                // Invoke mutation
                Increment();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Documentation

  • VxStore - Where your apps's data is kept
  • VxMutation - Logic that modifies Store
  • VxBuilder, VxNotifier, VxConsumer - Useful widgets for special cases
  • VxEffect - Chained mutations
  • VxInterceptors - Intercept execution of mutations
Comments
  • VxStateWidgetBuilder store type doesn't affect builder store type

    VxStateWidgetBuilder store type doesn't affect builder store type

    In the VxStateWidgetBuilder T is the store type and it is not being used in the method, It is a small change that allows the builder in the widgets in vxbuilder and vxconsumer to nativelly use the type. The change can be seen more clearly in this pull request https://github.com/iampawan/VxState/pull/4

    opened by LuisReyes98 1
  • store type in vxbuilder/vxconsumer builder

    store type in vxbuilder/vxconsumer builder

    In the VxStateWidgetBuilder T is the store type and it is not being used in the method, It is a small change that allows the builder in the widgets in vxbuilder and vxconsumer to nativelly use the type.

    opened by LuisReyes98 1
  • The method 'listen' isn't defined for the type 'VxState'.

    The method 'listen' isn't defined for the type 'VxState'.

    The method 'listen' isn't defined for the type 'VxState'. Try correcting the name to the name of an existing method, or defining a method named 'listen'. from your flutter video https://youtu.be/j-LOab_PzzU day 27 when we put listen in add_to_cart.dart file it was displaying the above issue. and may this error is in the new version or vxstate Screenshot (27) .

    opened by Dinesh-choudhary-Wow 1
  • listen method not define error

    listen method not define error

    velocity-x version velocity_x: ^2.1.0

    VxState.listen(context, to: [AddMutation]); yaha ye error message aa raha he: The method 'listen' isn't defined for the type 'VxState'. Try correcting the name to the name of an existing method, or defining a method named 'listen'.

    opened by NAME-NikhilPatil 1
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 31% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_512.png | 14.45kb | 9.69kb | 32.93% | | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_1024.png | 45.89kb | 31.58kb | 31.18% | | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_16.png | 1.40kb | 1.00kb | 28.62% | | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_256.png | 5.79kb | 4.27kb | 26.23% | | /example/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_128.png | 3.20kb | 2.60kb | 18.77% | | | | | | | Total : | 70.73kb | 49.15kb | 30.52% |


    📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 0
Owner
Pawan Kumar
GoogleDevExpert for Flutter, Firebase, Dart & Web Tech. Public Speaker, Blogger, Entrepreneur & YouTuber. Founder of MTechViral & Let's Flutter with Dart.
Pawan Kumar
An implicit animation widget that flips from one number to another.

animated_flip_counter An implicit animation widget that flips from one number to another. Usage It can be useful to display information that's constan

null 70 Dec 29, 2022
A predictable state management library that helps implement the BLoC design pattern

A predictable state management library that helps implement the BLoC design pattern. Package Pub bloc bloc_test flutter_bloc angular_bloc hydrated_blo

Felix Angelov 9.9k Dec 31, 2022
MobX for the Dart language. Hassle-free, reactive state-management for your Dart and Flutter apps.

Language: English | Português | Chinese mobx.dart MobX for the Dart language. Supercharge the state-management in your Dart apps with Transparent Func

MobX 2.2k Dec 27, 2022
A flutter boilerplate project with GetX state management.

flutter_getx_boilerplate Languages: English (this file), Chinese. Introduction During my study of Flutter, I have been using the flutter_bloc state ma

Kevin Zhang 234 Jan 5, 2023
Flutter MVU architecture/state management package

mvu_flutter No mutability. No builders. No connectors. No reducers. No StreamControllers and subscription management. A truly declarative state manage

Yakov Karpov 7 Jul 29, 2021
Simple global state management for Flutter

Slices Slices is a minimalist state manegement, focused specifically for applications that needs a global state where different "pieces" of the applic

Erick 5 Jun 15, 2021
London App Brewery State Management Project

todey_flutter A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

null 0 Nov 1, 2021
Flutter State Management with provider :rocket:

Flutter - Gerenciamento de Estados com Provider Objetivos ao completar os estudos Aprenda a gerenciar o estado da sua aplicação com Single Source of T

Tiago Barbosa 0 Dec 6, 2021
A simple way to access state while robust and testable.

A state-management library that: catches programming errors at compile time rather than at runtime removes nesting for listening/combining objects ens

Remi Rousselet 3.9k Jan 3, 2023
A lightweight, yet powerful way to bind your application state with your business logic.

binder A lightweight, yet powerful way to bind your application state with your business logic. The vision As other state management pattern, binder a

Romain Rastel 172 Nov 16, 2022
Manage the state of your widgets using imperative programming concepts.

Imperative Flutter Manage the state of your widgets using imperative programming concepts. Setup Intall imperative_flutter package in pubspec.yaml dep

Jeovane Santos 5 Aug 20, 2022
Example of use bloc + freezed with a state that contains a list

blocfreezedlistexample A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you s

Leynier Gutiérrez González 2 Mar 21, 2022
Timer based on provider state manager

timer_provider Timer based on provider state manager Getting Started This project is a starting point for a Flutter application. A few resources to ge

Елизавета Лободина 0 Nov 6, 2021
Trip management mobile Application

HereYouGO Trip management mobile Application This app will help you Track your expense during your trips. Track your trip destinations and the sub tri

Krupali Mehta 4 Jul 7, 2022
The modular state management solution for flutter.

The modular state management solution for flutter. Easy debugging : each event is predictable and goes into a single pipeline Centralized state : soli

Aloïs Deniel 44 Jul 6, 2022
Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to tidily bound separated logic into complex solution.

Flutter Control is complex library to maintain App and State management. Library merges multiple functionality under one hood. This approach helps to

Roman Hornak 23 Feb 23, 2022
Cubit is a lightweight state management solution

Cubit is a lightweight state management solution. It is a subset of the bloc package that does not rely on events and instead uses methods to emit new states.

Felix Angelov 582 Nov 23, 2022
A super-fast and efficient state management solution for Flutter...

turbo A super-fast, efficient state management solution for Flutter. Turbo does not use streams, which are extremely inefficient, or use complex abstr

Aldrin's Art Factory 4 Oct 16, 2022
GetX - one of the most popular state management solution in flutter

GteX Tutorial - Udemy GetX is one of the most popular state management solution in flutter. In addition to state management, GetX provides easy way to

Md. Siam 3 May 18, 2022
This repo is an example of clean architecture using the GetX state-management solution.

GetX Clean Architecture A Flutter Clean Architecture Using GetX. This repo is forked from: https://github.com/phamdinhduc795397/flutter-getx-clean-arc

Md. Siam 78 Jan 3, 2023