provider_view_controller 0.0.3

A flutter package to create widgets with the provider_view_controller architecture. Separating the view and its logic gives a more readable and cleaner coding experience.

provider_view_controller

A flutter package to create widgets with the provider_view_controller(pvc) architecture. Separating the view and its logic gives a more readable and cleaner coding experience.

Show some ❤️ and star the repo to support the project

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

provider_view_controller: <latest_version>

Exampe Project

There is a flutter project in the example folder. Check it out to understand all the widgets this library provides. Otherwise, keep reading to get up and running.

Usage

Let's analyze the ‘Counter app’ created every time you start a new Flutter project.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

The business logic and the view(build() method defines the view of the widget) is in the same file making it clumsy. The widget itself is responsible for managing the state of the app. Tapping on the floatingActionButton calls the _incrementCounter method that changes the state of the widget by calling setState. This is a very simple app. Consider a very large project, where you need various network calls, database access, more complex business logic. If all of that are written in one single file along with the view, the file will look like a complex cryptographic file making it harder to read and maintain.

The widget should not bother about the business logic. It should not bother where and how the data is constructed. All it should do is construct the view based on data.

The provider_view_controller(pvc) architecture follow a simple concept of seperating the view from the business logic. The widget serves as the View(via the build() method). It's concerned solely with the ‘look and feel’ of the app’s interface—‘how’ things are displayed on the screen. While it is the Controller that determines 'what’ is displayed. The Controller is also concerned with 'how' the app interacts with the user, and so it's involved in the app's event handling.

The View doesn't know or care what data it display. Tthe Controller that determines what data the View displays. The View talks to the Controller whenever it needs data.

Now let's implement the ‘Counter app’ using provider_view_controller(pvc) pattern.

// my_home_controller.dart
import 'package:flutter/foundation.dart';

class MyHomePageController extends ChangeNotifier {
  final String title;
  int counter = 0;
  MyHomePageController(this.title);

  void incrementCounter() {
    counter++;
    notifyListeners();
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  
  MyHomePage({this.title});
  
  final String title;

  @override
  Widget build(BuildContext context) {
    return StatelessMutablePVC(
      controller: MyHomePageController(title),
      builder: (context, controller, child) => Scaffold(
      appBar: AppBar(
        title: Text(controller.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.incrementCounter(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    )
    );
  }
}

The business logic for MyHomePage is moved to MyHomePageController. MyHomePageController now maintains the state of the app. The callback to onPressed now calls the controller.incrementCounter() which increments the counter and calls notifyListeners(). notifyListeners() changes the app state and rebuils the View. You may also noticed that MyHomePage is now StatelessWidget instead of StatefulWidget. Since the state of the app is now maintained by the ``MyHomePageControllerand not byMyHomePage, it no longer require to be a StatefulWidget. Consider at some point, you need to modify the incrementCounter()method to a more complex version where you need to persist the change to a local or remote database. The modification will not affectMyHomePage`.

For a very large application, this approach results in a very readable and maintainable coding pattern.

The provider_view_controller package comes with four variants of PVC pattern. See examples for more details on all the widgets this library offers and different methods of creating them.

Donations

This project needs you! If you would like to support the creator of this project or the continuous development and maintenance of this project, feel free to donate. Your donation is highly appreciated. Thank you!

PayPal

• Donate $5: Thank's for creating this project, here's a tea (or some juice) for you!
• Donate $10: Wow, I am amazed. Let me take you to the movies!
• Donate $15: I really appreciate your work, let's grab some lunch!
• Donate $25: That's some awesome stuff you did right there, dinner is on me!
• Donate $50: I really really want to support this project, great job!
• Donate $100: You are the man! This project saved me hours (if not days) of struggle and hard work, simply awesome!
• Donate $2799: Go buddy, buy Macbook Pro for yourself!

Of course, you can also choose what you want to donate, all donations are awesome!

Features and bugs

Please file feature requests and bugs at the issue tracker.

How to Contribute

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request