DEV Community: Edu Deza

Tip to reduce network calls rendering Flutter widgets

Edu Deza — Mon, 15 Feb 2021 09:34:49 +0000

If our app is getting data through network request from our backend usually we handle the response with FutureBuilder or StreamBuilder widgets (state management approaches apart).

We can have something like this (this example use a FutureBuilder but of course we can do it with a StreamBuilder):

class MyHomePage extends StatelessWidget {
  final String title;
  final PostProvider postProvider = PostProvider();

  const MyHomePage({@required this.title});

  Future<List<Post>> getFuturePostList() async {
    return await postProvider.getPostList();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: getFuturePostList(),
        builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot) {
          Widget child;
          if (snapshot.hasData) {
            // Show widget with list of Post
          } else if (snapshot.hasError) {
            child = Center(child: Text("Error: ${snapshot.error.toString()}"), );
          } else {
            child = Center(child: CircularProgressIndicator());
          }

          return child;
        });
  }
}

The example above, is a very simple app fetching a list of Post objects trough our PostProvider (this class makes a request to our backend using for example http package), and render through a FutureBuilder widget.

It's not a bad approach and of course is running ok, but doing at this way, we are making a new request every time our widget is build.

A simple tip that can reduce drastically these number of calls, is extending our widget from a StatefulWidget and next instead of pass a function to our FutureBuilder, override initState method, and store the result in a variable.

Let's go to see:

class MyHomePage extends StatefulWidget {
 const MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final String title;
  final PostProvider postProvider = PostProvider();
  Future<List<Post>> futurePostList;

  Future<List<Post>> getFuturePostList() async {
    return await postProvider.getPostList();
  }

  @override
  void initState() {
     futurePostList = getFuturePostList();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: futurePostList,
        builder: (BuildContext context, AsyncSnapshot<List<Post>> snapshot) {
          Widget child;
          if (snapshot.hasData) {
            // Show widget with list of Post
          } else if (snapshot.hasError) {
            child = Center(child: Text("Error: ${snapshot.error.toString()}"), );
          } else {
            child = Center(child: CircularProgressIndicator());
          }

          return child;
        });
  }
}

Now, our widget only do the request at initState, and every time we render (build) our widget we are avoiding to extra requests.

Tip: Avoid calling functions (doing network calls) at build state, and try to find another approach.

Improve your Flutter network requests

Edu Deza — Fri, 15 Jan 2021 09:44:37 +0000

One of the most important goals making mobile requests is reduce as much as possible the size and time.

If you've read the article JSON and serialization and you are using the library json_serializable it's very easy to serialize nested objects.

But we have a trouble with serialization of these nested objects.

See an example, so suppose you have these two classes:


@JsonSerializable(explicitToJson: true)
class Brand {
 int id;
 String name;

 Brand(this.id, this.name)

 factory Brand.fromJson(Map<String, dynamic> json) => 
 _$BrandFromJson(json);

  Map<String, dynamic> toJson() => _$BrandToJson(this);
}

@JsonSerializable(explicitToJson: true)
class Car {
 int id;
 String model;
 String fuel;
 Brand brand;

 Car(this.name, this.fuel, this.brand)

 factory Car.fromJson(Map<String, dynamic> json) => 
 _$CarFromJson(json);

  Map<String, dynamic> toJson() => _$CarToJson(this);
}

As you can see, Car has a relation to Brand. So, if you do:

Brand brand = Brand(1, "Ford");
Car car = Car("Mustang", "gasoline", brand);

print(car.toJson());

The result is:

{name: Mustang, fuel: gasoline, brand: {id: 1, name:ford}}

Every time you do a request you are sending the above payload.

Ok, in this case it's not a problem because is small, but if we have a complex objects modeling, this may be a problem serializing all brand properties.

So we can do a simple but a great improvement adding a @JsonKey (json_annotation package).

@JsonSerializable(explicitToJson: true)
class Car {
 int id;
 String model;
 String fuel;

 @JsonKey(toJson: _brandJsonReplace)
 Brand brand;

 static Map<String, int> _brandJsonReplace(Brand brand) => {"id": brand.id};

 Car(this.name, this.fuel, this.brand)

 factory Car.fromJson(Map<String, dynamic> json) => 
 _$CarFromJson(json);

  Map<String, dynamic> toJson() => _$CarToJson(this);
}

Now following the previous example:

Brand brand = Brand(1, "Ford");
Car car = Car("Mustang", "gasoline", brand);

print(car.toJson());

The result is:

{name: Mustang, fuel: gasoline, brand: {id: 1}}

As you can see, brand properties are replaced by only id property, reducing payload size.

Ok, it's not a perfect solution and of course depends on your object relationships. But I think it's a simple and effective way to improve the requests.

Dart (Flutter) serialize nested generics

Edu Deza — Fri, 07 Feb 2020 15:07:32 +0000

Few days ago, we’ve had to serialize a paged results response.

This PagedResult object has a List of Generic results, so depending on what result we want to receive, we need to map as one or othe Class.

The Trouble

Flutter doesn’t supports Reflection and neither allow to pass class or constructor as function parameter.

Model examples

class PagedResult<T> {
  final int totalItems;
  final int startItems;
  final int itemsPerPage;
  final int currentPage;
  final int totalPages;
  final List<T> results;

  PagedResult({
  this.totalItems,
  this.startItems,
  this.itemsPerPage,
  this.currentPage,
  this.totalPages,
  this.results});
}


@JsonSerializable()
class Customer {
  final int id;
  final String firstName;
  final String lastName;
  final String secondLastName;
  final String phone1;
  final String phone2;
  final String email;

