Flutter Architecture # The State Management in Provider Way ūüíô

Managing the state of the application is one of the hardest job in architecting an application, Here in out Flutter application we will be using Provider package to Architect our application.

Flutter comes with its own widget to manage the state of the application the StatefulWidget class

A widget that has mutable state.

Sample State management

 void grow() {
    setState(() { _size += 0.1; });
  }

Lets move on into our Application, Our application is a Covid’19 Tracker application that reads the data from a public api ( India Only ) and displays the data into the UI

Let’s quickly go over the structure. The lib folder is divided into four folders.

  • Ui
  • Models
  • ViewModel
  • Service

UI holds the views and is again further divided based on screen

Models holds all the plain data models, here is good tool to autogenerate your models QuickType.io which instantly parses the JSON into available languages.

ViewModel holds the Provider models for each of the Widget views

Services holds the dedicated files that will handle actual business logic

Flutter, working with Tabs !

Most of you people from Mobile app development might know it and have used it. Here in this tutorial let us learn about how to use tab, control the tabs and swipes.

Components of Tab Layout.

  1. Create the TabView
  2. Tab Controller
  3. TabBarView contents

1. Create the TabView.

Import the material package which contains the widgets for creating the Tab and Tab controller.

import 'package:flutter/material.dart';

Create a class name TabPage that extends to StatelessWidget.

import 'package:flutter/material.dart';


class TabsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return null;
  }
}

Add the Scaffold widget and AppBar to it .

import 'package:flutter/material.dart';

class TabsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tab Example'),
      ),
      body: Center(
        child: Text('Tab Layout'),
      ),
    );
  }
}

The AppBar contains an argument name bottom , we need to pass TabBar as a widget to that bottom argument. The TabBar takes the tabs as List of Widgets.

appBar: AppBar(
        title: Text('Tab Example'),
        bottom: TabBar(
          tabs: [
            Text('Text'),
            Icon(Icons.offline_pin),
            Row(
              children: [
                Icon(Icons.pageview),
                Text('Icons and Text'),
              ],
            )
          ],
        ),
      ),

Run the app, but it will not run and show the following error.

As the error show we need to pass the TabController to our TabsPage we can either add the TabController as and argument (controller) in TabBar or we can wrap the Scaffold widget inside a DefaultTabController.

2. TabController

Pass the Scaffold as child argument to DefaultTabController , length should be equal to the number of tabs added into the TabBar, the initialIndex  is used to show the current tab when opening the page.

DefaultTabController(
      // initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Tab Example'),
          bottom: TabBar(
            tabs: [
              Text('Text'),
              Icon(Icons.offline_pin),
              Text('data')
            ],
          ),
        ),
        body: Center(
          child: Text('Tab Layout'),
        ),
      ),
    );

Hit run , you can see the following screen below.

Now we have our app with DefaultTabController and our TabBar. The TabBar can have Icons or Text as tabs.

3. TabBarView contents

Pass the TabBarView as body to the scaffold. The TabBarView takes children as a List, Pass whatever widget you want as Children and the App will work.

  body: TabBarView(
          children: <Widget>[
            Center(
              child: Image.network('your image path'),
            ),
            Center(
              child: Icon(Icons.youtube_searched_for),
            ),Center(
              child: Text('Text with style'),
            )
          ],
        )

Hit run and you will see the above output.

Complete code:

import 'package:flutter/material.dart';



class TabsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      // initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Tab Example'),
          bottom: TabBar(
            tabs: <Widget>[
              Text('Image', ),
              Icon(Icons.offline_pin),
               Text('Text', style: TextStyle(
                fontSize: 18,
                color: Colors.yellow
              ),),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Center(
              child: Image.network('your image'),
            ),
            Center(
              child: Icon(Icons.youtube_searched_for),
            ),Center(
              child: Text('Text with style'),
            )
          ],


        )
      ),
    );
  }
}