binding

Description:

binding

Data Binding #
A state management package for Flutter that supports data bindings. This package is inspired by .NET INotifyPropertyChanged interface and should feel familiar to .NET developers that have worked with .NET applications in WPF/Xamarin.
Introduction #
Recently I read a Flutter State Management article on Medium: Flutter #OneYearChallenge; Scoped Model vs BloC Pattern vs States Rebuilder
This article discussed various different state management techniques and consisted of a challenge that the author of the article solved using the States_rebuilder state management package that the author has developed.
The current recommended Flutter state management solution from the Flutter team is the Provider package. So I attempted to solve the challenge presented in the article using the Provider package. My attempt and subsequent failure to solve the challenge using the provider package is at https://github.com/shah-gaurav/flutter-app-one-year-challenge
However, this peaked my curiosity to learn more about state management in Flutter. So I decided that instead of using a package for state management, I should create state management solution from the ground up to solve the challenge. Since my background is in .NET and c# development, the solution I came up with tries to leverage concepts from my experience in those technologies.
This package is the resulting state management framework I created to solve the challenge. The solution to the challenge is located in the example folder.
Get Started #
To use the data bindings package is an easy three step process:
Step 1 - Create a data model that inherits from NotifyPropertyChanged and calls propertyChanged whenever a property of the model is changed.
class CounterModel extends NotifyPropertyChanged {
// Create a constant for each property name (Optional, but recommend)
static const countPropertyName = 'count';

// Properties
// Recommended that they are private with getters so they cannot
// be modified without going through a method in the model class
int _count = 0;

int get count => _count;

// Methods
void incrementCount() {
_count++;
// Whenever a property is modified in code, make sure to call
// propertyChanged with the correct property name string/constant
propertyChanged(propertyName: countPropertyName);
}
}
copied to clipboard
Step 2 - Add a BindingProvider widget to the root of the application.
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Counter Example',
// Step 2: Add a BindingProvider to the root of your application
// Note: There should only be one BindingProvider in the application.
home: BindingProvider(
// Optional: Use BindingSource to make an
// instance of the model available to all child widgets.
// Alternatively, the model can also be a property of the widget and passed
// down to its children in the constructor or using any other mechanism.
child: BindingSource<CounterModel>(
instance: CounterModel(),
child: MyHomePage(),
),
),
);
}
}
copied to clipboard
Step 3 - Use the Binding widget to attach an instance of the model to the tree and tell it when the instance should be rebuilt.
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Counter Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
// Step 3: Use Binding widget to bind the instance of the model to
// the widget tree and tell it when the tree should be rebuilt using
// the path parameter.
Binding<CounterModel>(
source: BindingSource.of<CounterModel>(context),
path: CounterModel.countPropertyName,
builder: (_, model) => Text(
'${model.count}',
style: Theme.of(context).textTheme.display1,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: BindingSource.of<CounterModel>(context).incrementCount,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
copied to clipboard
Now every time the incrementCount method is called on the instance of the CounterModel, a propertyChanged event will be raised. This event will bubble up to the global BindingProvider and back down to all the Binding widgets that are registered to receive that specific event causing them to rebuild.