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
dependencies:
imperative_flutter: ^0.0.2
Then it's just import in your code
import 'package:imperative_flutter/imperative_flutter.dart';
Usage
ImperativeProvider is responsible for storing and handling the references for ImperativeBuilder, it can be global scope when MaterialApp is his child or local scope when Scaffold is your child.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ImperativeProvider(
child: MaterialApp(
title: 'Imperative Flutter Demo',
home: MyHomePage(),
),
);
}
}
ImperativeBuilder is responsible for store the state of our widget and reconstructing it when that state is changed, note that the id must be unique for each ImperativeProvider Scope.
// Inside StatelessWidget
ImperativeBuilder<int>(
id: 'count',
initialData: 0,
/* the builder method will be called every time the state changes,
updating only the widget within the scope */
builder: (context, snapshot) {
return Container(
height: 48,
width: 48,
color: Colors.pink,
child: Center(
child: Text(
'${snapshot.data}',
style: TextStyle(color: Colors.white),
),
),
);
},
),
// ...
class Whatever extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Get instance of ImperativeProvider
final imperative = ImperativeProvider.of(context);
return ElevatedButton.icon(
onPressed: () {
// Get current state of ImperativeBuilder where id equal 'count'
final value = imperative.getState<int>('count');
// Set state of ImperativeBuilder where id equal 'count' and rebuild
imperative.setState('count', value + 1);
},
icon: Icon(Icons.add),
label: Text('plus'),
),
}