Promptless AI is here soon - Production-ready contextual code. Don't just take our word for it. Know more
Know More
Education

Exploring Flutter Tools: GetIt, Injectable, and AutoRoute

No items found.
logo

Nidhi Sorathiya

Engineering
August 8, 2023
image
Author
logo

Nidhi Sorathiya

{
August 8, 2023
}

Every evident application requires structured organization, clean coding practices, and manageable components. Flutter as a framework is powerful and flexible, but leveraging its potency requires a good understanding of available Flutter tools. The role of architectural tools is vital in simplifying development and boosting productivity.

Brief Overview of Flutter Architecture

The architecture of a Flutter application is determined by how its codebase is organized. This usually involves grouping similar functionalities together and creating a data flow hierarchy that's easy to understand and manipulate. A well-organized app ensures maintainability, scalability, and developer efficiency.

The base Flutter framework provides rudimentary state management solutions, but for anything more complex than simple apps, we generally consider external libraries. In this blog, we are going to explore Flutter GetIt, Flutter AutoRoute, and Flutter Injectable, which are some useful architectural tools.

The Necessity of Advanced Architectural Tools

As your Flutter project grows, you need scalable solutions to manage dependencies, navigate routes, and organize your codebase. That’s where advanced Flutter tools come into play.

In a larger app, managing dependencies manually becomes cumbersome. Flutter GetIt and Flutter Injectable provide solutions for automatic dependency injection and easy management with minimal boilerplate code. Similarly, for complex applications with various screens and navigation paths, the default Navigator class might not suit best, and here, Flutter AutoRoute shines with its highly flexible and strongly typed routing solution.

Understanding Flutter GetIt

GetIt is a simple service locator for Dart and Flutter projects, highly inspired by Splat. It can be used as an alternative to Provider or InheritedWidget to access objects such as services and data models from your UI.

Exploring Flutter Tools: GetIt, Injectable, and AutoRoute
Flutter GetIt

Introduction to Flutter GetIt

Flutter GetIt provides a way for your app's UI components to access your business logic classes, taking a straightforward, manageable approach to app architecture. This approach decouples the interface from the implementation, allowing us to access instances from anywhere in the app while maintaining encapsulated classes.

Core Concept of Dependency Injection

The main concept behind GetIt is the use of service locators for your App's logic, thus promoting a clean, efficient architecture.

Why Dependency Injection?

To keep the widgets free from direct dependencies, you need to position your app's logic in separate classes. With that, your code becomes easy to maintain, test, and organize.

How GetIt Facilitates Dependency Injection

GetIt works as a standalone service locator for Flutter that helps in managing dependencies in a decoupled architecture. It allows us to access these objects from our UI without requiring a BuildContext. This way, it also provides easy access to our business layer.

Here's a basic way to use GetIt to serve dependencies:

Setting Up GetIt

The setup for GetIt is quite straightforward. At your app’s start, you register all objects that you might have to access at a later point. GetIt supports singleton and factory registrations for your classes.

Handling Async Initialization with GetIt

GetIt provides support for asynchronously initializing your Singleton classes at the startup. This can be especially useful when you have to perform time-consuming initializations. We can control this async startup behaviour using mechanisms provided by GetIt.

Practical Example of Using Flutter GetIt

Understanding the theoretical aspects is quite helpful in grasping the core concepts. But nothing quite replaces the real-world use case to cement our understanding. In a real Flutter app, you might typically find GetIt being used to provide dependencies for different classes throughout the app, making them available for your UI widgets.

Exploring Flutter Injectable

Dependency injection forms the heart of any complex software system with multiple interacting classes, and Flutter Injectable helps you manage this in a much more structured manner.

Introduction to Flutter Injectable

Flutter Injectable is an automatic dependency injection generator inspired by Angular DI, Guice DI and Dagger DI. The main aim of Injectable is to generate all the boilerplate code you would normally need to write to wire up your dependencies manually, making dependency management convenient and fuss-free.

The distinctiveness of Injectable in Flutter

Injectable makes it easier to manage your dependencies for different development environments and test cases.

