Flutterexperts

In this article, we will explore the Segmented State Pattern. We will also implement a demo program and learn how to implement it in your Flutter applications.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

---

Table Of Contents

Introduction

Implementation

Conclusion

GitHub Link

---

Introduction:

First of all, I would like to introduce you to Segmented State Pattern.

Segmented State Pattern is a state management pattern in Flutter that uses Streams or ValueNotifiers. The Triple package is a simple package that uses this pattern.
State management is a critical aspect of building complex and interactive applications in Flutter. It helps you:

• Control and update the data that your UI displays
• Know about your application, where the user is in the app, what they are doing, and what data they are inputting
• Align and integrate the core business logic inside the application with servers and databases
• Ensure that the different parts of the application are working together predictably and consistently.

Implementation:

Let’s see how to Implement the Segmented State Pattern (Triple Pattern ).

First Add the dependencies in pubsec.yaml file

dependencies:
flutter_triple: ^3.0.0

Alright, now we will work on our store part for this. First of all, we will create a new file and call it counter_store.dart

import 'package:flutter_triple/flutter_triple.dart';

class CounterStore extends Store<int> with MementoMixin {
CounterStore() : super(0);

Future<void> increment() async {
setLoading(true);
await Future.delayed(const Duration(milliseconds: 1000));
update(state + 1);
setLoading(false);
}
}

Finally, we will design the Login Screen UI:

import 'package:flutter/material.dart';
import 'package:flutter_triple/flutter_triple.dart';
import 'counter_store.dart';

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;

@override
MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
final counter = CounterStore();
late Disposer disposer;

@override
void initState() {
super.initState();
disposer = counter.observer(onState: print);
}

@override
void dispose() {
super.dispose();
disposer();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
IconButton(
onPressed: counter.undo,
icon: const Icon(Icons.arrow_back_ios),
),
IconButton(
onPressed: counter.redo,
icon: const Icon(Icons.arrow_forward_ios),
),
],
),
body: Center(
child: ScopedConsumer<CounterStore, int>(
store: counter,
onLoadingListener: (context, isLoading) {},
onErrorListener: (context, error) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(error.toString()),
),
);
},
onLoadingBuilder: (context) => const Text('Loading...'),
onStateBuilder: (context, state) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('You have pushed the button'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'$state',
style: Theme.of(context).textTheme.headlineMedium,
),
const Text(
'Times',
),
],
),
],
);
},
),
),
floatingActionButton: TripleBuilder<CounterStore, int>(
store: counter,
builder: (context, triple) {
return FloatingActionButton(
onPressed: triple.isLoading ? null : counter.increment,
tooltip: triple.isLoading ? 'no-active' : 'Increment',
backgroundColor:
triple.isLoading ? Colors.grey : Theme.of(context).primaryColor,
child: const Icon(Icons.add),
);
},
),
);
}
}

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Conclusion:

In triple state management, onLoad Listener is an event that occurs when an object has been loaded. It’s often used within the body widget.

errorBuilder is a function that is executed when the task’s status is set to Error. It returns a widget that is called when the state is BaseErrorState.

loadingBuilder is a property that is a focused circular progress indicator until updating the counter value view on the screen. It allows you to customize the widget that’s displayed while the counter value increase action is performed

---

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

GitHub Link:

You can check out Segmented State Pattern on GitHub. We hope you enjoyed this tutorial

GitHub – rahul-t-aeologic/triple_pattern_state_flutter_demo
Contribute to rahul-t-aeologic/triple_pattern_state_flutter_demo development by creating an account on GitHub.github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---