observable_pattern 1.0.5 observable_pattern: ^1.0.5 copied to clipboard
Observable Pattern is a pattern that use a class to hold a value to manage changes to dispatch notification for every callbacks
import 'package:flutter/material.dart';
import 'package:observable_pattern/observable_pattern.dart';
//Create a store with variables of type Observable
class MyStore {
final email = Observable<String, String>();
final password = Observable<String, String>();
Observable<bool, void> _canSubmit;
final loading = Observable<bool, void>(false);
final done = Observable<bool, void>(false);
MyStore() {
email.transformer = (event) {
if (event == null || event.isEmpty) {
return 'Type your email';
} else {
return null;
}
};
password.transformer = (event) {
if (event == null || event.isEmpty) {
return 'Type your password';
} else {
return null;
}
};
}
void signIn() async {
if (loading.value) return;
canSubmit.validate();
if (!canSubmit.value) return;
loading.add(true);
await Future.delayed(const Duration(seconds: 3));
loading.add(false);
done.add(true);
}
Observable<bool, void> get canSubmit {
if (_canSubmit == null) {
_canSubmit = Observable.combine<String, String>([email, password]);
}
return _canSubmit;
}
}
//Initialize your app
class MyApp extends StatelessWidget {
final String title;
const MyApp({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: title,
theme: ThemeData(primarySwatch: Colors.blue),
home: LoginScreen(title: title),
);
}
}
//Create your own stateful screen
class LoginScreen extends StatefulWidget {
final String title;
const LoginScreen({Key key, this.title}) : super(key: key);
@override
_LoginScreenState createState() => _LoginScreenState();
}
//Into your state class put your store and the magic will begin
class _LoginScreenState extends State<LoginScreen> {
final store = MyStore();
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback(callback);
}
void callback(_) {
final focus = FocusScope.of(context);
store.loading.addListener((bool event) {
if (event) {
focus.unfocus();
//do something...
}
});
store.done.addListener((bool event) {
if (event) {
//do something...
}
});
}
@override
Widget build(BuildContext context) {
return Stack(
fit: StackFit.expand,
children: <Widget>[
Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Observer<String, String>(
observable: store.email,
builder: (BuildContext context, String value, String error) =>
TextField(
decoration: InputDecoration(
labelText: 'E-mail',
errorText: error,
),
onChanged: store.email.add,
),
),
Observer(
observable: store.password,
builder: (BuildContext context, String value, String error) =>
TextField(
decoration: InputDecoration(
labelText: 'Password',
errorText: error,
),
obscureText: true,
onChanged: store.password.add,
),
),
const SizedBox(height: 24.0),
RaisedButton(
shape: StadiumBorder(),
color: Colors.blue,
onPressed: store.signIn,
child: Text(
'Sign in without reactive',
style: TextStyle(color: Colors.white),
),
),
const SizedBox(height: 24.0),
Observer<bool, void>(
observable: store.canSubmit,
builder: (BuildContext context, bool value, void error) =>
RaisedButton(
shape: StadiumBorder(),
color: Colors.blue,
onPressed: value ? store.signIn : null,
child: Text(
'Sign in with reactive',
style: TextStyle(color: Colors.white),
),
),
)
],
),
),
),
Observer<bool, void>(
observable: store.loading,
builder: (BuildContext context, bool value, void error) => value
? Material(
color: Colors.black54,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
],
),
)
: Container(),
)
],
);
}
}
//Initialize your dart app
void main() => runApp(MyApp(title: 'Observable Pattern Example'));