How To Implement Flutter INHERITED WIDGET

Introduction

 

This article explains how the state is managed in Flutter. There are methods you already know about, such as provider, scoped model, redux, etc. Inherited Widget is also a state management technique. Inherited Widget is fit in some cases where we want to manage a state but in the complex structure, it is not recommended to use. Now, let’s see Inherited Widgets in Flutter in detail.

 

Steps

 

Step 1

 

The first and most basic step is to create a new application in Flutter. If you are a beginner in Flutter, you can check my blog Create a first app in Flutter. I have created an app named as “flutter_inherited_widget”.

 

Step 2

 

Now, you can see that you have a counter app by default. Here, our purpose is to make the same app using the inherited widget.

 

Step 3

 

Now, create a new file named count_provider.dart. In this file, we will implement a class named as Counter which stores count variable and an increment() which increments the count variable. There is another class which inherited widget calls, i.e., CountProvider, which will be accessible to other classes where we need count variable. Following is the programming implementation of that.

import 'package:flutter/widgets.dart';

class CountProvider extends InheritedWidget {
 final Widget child;
 final Counter counter;
 CountProvider({Key key, this.child, this.counter})
     : super(key: key, child: child);

 static CountProvider of(BuildContext context) {
   return (context.inheritFromWidgetOfExactType(CountProvider)
       as CountProvider);
 }

 @override
 bool updateShouldNotify(CountProvider oldWidget) {
   return true;
 }
}

class Counter {
 int count;
 Counter(this.count);
 increment() {
   count++;
 }
}

Step 4

 

Now, in main.dart file, we will access the inherited widget using counterProvider = CountProvider.of(context); following is the programming implementation of that.

import 'package:flutter/material.dart';
import 'package:flutter_inherited_widget/count_provider.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: CountProvider(
       counter: Counter(0),
       child: MyHomePage(),
     ),
   );
 }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
 var counterProvider;
 void _incrementCounter() {
   setState(() {
     counterProvider.counter.increment();
   });
 }

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

Hurry…. Run the app and test it on emulator/simulator or device :)

 

Conclusion

 

State Management is one of the key parts of performance improvement of the app and Inherited Widget is one of the approaches for it.

• Git Repo