• Stars
    star
    156
  • Rank 239,589 (Top 5 %)
  • Language
    Dart
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 8 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Segmented State Pattern for Reactive Property

Triple - Segmented State Pattern


Logo Logo

Welcome to Triple! Design Pattern for State Management.

Β· Report Bug Β· Request Feature



Table of Contents
  1. About The Project
  2. Usage
    1. Installation
    2. How to use?
  3. Contributing
  4. Contact
  5. Contributors


πŸ“ About The Project

What is Triple?

Triple is a nickname to SSP (Segmented State Standard). Some packages were created to make it easier for developers to start using the standard. We'll call it an extension.

Segmented State Pattern (SSP)

When we talk about a single flow state, we end up solving architecture problems early, as we will have only one data flow for each state.

In addition to the maintainability and to the ease of use architecture, we also have the possibility of increasing this flow with other standards such as the Observer, which gives reactivity to the component when it is modified, and Memento, which makes it possible to revert or redo this state.

A beautiful example of a pattern with a single flow is BLoC, giving reactivity to a state allowing all transformations in that flow. This (although complicated for some), consolidates very well in the architecture of a project, even the limits of this practice are beneficial for not allowing the developer to resort to other solutions for the architecture and the standard for its resource.

There are other ways to promote reactivity in a property instead of the entire object, such as MobX's Observable and Flutter's ValueNotifier, and that gives us a lot of choices. However, we lose some important architecture limits, which can put in check the project maintenance in the future. Therefore, it needs a standard to force limits on the individual reactivity of each property and thereby improve the maintainability of the components responsible for managing the states of the application.

Triple is a nickname to SSP (Segmented State Standard). Some packages were created to make it easier for developers to start using the standard. We'll call it an extension.


This project is distributed under the MIT License. See LICENSE.txt for more information.


✨ Usage

The SSP segments the state into 3 reactive parts, the state value (state), the error object (error), and the state loading action (loading).

These segments are observed in a listener or separate listeners. They can also be combined to obtain a new segment, always starting from the 3 main segments.

Installation

Dependencies

add the following dependencies to your pubspec.yaml file:

dependencies:
  flutter_triple: ^1.3.0

Import

Import the package in your code with:

import 'package:flutter_triple/flutter_triple.dart';

How to use?

Create a Store

Create a class that extends NotifierStore<Error, State>. The first type is the type of the error, the second is the type of the state.

class CounterStore extends NotifierStore<Exception, int> {
  CounterStore() : super(0);

  void increment() => update(state + 1);
  void decrement() => update(state - 1);
}

Consume with Listeners, Builders and Consumers

Consume the store with scopes ScopedBuilder, ScopedListener and ScopedConsumer.

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

class _CounterPageState extends State<CounterPage> {
  final store = CounterStore();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: ScopedBuilder<CounterStore, Exception, int>(
        store: store,
        onLoading: (context) => Center(child: CircularProgressIndicator()),
        onError: (context, error) => Center(child: Text(error.toString())),
        onState: (context, state) => Center(
          child: Text(
            '$state',
            style: Theme.of(context).textTheme.headline4,
          ),
        ),
      ),
      floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              onPressed: store.decrement,
              tooltip: 'Decrement',
              child: Icon(Icons.remove),
            ),
            SizedBox(width: 5),
            FloatingActionButton(
              onPressed: store.increment,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          ],
        ),
    );
  }
}

πŸ§‘β€πŸ’» Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the appropriate tag. Don't forget to give the project a star! Thanks again!

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Remember to include a tag, and to follow Conventional Commits and Semantic Versioning when uploading your commit and/or creating the issue.

(back to top)

πŸ’¬ Contact

Flutterando Community

(back to top)


πŸ‘₯ Contributors

(back to top)

πŸ› οΈ Maintaned by


This fork version is maintained by Flutterando.

More Repositories

1

modular

A smart project structure
Dart
1,295
star
2

roadmap

Flutter roadmap pt-BR
1,215
star
3

Clean-Dart

Proposta de Arquitetura Limpa para o Dart/Flutter
1,147
star
4

slidy

CLI package manager and template for Flutter
Dart
804
star
5

hasura_connect

Connect your Flutter/Dart apps to Hasura simply.
Dart
204
star
6

forum

Organizando as discussΓ΅es feitas no Telegram, Discord e Facebook no Github em formato de Issues.
173
star
7

yuno

Minimal Open-source Retrogame Frontend
Dart
113
star
8

asuka

Show Snackbars, dialogs, ModalSheets in a single provider. Simple and Clean.
Dart
83
star
9

uno

Future based HTTP client for the Dart and Flutter
Dart
77
star
10

dart_backend

Roadmap para aprender como utilizar Dart no backend
73
star
11

teddy_todo

Dart
65
star
12

calamidade

Dart
64
star
13

dartion

Json Server RESTful, Up your backend in 5 Seconds!
Dart
58
star
14

routefly

Folder-based route manager inspired by NextJS and created by the Flutterando community.
Dart
53
star
15

clean-dart-search-bloc

Github Search using "Clean Dart", BLoC and Modular.
C++
52
star
16

auto_injector

Dependency injection system. But without build_runner :)
Dart
52
star
17

rx_notifier

Extension to ValueNotifier by transparently applying functional reactive programming (TFRP)
Dart
42
star
18