Compatible with GetIt

Flutter Injectable works seamlessly with Flutter GetIt. It leverages GetIt functionalities to generate and provide dependencies throughout your app.

Reducing Boilerplate Code

Injectable automates the generation of the required GetIt initialization code, reducing boilerplate and keeping your code clean while providing an easy strategy for managing dependencies.

Setting Up and Integrating Injectable

Setting up Injectable is simple. You need to add a couple of dependencies to your pubspec.yaml file:

  • injectable in the dependencies section.
  • injectable_generator in the dev_dependencies section.

Then, you need to define a setup function, which you'll annotate with @injectableInit. Finally, you need to run the generator using build_runner.

For instance, you would include Injectable in your project like so:

Next, write a setup function and annotate it with @injectableInit.

Finally, run the generator:

Detailed Example of Using Injectable

Let's now look at a real-world example. Consider you have a Service which depends on ApiProvider. Here's how you would implement it using Injectable:

In this example, ServiceA is set up to be injectable, and it depends on ApiProvider. This dependency is automatically handled by Injectable. The singleton annotation also tells Injectable that ApiProvider is a singleton.

Therefore, in this section, we have explored how Injectable can be set up and used to manage dependencies through the use of annotations and auto-generated code. Now, we shall move on to the next Flutter architectural tool, AutoRoute.

Diving Deep into Flutter AutoRoute

AutoRoute is a Flutter package that simplifies navigation setup with advanced features like route guards and custom transitions.

Introduction to Flutter AutoRoute

With Flutter AutoRoute, you can manage your app's navigation seamlessly with zero boilerplate and strong typing. It leverages Dart's code generation utility in creating route management code, leaving you to worry less about routing and focus more on the actual logic of your Flutter app.

Significance of Advanced Routing

A robust navigation system is foundational to any application that has multiple screens. The significance of AutoRoute comes into the picture in scenarios where:

Complex Navigation

As your application grows more complex, maintaining the navigation code and passing data between routes can become hard. AutoRoute simplifies this by generating code for you, taking care of the complexities behind the scenes.

Strong Typing Advantage

AutoRoute provides strong typing for route parameters. This eliminates potential runtime errors resulting from wrong argument types, leading to safer, more reliable code.

Setting Up AutoRoute

AutoRoute relies on code generation, which means you define your router and annotate it with @AutoRouter. For each of your screens, you define a PageRoute and list its route parameters. AutoRoute then generates a router class for you. The setup generally includes:

  • Declaring the router and app routes annotated with @AutoRouter.
  • Running the code generator.
  • Setting up the MaterialApp to use the generated router.

Defining Routes with AutoRoute

Routes are defined essentially using the @AutoRoute annotation. For every auto route, you specify the widget that should be loaded and optionally the route name and parameters.

Practical Example of Using Flutter AutoRoute

Here's how you would navigate to BooksListScreen:

To sum up, AutoRoute is a powerful tool that makes Flutter navigation much easier while enabling advanced features like automatic deep linking, nested routing, and routing guards. Now with this basic understanding, you can easily experiment with and explore the power of AutoRoute in your Flutter apps.

Exploring Flutter Tools: GetIt, Injectable, and AutoRoute
Working of Flutter AutoRoute

Combining GetIt, Injectable, and AutoRoute in Flutter's Ecosystem

The power held by GetIt, Injectable, and AutoRoute truly shines when combined. They collectively form an efficient architecture that eliminates boilerplate code, handles dependency injection and streamlines navigation.

Why Use These Tools Together?

These libraries are designed to work in harmony, each complementing the functionalities of the other:

  • Flutter GetIt excels in service location and managing dependencies
  • Flutter Injectable automates the GetIt setup, reducing boilerplate and simplifying dependency injection
  • Flutter AutoRoute provides advanced routing features with a zero-boilerplate navigation setup

When used together, these tools create an ecosystem that boosts Flutter development productivity and maintainability.

Larger App Example Combining All Three Tools

Let's consider an application where you have various screens, each requiring different services or dependencies. With these three libraries combined, we can set up our application as follows:

