Related articles Develop login functionality using Flutter MVVM

As a developer, it is important to choose a framework that works for you to improve productivity and create a pleasant coding experience. In the past two years, I have shifted from back-end development to Web development, and the focus of development has also changed from the previous data level to the present level. Javascript, React, Angular, ember.js, etc., are all popular and good choices for web developers. Choose Angular over other frameworks.

 

Angular

I chose Angular because many of the concepts in Angular are familiar, even familiar, to a former backend developer: Modules, dependency injection, guards, providers, and so on. But what attracted me most was its elegant data-binding functionality. Angular’s data-binding “syntax” is so simple that even a novice can understand it after a glance. It is also very easy to use, almost like manipulating JS native objects, easy to understand.

Data binding in Angular

<h2>{{ title }}</h2>
<div *ngIf="status === 1">hello world!</div>
Copy the code

Data binding is at the heart of Angular, and it makes it much easier for developers to control the DOM tree of a page, freeing us from complex page manipulation. Actually is not only presents, Vue. Js, React, Ember. Js framework also have similar implementation, this industry through data binding driver view changes is sometimes called the MVVM (zh.wikipedia.org/wiki/MVVM).

 

Flutter

To build a Flutter app, most of the work involves building widget trees (UIs). The widget tree structure is similar to the DOM tree in HTML and should not be difficult for Web developers to understand. However, once you get used to it, the manipulation of widget trees seems like a return to the getElementById era in HTML. Even simple widget changes require developers to manually manage a lot of code logic. If you encounter complex scenarios of multiple widget changes, Developers are inevitably faced with a heavier code workload. This is unacceptable for my lazy Angular development! ~

There are several steps to implement widget changes in Flutter

  1. Create a file fromStatefulWidgetInheritance of class
  2. Create a correspondingWidgetThe state of the class
  3. Write the change logic and eventually update to the UI using setState()

 

Flutter MVVM

Since the widget tree in Flutter is similar to the DOM tree in HTML, and all web frameworks can use data binding to simplify the control of the DOM tree, can data binding simplify the control of the widget tree in Flutter like the Web framework does? With this question in mind, a Flutter MVVM was attempted.

  • Source address github.com/unicreators…
  • PUB. The PUB address dev/packages/mv…

 

It may help you solve the following problems in Flutter development

  • I have difficulty choosing between a StatelessWidget and a StatefulWidget.
  • I’m a lazy person and I don’t want to manually setState every time I change a widget(UI display)
  • I’m a neat freak, and when I’m developing features, I want the functions to be clearer.
  • Most importantly, I wish I could free myself from the complexity of controlling the widget tree structure.

 

What? With all that said, how about a few lines of code?

Using her in a project involves several steps

1. Add dependencies to the project

Locate the pubspec.yaml file in your project and add the following in the Dependencies section

The MVVM: ^ 0.1.3Copy the code

2. Add a package reference

Add to the code page

import 'package:mvvm/mvvm.dart';
Copy the code

3. Create a ViewModel

The ViewModel class inherits from the ViewModel class and uses the propertyValue method in the constructor to create properties that need binding support

import 'package:mvvm/mvvm.dart';
import 'dart:async';

// define ViewModel
class Demo1ViewModel extends ViewModel {
  Demo1ViewModel() {
    // define bindable
    propertyValue<DateTime> ("time", initial: DateTime.now());
    // start timer
    start();
  }

  start() {
    Timer.periodic(const Duration(seconds: 1), (_) {
      // call setValue
      setValue<DateTime> ("time".DateTime.now()); }); }}Copy the code

There are propertyAdaptive and propertyAsync methods similar to propertyValue to create properties. For details, see the examples in the source code

4. Create a View

The View class inherits from the View class and specifies that you use the viewmodel you just created. Override the Widget BuildCore(BuildContext) method and build view widgets within the method using the helper attributes $(ViewContext) and $Model (ViewModel)

import 'package:mvvm/mvvm.dart';
import 'package:flutter/widgets.dart';

// define View
class Demo1 extends View<Demo1ViewModel> {

  // call super
  Demo1() : super(Demo1ViewModel());

  @override
  Widget buildCore(BuildContext context) {
    return Container(
        margin: EdgeInsets.symmetric(vertical: 100),
        padding: EdgeInsets.all(40),

        child: Column(children: [
          // binding
          $.watchFor("time",
              builder: $.builder1((t) => Text(
                  "${t.hour}:${t.minute}:${t.second}",
                  textDirection: TextDirection.ltr))),
          // binding
          $.$ifFor("time",
              builder: $.builder0(
                  () => Text("hello world!", textDirection: TextDirection.ltr)),
              valueHandle: (t) => t.second % 2= =0))); }}Copy the code

With $. WatchFor (..) Similarly, $.watch(..) , $. If (..) , $. Cond (..) , $. CondFor (..) , $. The switch (..) , $. SwitchFor (..) And so on, the follow-up can also be extended more, usage see the source code examples

5. Application view

// run
void main() => runApp(Demo1());
Copy the code

 

$.watchfor (..) , $. IfFor (..) What if the grammar is a little kinder? These are similar implementations of the data binding syntax mentioned earlier.

In the MVVM implementation of Flutter, we split the widget tree and logical data that had been mixed together into two parts, the ViewModel and the View, and established the association between them through data binding. Finally, the view logic (ViewModel) is combined with the data binder to drive the view (widget tree) changes. As you can see in the example, we are more focused on the View presentation in the View class. All data operations related to the View logic are managed by the ViewModel, with a clear demarcation of responsibilities.

 

The last

The MVVM pattern has a long history and is used in many presentation layer frameworks and is popular with developers. The implementation of Flutter is still rudimentary, and there are many areas that can be expanded, but I believe it will become more and more perfect, and I hope it can bring you the joy of coding. Thank you for reading!

Can she bring you closer to app development? Come and try it.

 

Related articles

  • Develop the login function using Flutter MVVM

A link to the

  • Making: github.com/unicreators…
  • Pub: pub. Dev/packages/mv…
  • APIs: pub. Dev/documentati…
  • Example: github.com/unicreators…