asp

ASP (Atomic State Pattern) offers a simplified and modularized approach to state management for Flutter.
C++
40
star
19

minicore

Flutter/Dart Architecture proposal inspired by Clean Architecture.
40
star
20

semana-do-flutter-arc

Semana do Flutter de Maio de 2020
C++
36
star
21

music_player_app

A challenge made by Flutterando using Flutter Desktop
Dart
33
star
22

flutter_mobx_extension

TypeScript
32
star
23

result_dart

Result for dart. It is an implementation based on Kotlin Result and Swift Result.
Dart
32
star
24

nubank_layout

Desafio criado com os membros da Flutterando
Dart
32
star
25

flutter-coverage

VSCeode Extension for view the code coverage per folder/file in the test view
TypeScript
31
star
26

github_search

Github Search - Flutter Modular example
Dart
23
star
27

shelf_swagger_ui

Swagger UI plugin for Shelf
Dart
22
star
28

dson_adapter

Convert JSON to Dart Class withless code generate(build_runner)
Dart
20
star
29

architecture

Dart
20
star
30

di-example

Dart
20
star
31

flutter_calculator

Sample project using project structure generated by Slidy and TDD
Dart
20
star
32

calamidade-backend

TypeScript
19
star
33

FunctionalDart

Código e anotaçáes da série de estudos "Dart Funcional"
Dart
19
star
34

queue_management

Todas as quintas as 17 contamos esse app
Dart
18
star
35

dart_pub

Private pub.dev for packages Flutter Dart
Dart
15
star
36

flutterando_metrics

Dart
15
star
37

flutter_web_site

Flutterando's site built in Flutter Web
Dart
14
star
38

Desafios

Desafios propostos pela equipe do canal
14
star
39

animated-toolbar

Dart
12
star
40

Flutter-SOLID-Hasura-Firestore

Dart
12
star
41

website

Flutterando website
Dart
12
star
42

flutter_mobx_helpers

Widgets and Utils for increment mobx
Dart
8
star
43

carrinho_compras

Aplicativo para modelo de projeto com Repository Pattern e BLoC
C++
8
star
44

auth-service

Go
8
star
45

flutterando_bricks

Dart
8
star
46

shelf_graphql

Graphql server for shelf
Dart
7
star
47

todo_mobx

Dart
7
star
48

full_coverage

A package script for allowing coverage test tool to see all Dart files
Dart
7
star
49

flutterando_analysis

Lint rules for Dart and Flutter used internally at Flutterando
C++
7
star
50

iugu

Dart
6
star
51

via_cep_search

C++
6
star
52

slidy-vscode

snippets for slidy
TypeScript
6
star
53

semana-do-flutter-rx-notifier

Dart
6
star
54

crud_completo

CRUD Completo
C++
6
star
55

dart-backend

Dart
6
star
56

asp_arch

C++
6
star
57

unity_test_study

Dart
6
star
58

fteam_authentication

Dart
5
star
59

builders

Use Consumer, Select and BlocConsumer in any System Injector
Dart
5
star
60

dialog_launcher

A Dart package to facilitate the creation and handling of dialog boxes in command line interfaces across different operating systems (Windows, Linux, and macOS).
Dart
5
star
61

clean_dart_search_getit_cubit

Dart
4
star
62

shelf_hasura_actions

Shelf Middleware for Hasura Action.
Dart
4
star
63

hook_state

`hook_state` is a Flutter package inspired by React hooks and the `flutter_hooks` package. It offers a similar hooks experience but without the need for additional widgets, allowing you to use just `StatefulWidget` to manage complex states declaratively and reactively.
Dart
4
star
64

value_listenable_test

Assists in testing ValueListenable objects (ex: ValueNotifier).
Dart
4
star
65

value_selectable

A Flutter package that provides computed values for `ValueNotifier`, inspired by the Selectors from Recoil.
C++
4
star
66

slidy_extension

TypeScript
3
star
67

hasura_cache_interceptor

Package to implements cache in Hasura package
Dart
3
star
68

passport

Dart
3
star
69

flutter-latam-conf-2020-site

A site for Flutter LATAM Conf 2020
Dart
3
star
70

value_notifier_plus

ValueNotifierPlus Γ© um pacote que expande as funcionalidades de ValueNotifier do Flutter.
C++
2
star
71

hive_cache_interceptor

Package to implements cache using hive in hasura_connect package
Dart
2
star
72

.github

2
star
73

hasura-webhook-auth

Dart
2
star
74

flutterolx

Dart
2
star
75

keyframe

Improve the animation experience in Flutter by transforming Tweens into Timeline with Keyframe like a video editor, but using programming language
C++
2
star
76

hasura_core-Deprecated-

Dart
1
star
77

flutter-latam-conf-2020-challenge

A challenge for Flutter LATAM Conf 2020
1
star
78

hasura_firebase_performance

Hasura connect Interceptor implementation that sends querys metric data to Firebase.
Dart
1
star
79

flutterando_workflows

Reusable GitHub Workflows used at Flutterando
1
star
80

precache_image_builder

Dart
1
star
81

shared_preferences_cache_interceptor

Package to implements cache using shared preferences to hasura_connect package
Dart
1
star
82

matchmaker_lol

Dart
1
star
83

signals

Dart
1
star
84

coopartilhar-api-mock

JavaScript
1
star