reactivestore 0.0.2

A new Flutter package which helps developers in managing the state of their apps and creating reactive components/widgets with less boiler plate code.

example/reactivestore_example.dart

import 'package:flutter/material.dart';
import 'package:reactivestore/model/store_model.dart';
import 'package:reactivestore/reactivestore.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ReactiveStore(
      child: MaterialApp(
        title: 'Reactive Store App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: 'Reactive Store'),
      )
    );
     
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    TextStyle titleStyle = Theme.of(context).textTheme.subtitle1;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: new Column(
        children: <Widget>[
          new Padding(
              padding: EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Text("Total Members:",style: TextStyle(fontWeight: FontWeight.w300,fontSize: 22.0),textAlign: TextAlign.left,),
                ),

                new Padding(
                    padding: EdgeInsets.all(10.0),
                    child: UpdateUI(
                      builder: (context,consumerModel,child)=>consumerModel.itemsList !=null?Text(
                        consumerModel.totalItems.toString(),
                        style: TextStyle(fontWeight: FontWeight.w500,fontSize: 25.0, color: Colors.green),):null,
                    )
                )
              ],
            ),
          ),
          UpdateUI(
              builder: (context,customerModel,child)=>Expanded(
                child: new ListView.builder(
                  itemCount: customerModel.itemsList !=null? customerModel.totalItems:0,
                    itemBuilder: (BuildContext context, int index){
                      return new Padding(
                          padding: EdgeInsets.only(left: 5.0,right: 5.0),
                        child: Card(
                          elevation: 5.0,
                          child: ListTile(
                            leading: CircleAvatar(
                              backgroundColor: Colors.blue,
                              child: Icon(Icons.person_outline),
                            ),
                            title: Text(customerModel.itemsList[index]['name'], style: titleStyle,),
                            subtitle: Text('\$ ${customerModel.itemsList[index]['salary'].toString()}.00',style: titleStyle,),
                            trailing: new GestureDetector(
                              child: new Icon(Icons.delete, color: Colors.red,),
                              onTap: (){
                                _showAlertDialog('Status', 'Are you sure you want to delete ${customerModel.itemsList[index]['name'].toUpperCase()}',index);
                              },
                            ),
                          ),
                        ),
                      );
                    }
                ),

            ),
          )

        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          showDialog(context: context, builder: (_) => MyCustomDialog());
        },
        child: Icon(Icons.person_add),
      ),
    );
  }
   void _showAlertDialog(String title, String message, int index){
    final model = StoreModel(); //Model is the Observable
    final x = model.of(context, true); //Use of method in model with context and listen set to true. To update UI
    AlertDialog alertDialog = AlertDialog(
      title: new Icon(Icons.warning, size: 80.0, color: Colors.amber,),
      content: Text(message),
      actions: <Widget>[
        FlatButton(
          child: Text('YES',style: TextStyle(color: Colors.red),),
          onPressed: () {
            x.remove(index);
            Navigator.of(context).pop();
          },
        ),

        FlatButton(
          child: Text('CANCEL'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
    showDialog(
        context: context,
        builder: (_)=>alertDialog
    );
  }
}

class MyCustomDialog extends StatefulWidget {
  @override
  MyCustomDialogState createState() {
    return new MyCustomDialogState();
  }
}

class MyCustomDialogState extends State<MyCustomDialog> {
  final formKey = new GlobalKey<FormState>();
  Size deviceSize;

  String name, salary;

  @override
  Widget build(BuildContext context) {
    deviceSize = MediaQuery.of(context).size;
    return Dialog(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12.0),
        ),
        child: Container(
          height: deviceSize.height / 2.0,
          child: new Form(
            key: formKey,
            child: new Column(
              children: <Widget>[
                Flexible(
                    child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      new Padding(
                        padding: EdgeInsets.only(left: 30.0, top: 30.0),
                        child: new Text(
                          "Customer Details",
                          style: TextStyle(
                              fontWeight: FontWeight.w300, fontSize: 25.0),
                        ),
                      ),
                      new Padding(
                        padding: EdgeInsets.all(10.0),
                        child: new ListTile(
                          leading: const Icon(Icons.person_outline),
                          title: new TextFormField(
                            autofocus: false,
                            decoration: InputDecoration(
                              labelText: "Full Name",
                            ),
                            validator: (value) => value.isEmpty
                                ? "Fristname cant\'t be empty"
                                : null,
                            onSaved: (value) => name = value,
                          ),
                        ),
                      ),
                      new Padding(
                        padding: EdgeInsets.all(10.0),
                        child: new ListTile(
                          leading: const Icon(Icons.attach_money),
                          title: new TextFormField(
                            autofocus: false,
                            initialValue: this.salary,
                            keyboardType: TextInputType.numberWithOptions(),
                            decoration: InputDecoration(
                              labelText: "Salary",
                            ),
                            validator: (value) => value.isEmpty
                                ? "Amount No cant\'t be empty"
                                : null,
                            onSaved: (value) => salary = value,
                          ),
                        ),
                      ),
                      new Padding(
                        padding: EdgeInsets.only(right: 0.0),
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            new FlatButton(
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                                child: new Text(
                                  "CANCEL",
                                  style: TextStyle(color: Colors.red),
                                )),
                            new FlatButton(
                                onPressed: () {
                                  addCustomer();
                                },
                                child: new Text(
                                  "ADD",
                                  style: TextStyle(color: Colors.blue),
                                )),
                          ],
                        ),
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
        ));
  }

  bool validateAndSave() {
    final form = formKey.currentState;
    if (form.validate()) {
      form.save();
      return true;
    } else {
      return false;
    }
  }

  Future addCustomer() async {
    if (validateAndSave()) {
      final model = StoreModel(); //Model is the Observable
      final x = model.of(context, true); //Use of method in model with context and listen set to true to update UI
      x.add({'name': this.name, 'salary': this.salary});
      Navigator.pop(context);
    }
  }
}