binding 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 64

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);
  }
}

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(),
        ),
      ),
    );
  }
}

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.
    );
  }
}

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.

[0.0.1] - July 25th, 2019.

  • Initial release.

[0.1.0] - July 26th, 2019.

  • No changes in code. Updating version just to signify that this is not a pre-0.1 package.

example/README.md

Simple Counter #

An example of how to use the Bindings package in the default flutter app that is generate by the 'flutter create' CLI command.

One Year Challenge #

One year challenge app using Data Bindings state management package

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  binding: ^0.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:binding/binding.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
29
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
64
Learn more about scoring.

We analyzed this package on Oct 18, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test