Flutterexperts

The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Keeping your widgets from having direct dependencies makes your code better organized and easier to test and maintain. But now you need a way to access these objects from your UI code. When I came to Flutter from the. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.

In this article, we will explain what is GetIt in flutter using the flutter_get_it_package. With the help of the package, and how to use them in your flutter applications. So let’s get started.

---

Table Of Contents :

GetIt

Implementation

Code Implement

Code File

Conclusion

---

Flutter :

“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”

GetIt :

GetIt package is a kind of this simple service locator in which some you will have a central registry whereby registering the class then we can get an instance of that class we use it instead of inherited widget or provider we use to access the object Is. from your UI.

Service Locator, dependency injection Both are forms of inversion of control (IOC). An IOC allows requests from anywhere from registering its class type to accessing it to the container.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :dependencies:
get_it: ^7.2.0

Step 2: Importing

import 'package:get_it/get_it.dart';

Step 3: Enable AndriodX

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

Code Implementation:

Before explaining about GetIt we will make a method of GitIt to use in our code as given in reference below.

This is our service locator.

GetIt getIt = GetIt.instance;

Next, we have created an abstract class named GetItAppModel which extends ChangeNotifier.

abstract class GetItAppModel extends ChangeNotifier {
void incrementCounter();
int get counter;
}

Now we have created a class named GetItAppModelImplementation which we have extends from GetItAppModel class inside it we have created the incrementCounter() method which increments the counter value.

class GetItAppModelImplementation extends GetItAppModel {

int _counter = 0;

GetItAppModelImplementation() {
Future.delayed(Duration(seconds: 3)).then((_) => getIt.signalReady(this));
}

@override
int get counter => _counter;

@override
void incrementCounter() {
_counter++;
notifyListeners();
}
}

After this, we will create a counter app in which we have taken column widget inside the body inside which we have taken two text widget and outside one is floatingActionButton which on click will call GetItAppModel() class and in the counter app, the value will be incremented above column widget Wrapped with FutureBuilder above and getIt.allReady(), defined in future Properties.

FutureBuilder(
future: getIt.allReady(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Scaffold(

body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
getIt<GetItAppModel>().counter.toString(),
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: getIt<GetItAppModel>().incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
} else {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text('Initialisation'),
SizedBox(
height: 16,
),
CircularProgressIndicator(),
],
);
}
})

Code File :

import 'package:flutter/material.dart';
import 'package:flutter_getit_exm/app_model.dart';
import 'package:flutter_getit_exm/main.dart';
class GetItExm extends StatefulWidget {
GetItExm({Key? key, required this.title}) : super(key: key);

final String title;

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

class _GetItExmState extends State<GetItExm> {
@override
void initState() {
getIt
.isReady<GetItAppModel>()
.then((_) => getIt<GetItAppModel>().addListener(update));
super.initState();
}
@override
void dispose() {
getIt<GetItAppModel>().removeListener(update);
super.dispose();
}

void update() => setState(() => {});

@override
Widget build(BuildContext context) {
return Material(
child: FutureBuilder(
future: getIt.allReady(),
builder: (context, snapshot) {
if (snapshot.hasData) {
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(
getIt<GetItAppModel>().counter.toString(),
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: getIt<GetItAppModel>().incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
} else {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text('Waiting for initialisation'),
SizedBox(
height: 16,
),
CircularProgressIndicator(),
],
);
}
}),
);
}
}

Conclusion :

In this article, I have explained Explore GetIt In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Explore GetIt In Flutter demo from our side.

I hope this blog will provide you with sufficient information in Trying up the Explore GetIt In Flutter in your flutter project. We showed you what the Explore GetIt In Flutter is and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.