In this example, Flutter GetIt and Flutter Injectable are used together to manage dependencies efficiently. AutoRoute, on the other hand, handles the navigation from BookListScreen to BookDetailsScreen in a type-safe manner.

By integrating all three tools, we achieve a streamlined, clean, and easy-to-maintain project structure.

Final Thoughts

Having a profound knowledge of the Flutter ecosystem and mastering the tools that play a significant role in it can make the difference between a good developer and a great one.

Why Utilize These Specific Flutter Tools?

Each Flutter tool we've covered offers its unique edge:

Flutter GetIt

Provides a straightforward approach for managing dependencies across your Flutter application, allowing you easy access to instances of your classes across the widget tree.

Flutter Injectable

Reduces the boilerplate associated with setting up dependency injection, and makes your code cleaner and easier to manage.

Flutter AutoRoute

Simplifies and streamlines navigation setup, provide typesafe argument passing between routes, and ease in handling complex routing scenarios.

Together, they form a trio that saves you significant time and effort when organizing and structuring your Flutter applications.

Drawbacks and Considerations

While there are ample benefits to using these three libraries, one should be aware of the considerations involved:

  • These libraries heavily rely on code generation, which may not appeal to some developers and could complicate your setup due to occasional generation issues.
  • The use of these libraries introduces additional dependencies to your project.
  • There is a learning curve involved when first adopting these libraries and they add extra complexity which might not be needed for simpler projects.

Parting Words and Encouragement for Exploration

Learn to adapt and pick the right set of tools that suits the demands of your particular project. The field of software development is ever-evolving, and staying open-minded to new tools and practices is a key trait for a successful developer.

As we've seen, Flutter GetIt, Flutter Injectable, and Flutter AutoRoute together make for a powerful toolkit that can significantly enhance your productivity when developing Flutter applications. However, always remember that these are just tools to aid you. The ultimate determinant of your software's quality is the level of understanding, logic, creativity, and problem-solving skills you bring as a developer.

Stay curious and keep exploring the Flutter world! 💙

Frequently asked questions

Q: What is the Get_it package in Flutter?

Get_it is a service locator for Dart and Flutter projects. It helps in accessing service objects like REST API clients or databases. Get_it package in flutter can also be used to access ViewModels/ChangeNotifier/Managers/BLoCs from Flutter Views.

Q: What is the difference between GetIt and Injectable?

GetIt and Injectable serve two distinct but complementary purposes. While GetIt is a service locator that allows for easy access and management of objects such as services and data models throughout your application, Injectable is a code generator that works with GetIt to streamline the process of dependency injection, reducing manual setup and boilerplate code.

Q: Does Flutter have dependency injection?

Yes, Flutter supports dependency injection. While Flutter itself doesn’t have a built-in dependency injection solution, there are several packages available for this, including Provider, GetIt and Riverpod. Dependency Injection (DI) makes the application more testable, maintainable, and scalable.

Q: Why use dependency injection in Flutter?

Dependency injection is a crucial architectural pattern in building large-scale, maintainable software systems. By enabling inversion of control, it helps in decoupling dependencies of a class and makes the system more testable, adaptable to changes, and maintainable. In the context of Flutter, it makes widget testing easier, and effectively manages the app state and propagation of data changes throughout the widget tree.

Q: How do I navigate to another page automatically in Flutter?

In Flutter, using the Navigator class' push method is a common way to navigate to another page. AutoRoute simplifies this process, eliminating the need to manually handle route pushing. For instance, in AutoRoute, you could use context.router.push(BooksListRoute()); to automatically navigate to BooksListRoute.

Q: Which routing is best in Flutter

There is no definitive answer as it depends on the specific needs of your application. Flutter provides a basic routing system with its Navigator and Route classes, but complex apps may benefit from packages like AutoRoute or Navigator 2.0. AutoRoute provides advanced features like parameterized routing, nested routing, and automatically generated route setup, thus receiving high adoption. Remember to evaluate the routing needs of your application and choose a routing approach that best satisfies those requirements.

Frequently asked questions

No items found.