Search packages, repositories and app categories

GitHub repositoryiampawan/VxState

VxState

Another state management solution

VxState project cover
Stars
43
Forks
8
Last push (UTC)
Nov 23, 2023
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

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.watch(context, on: [Increment]);

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

  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.watch(context, on: [Increment]);

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

    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
Pawan Kumar GitHub avatar
GitHub author

Pawan Kumar ↗

Empowering People | AI | 145K+ Youtube ▶️ | 70K+ Linkedin | 50K+ Twitter | 10K+ Github 👨🏻‍💻 | Google Developer Expert | Building Tools 🚀

PocketFMFaridabad, IndiaOfficial website ↗
LanguagesDartHTMLRubySwiftKotlinObjective-C

Categories

Packages published by this repository

Dependencies used

Dependency list 2 items

  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