Flutter Packages That Make the Development Experience Easy

Flutter is enriched with a lot of packages which makes the development experience easy. With the growing number of packages, I’ll share some of the packages that stand out in specific scenarios.

In this blog, we are gonna look at such Flutter/Dart packages that will help programmers improve productivity.

We are gonna look into the following packages:

• Form Builder
• Deepcopy
• Gap
• Dio
• Timeline tile

Form Builder

When working with an application that contains a lot of forms, it is tedious to create forms and form fields manually. This is where flutter_form_builder comes in.

This package provides a lot of useful built-in form fields such as checkboxes, grouped checkboxes, dropdowns, and many more. It also provides us with predefined validations which makes the coding experience much more efficient.

Install the package: flutter_form_builder

final _formKey = GlobalKey<FormBuilderState>();
FormBuilder(
  key: _formKey,
  child: Column(
    children: [
      FormBuilderTextField(
      name: key,
      decoration: InputDecoration(
          labelText:
              'name'),
      validator: FormBuilderValidators.compose([
        FormBuilderValidators.required(),
      ]),
    );
    ]
  )
)Above is an example of a form builder text field that is made as required by the validator given by flutter_form_builder.

In the same way, we can configure custom form fields as well.

Deepcopy

There are two types in which programming languages copy data:

• deep copy — Will create a new instance of the object that we copy so the new data will be in a new memory space (pass by value).
• shallow copy — Uses the same instance even if we copy, so the new data is in the same memory space (pass by reference).

Flutter uses shallow copy for Map, List, and Set. Meaning that it uses the same memory space.

  var a = {'name':'tom','age':'23'}; 
  var b = a;
  
  b['name'] = 'teddy';

  print("a: $a");
  print("b: $b");

Output:

a: {name: teddy, age: 23}

b: {name: teddy, age: 23}

This is beneficial in some cases where we can just use the same memory space, and in some cases we need the data to be deep copied. so that we can manipulate the copied data without affecting the original data.

We can deep copy using JSON decode/encode. But in some cases where we have form data in the object, we cannot make a deep copy using JSON decode/encode.

Flutter doesn’t give a method to make deep copies. This is where the deepcopy package comes in.

This package helps us to make deep copies of a map, list, or set even with nested structures.

Now, let’s get into an example:

Install the package: deepcopy

import 'package:deepcopy/deepcopy.dart';

var a = {'name':'tom','age':'23'}; 
var b = a.deepcopy();
  
b['name'] = 'teddy';
print("a: $a");
print("b: $b");Output:

Output:

a: {name: tom, age: 23}

b: {name: teddy, age: 23}

Gap

When developing Flutter applications we tend to use SizedBox a lot, where we have to pass height or width depending upon whether it’s inside Column or Row.

In the case of Column we use height, using width here makes no sense.

Column(
        children: [
          Container(),
          SizedBox(height: 10,),
          Container(),
        ],
      ),

Here we are using a Column with 2 Containers and a SizedBox separating them with a height of 10. In the case of Row here we will use width to separate them.

Instead of mentioning height and width for Column and Row respectively we can use a Gap package to make things easy.

Gap identifies whether it’s inside a Column or Row we just have to pass the value

Column(
        children: [
          Container(),
          Gap(10),
          Container(),
        ],
      ),

Here Gap knows it’s inside a Column and it changes the height accordingly.

Package link: gap

Dio

Dio is a package that overcomes the limitations of the Http package developed by Dart developers. Http provides us with all the HTTP methods but it doesn’t have features like error handling, etc.

Http is a good choice when we work with small-scale applications as it is a little bit faster than Dio.

When working with large-scale applications dio provides us with a lot of implementations that we have to do manually in Http. Let’s look into the concept of interceptor which dio provides.

An interceptor is nothing but intercepting the requests and responses to perform some actions. This will be useful for logging, error handling, etc.

Install the package: dio

The structure of the dio interceptor is as follows:

class DioInterceptor extends Interceptor{
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler){
     //manipulate API request
     return handler.next(options);
  }
  @override
  void onResponse(Response response, ResponseInterceptorHandler handler){
    //manipulate API response
    return handler.next(response);
  }
  @override
  Future<void> onError(DioException err, ErrorInterceptorHandler handler){
    //Do error handling here
    return handler.next(err);
  }
}Here, in the onRequest function, we can do things before each API call. In the onResponse function, we can do things after each API call. If there is an error, the flow goes through the onError function, where we can write the error-handling logic.

To add this interceptor to dio, In the API service add the interceptor to the dio object.

BackendApi() {
    _dio = Dio(BaseOptions(
        baseUrl: 'url', contentType: 'application/json'));
    _dio.interceptors.add(DioInterceptor());
  }

dio provides us with numerous things to do. explore more here.

About the Author

Renjith R T, a full-stack developer with nearly two years of hands-on experience. I’ve contributed to various projects, honing my skills in application development. My expertise spans across a range of technologies including Flutter, Angular, ASP.NET, and Node.js. I’m passionate about creating seamless user experiences and eager to continue pushing boundaries in the tech industry.

About CodeStax.Ai

At CodeStax.Ai, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But the real magic? It’s our tech tribe behind the scenes. If you’ve got a knack for innovation and a passion for redefining the norm, we’ve got the perfect tech playground for you. CodeStax.Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us, and be part of the revolution that’s redefining the enterprise tech landscape.