  Customer(
      {this.id,
      this.firstName,
      this.lastName,
      this.secondLastName,
      this.phone1,
      this.phone2,
      this.email});

 factory Customer.fromJson(Map<String, dynamic> json) => _$CustomerFromJson(json);

  Map<String, dynamic> toJson() => _$CustomerToJson(this);
}


@JsonSerializable()
class Product {
  final int id;
  final String ref;
  final double price;
  final String description;
  final double tax;

  Product(
      {this.id,
      this.ref,
      this.price,
      this.description,
      this.tax});

 factory Product.fromJson(Map<String, dynamic> json) => _$ProductFromJson(json);

  Map<String, dynamic> toJson() => _$ProductToJson(this);
}

Our goal is to serialize PagedResults as PagedResults of Customer and PagedResults of Product.

We have multiple options to do it:

Brute force

We can create one PagedResult class for each "class":


class PagedResultCustomer<Customer> {
  final int totalItems;
  final int startItems;
  final int itemsPerPage;
  final int currentPage;
  final int totalPages;
  final List<Customer> results;

  PagedResult({
  this.totalItems,
  this.startItems,
  this.itemsPerPage,
  this.currentPage,
  this.totalPages,
  this.results});

 factory PagedResultCustomer.fromJson(Map<String, dynamic> json) {
   final items = json['results'].cast<Map<String, dynamic>>();
   return PagedResult<Customer>(
    totalItems = json.totalItems;
     .
     .
     .
    results = new List<Customer>.from(items.map((itemsJson) => Customer.fromJson(itemsJson)))
    )
 }
}

class PagedResultProduct<Product> {
  final int totalItems;
  final int startItems;
  final int itemsPerPage;
  final int currentPage;
  final int totalPages;
  final List<Product> results;

  PagedResult({
  this.totalItems,
  this.startItems,
  this.itemsPerPage,
  this.currentPage,
  this.totalPages,
  this.results});

factory PagedResultProduct.fromJson(Map<String, dynamic> json) {
  final items = json['results'].cast<Map<String, dynamic>>();  
  return PagedResult<Product>(
    totalItems = json.totalItems;
     .
     .
     .
    results = new List<Product>.from(items.map((itemsJson) => Product.fromJson(itemsJson)))
    )
}

It's a simple solution but not accomplish with DRY PRINCIPLE

Young Padawan

Another way is try to follow DRY PRINCIPLE and based on code above we can do:


class PagedResult<T> {
  final int totalItems;
  final int startItems;
  final int itemsPerPage;
  final int currentPage;
  final int totalPages;
  final List<T> results;

  PagedResult({
  this.totalItems,
  this.startItems,
  this.itemsPerPage,
  this.currentPage,
  this.totalPages,
  this.results});

 /// We require a second parameter to be an object that implements a 
/// fromJson method. Ok, I'm not using Typing for this, but if object
/// hasn't fromJson method, we'll throw a new Exception :)
factory PagedResult.fromJson(Map<String, dynamic> json, object) {
  final items = json['results'].cast<Map<String, dynamic>>(); 
  return PagedResult<T>(
    totalItems = json.totalItems;
     .
     .
     .
    results = new List<T>.from(items.map((itemsJson) => object.fromJson(itemsJson)))
    )
 }
}

@JsonSerializable()
class Customer {
  final int id;
  final String firstName;
  final String lastName;
  final String secondLastName;
  final String phone1;
  final String phone2;
  final String email;

  Customer(
      {this.id,
      this.firstName,
      this.lastName,
      this.secondLastName,
      this.phone1,
      this.phone2,
      this.email});

/// We don't use factory, instead we implement a fromJson method object
Customer fromJson(Map<String, dynamic> json) => _$CustomerFromJson(json);

 Map<String, dynamic> toJson() => _$CustomerToJson(this);
}

To run:

/// We pass a new object Customer as parameter
final PagedResult<Customer> pagedCustomer = PagedResult<Customer>.fromJson(json, new Customer());

Ok, it's a better solution than Brute Force but I don't like the requirement to need to instantiate a new object for this.

Jedi

Dart doesn't support Reflection, or pass class/factory as parameter, but it allow to pass a method :)

So we can change a bit the code above:


class PagedResult<T> {
  final int totalItems;
  final int startItems;
  final int itemsPerPage;
  final int currentPage;
  final int totalPages;
  final List<T> results;

  PagedResult({
  this.totalItems,
  this.startItems,
  this.itemsPerPage,
  this.currentPage,
  this.totalPages,
  this.results});

 /// We require a second parameter to be a Function, and we'll trigger 
/// this function for serializing results property
 factory PagedResult.fromJson(Map<String, dynamic> json, Function fromJson) {
   final items = json['results'].cast<Map<String, dynamic>>();
   return PagedResult<T>(
    totalItems = json.totalItems;
     .
     .
     .
    results = new List<T>.from(items.map((itemsJson) => fromJson(itemsJson)))
    )
 }
}

@JsonSerializable()
class Customer {
  final int id;
  final String firstName;
  final String lastName;
  final String secondLastName;
  final String phone1;
  final String phone2;
  final String email;

  Customer(
      {this.id,
      this.firstName,
      this.lastName,
      this.secondLastName,
      this.phone1,
      this.phone2,
      this.email});

/// We change object method to a static class method (avoid instantiate object)
static Customer fromJson(Map<String, dynamic> json) => _$CustomerFromJson(json);

 Map<String, dynamic> toJson() => _$CustomerToJson(this);
}

To run:

/// We pass a new object Customer as parameter
final PagedResult<Customer> pagedCustomer = PagedResult<Customer>.fromJson(json, Customer.fromJson);

Of course, there are more solutions to serialize generics but I think the Jedi method is a fine and clear solution to do it.