Mobile application development comes often with HTTP requests. We must handle connection with external resources by doing HTTP calls and waiting for responses. When our application is getting bigger, we are using more and more requests. There is always chance that HTTP connection may fail, and we’ll want to know what was wrong.

If you’re using Flutter, there are many libraries which can handle HTTP requests: Dio, HttpClient from dart:io package, http package. You can use whatever you want in your code. But when we want to inspect these requests, we can only use console logs. Checking hundreds lines of console logs may be painful since HTTP requests/responses can be very long. The better approach to check HTTP calls can be some tool which will show HTTP request on demand, with great formatting. And here comes Alice.

Introducing Alice

Alice is a HTTP Inspector for Flutter. It’s heavily inspired from Chuck tool.

Alice intercepts HTTP requests and stores them. Alice also exposes user interface for inspecting call details. Inspector can be opened from notification (which can be disabled) or manually.

Alice works best with Dio plugin, because Dio is most advanced HTTP client for Dart language. You can also use Alice with other http clients, which will be described later.

Alice Inspector refreshes when new requests come in, so list of HTTP calls will be refreshed automatically.

Installation

First, you need to add dependency to pubspec.yaml:

dependencies:
  alice: ^<current alice version>

You can find current Alice version here: https://pub.dartlang.org/packages/alice

Second, run command:

$ flutter packages get

Third, add this import:

import 'package:alice/alice.dart';

Now you’re ready to use Alice plugin. Let’s create Alice instance:

Alice alice = Alice(showNotification: true);

If you don’t want to show notification when new request come in, you can set showNotification parameter to false.

Next thing is navigator key. You must include it in application to open inspector screen. What you need to do is just one line addition in MaterialApp widget (MaterialApp is mostly root widget in your application):

navigatorKey: alice.getNavigatorKey()

Another example:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    navigatorKey: alice.getNavigatorKey(),
    ...
  );
}

When you’re using Dio, your configuration will be very simple:

Dio dio = Dio();
dio.interceptors.add(alice.getDioInterceptor());

Dio has wonderful feature, which allows to add interceptor. Alice exposes special interceptor which must be passed to Dio instance.

Alice works best with Dio, but there is support for other http clients (not all features of Dio can be handled with these clients).

When you’re using HttpClient from dart:io package, you need to log every request and response manually:

httpClient
  .postUrl(Uri.parse("https://jsonplaceholder.typicode.com/posts"))
    .then((request) async {
  alice.onHttpClientRequest(request, body: body);
  request.write(body);
  var httpResponse = await request.close();
  var responseBody = await httpResponse.transform(utf8.decoder).join();
  alice.onHttpClientResponse(httpResponse, request, body: responseBody);
});

You need to call alice.onHttpClientRequest and alice.onHttpClientResponse to process HTTP calls from HttpClient.

Lastly, when you’re using http package, you need to pass only response:

http.get('https://jsonplaceholder.typicode.com/posts').then((response) {
  alice.onHttpResponse(response);
});

You can pass your response by calling alice.onHttpResponse.

As you can see usage of http package or HttpClient from dart:io package is little bit tricky, so i recommend using Dio for Alice

Complete example for Alice, can be find here: https://github.com/jhomlala/alice/blob/master/example/lib/main.dart

Usage

Once you’ve completed installation, you can use Alice to inspect logs. If you’ve enabled notifications, when Alice get first HTTP call, the notification will be displayed. You can click on it to start inspector.

HTTP Inspector UI has 2 screens. First one, shows list of HTTP calls that has been intercepted by Alice. Each list item contains basic information about HTTP call: method, server, endpoint, time of request, duration, amount of bytes send and received, status code. While your application waits for response, there will be progress indicator shown. Now, if you want to see more details about some HTTP call, click on it. It will navigate you to details screen.

Details screen consists of 4 tabs:

• Overview tab shows general informations of HTTP call (method, server, endpoint, request time, response time, duration, amount of bytes sent/received, client, connection security)
• Request tab shows details of HTTP request (time, amount of bytes sent, content type, request body and headers)
• Response tabs shows details of HTTP response (time, amount of bytes received, status code, response body and headers)
• Error tab shows information about error if any occurred (warning: this tab will show errors only when you’re using Dio plugin)

When you want to clear all of HTTP calls that was recorded, you can click on trash icon on toolbar.

What if you don’t want to show notification when new request is being intercepted by Alice? You can turn it off when you’re instantiating Alice (see installation above). But if you’re disabling notification, you need to access somehow inspector UI. In that case you can use this method to open inspector:

alice.showInspector();

Summary

Alice is a new plugin which helps debugging HTTP calls in your Flutter application. It works best with Dio plugin, but you can use it with other clients too. Alice offers inspector UI, which will show you details of your HTTP calls.

If you found bug, or want to share your awesome idea, feel free to open issue here:

jhomlala/alice

I’m always welcome for any contribution, so you can add your awesome idea with PR.

Thanks for reading.

P.S. Thanks Alice for your awesomeness :)

Inspecting HTTP requests in Flutter was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

Handling errors is everyday programmer job. This job is done infinite times in daily work. In Dart we can handle it easily with try-catch block. But what will happen if we miss some code? We get for example “red screen of death”.

It’s okay that our code is not always perfect. Every developer do mistakes, but great developer will fix his mistakes.

Great thing is being clear with users. When we’re users of some application, we want to know that something unexpected happend and we can decide to send error logs to developer or not. Error logs will help developers patching errors.

Developers can fix errors, but they need to know what happend and where. In mobile applications development we need tool, that will report invalid application behaviour to the authors. Currently in Flutter we have support for Sentry error tracking and soon to be Firebase Crashlytics support.

What if we don’t want to use Sentry or Crashlytics? What if we could use some generic tool, which won’t be hard to configure and will help catch errors in developoment stage or even in release? A tool that composes email, so user just need to click “Send” or save crash logs in device memory? And here comes Catcher.

Introducing Catcher

Catcher is new Flutter plugin which catches and handles errors in Flutter application. Catcher offers multiple report modes and handlers to cooperate with Flutter applications. Catcher is heavily inspired from ACRA.

Catcher report flow is easy to understand (see diagram below). Catcher injects error handlers into your application and catches all unchecked errors. Once it catches error, it creates report and sends it to reporter. Reporter shows information about error and waits for user decision. User can accept or cancel error report. If user accepts error report, then it will be processed by handlers.

You can report your checked errors which were caught in your try catch block.

Catcher also collects information about user device hardware and OS. These data can be accessed without any user permission because there’s no personal informations about user. This data will be very helpful, because sometimes error happen because of device errors, not developer.

Using Catcher

Let’s see a basic example of Catcher. First, we need to install plugin. Go to your pubspec.yaml and add this line:

dependencies:
  catcher: ^0.0.8

Next, you need to run packages get command which downloads Catcher and enables it in your project.

Last step is adding this import:

import 'package:catcher/catcher_plugin.dart';

We are ready to use Catcher. Below you can find basic example of Catcher.

main() {
  //debug configuration
  CatcherOptions debugOptions =
      CatcherOptions(DialogReportMode(), [ConsoleHandler()]);
  

  //release configuration
  CatcherOptions releaseOptions = CatcherOptions(DialogReportMode(), [
    EmailManualHandler(["recipient@email.com"])
  ]);
  

  //profile configuration
  CatcherOptions profileOptions = CatcherOptions(
    NotificationReportMode(),
    [ConsoleHandler(), ToastHandler()],
    handlerTimeout: 10000,
    customParameters: {"example": "example_parameter"},
  );

  //MyApp is root widget
  Catcher(MyApp(),
      debugConfig: debugOptions,
      releaseConfig: releaseOptions,
      profileConfig: profileOptions);
}

Normally, when you run your code, your main has only this line: runApp(MyApp()); , which starts application. When you are using Catcher, you won’t specify this line anymore. Instead of this, you need to create Catcher instance with your root widget instance and application profiles.

Catcher allows you to configure 3 application profiles: debug , release and profile . In code above we‘re creating 3 instances of CatcherOptions which describes how Catcher will behave in different modes. Catcher will use debugConfig when the application will run in debug environment, releaseConfig when the application will run in release environment and profileConfig when the application run in ‘profile’ mode.

In each CatcherOptions instance you can configure different report mode and handlers list. Click here to check all configuration parameters of CatcherOptions .

There are 4 report modes:

• Silent report mode
• Notification report mode
• Dialog report mode
• Page report mode

There are 6 handler types:

• Console handler
• Http handler
• File handler
• Toast handler
• Email auto handler
• Email manual handler

When you’re creating Catcher instance, it will starts your root widget and listens to any errors that happend in your application. Running code above in debug mode, will show dialog once error happens, where user can make decision. Once user accepts report, it will be processed by console handler and that will simply print report in console.

You can find complete basic example here.

Report modes

Let’s talk about report modes. As you know report mode is the way how we show information about error to user. Let’s see closer to each report mode.

Silent report mode is mode where user don’t take any action. There won’t be any information shown to user about error. User won’t know anything about error, unless some visual handler will show it (for example Toast Handler). Use this report mode if you don’t want to ask users for permissions to handle errors.

Example usage:

CatcherOptions(SilentReportMode(), [ConsoleHandler()]);

Notification report mode shows user local notification. Once user clicks on it, report will be accepted and processed by configured handlers. To dismiss report, user can remove notification with swipe.

Example usage:

CatcherOptions(NotificationReportMode(), [ConsoleHandler()]);

Dialog report mode shows user dialog. There are 2 buttons in this dialog: Accept and Cancel. Click on accept button will push log to handlers, cancel will dismiss report.

Example usage:

CatcherOptions(
    DialogReportMode(
        titleText: "Title",
        descriptionText: "Description",
        acceptText: "Accept",
        cancelText: "Cancel"),
    [ConsoleHandler()]);

Page report mode shows new full screen page with description of error, stack trace and 2 buttons.

Example usage:

CatcherOptions(
    PageReportMode(
        titleText: "Title",
        descriptionText: "Description",
        acceptText: "Accept",
        cancelText: "Cancel",
        showStackTrace: false),
    [ConsoleHandler()]);

Dialog report mode and page report mode requires navigation key to be configured in your application. This is very easy and you just need to add one line in your MaterialApp widget.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      //********************************************
      navigatorKey: Catcher.navigatorKey,
      //********************************************
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: ChildWidget()),
    );
  }

Report modes have multiple configuration options. You can find all of them here.

Handlers

Handlers are last element in report flow. They consume report and do something with him. You can configure multiple handlers in each profile, for example Console handler, File Handler. Let’s see every handler closer.

Console handler is basic handler. It will print formatted report to console. You can configure console handler to print or not some parts of report.

Example usage:

CatcherOptions(DialogReportMode(), [
  ConsoleHandler(
      enableApplicationParameters: true,
      enableCustomParameters: true,
      enableStackTrace: true,
      enableDeviceParameters: true)
]);

File handler can be used to store logs in user device. You just need to pass file where you want to store your logs.

Example usage:

Directory externalDir = await getExternalStorageDirectory();
String path = externalDir.path.toString() + "/log.txt";

CatcherOptions debugOptions = CatcherOptions(DialogReportMode(),[FileHandler(File(path))]);
CatcherOptions releaseOptions = CatcherOptions(DialogReportMode(),[FileHandler(File(path))]);

Catcher(MyApp(), debugConfig: debugOptions, releaseConfig: releaseOptions);

Http Handler allows to send data via Http request to server. Currently only Http POST request is supported. You can add custom headers to your request.

Example usage:

CatcherOptions(DialogReportMode(), [
  HttpHandler(HttpRequestType.post, Uri.parse("http://logs.server.com"),
      headers: {"header": "value"}, requestTimeout: 4000, printLogs: false)
]);

There is simple backend server in Java which exposes endpoint for Catcher reports. You can find implementation here.

Email auto handler adds email feature. This handler with automatically send emails to specified email address. You need to specify username and password of your sender email account, so because of this, I recommend use of this handler only during development stage.

Example usage:

CatcherOptions(DialogReportMode(),
    [EmailAutoHandler(
        "smtp.gmail.com", 587, "somefakeemail@gmail.com", "Catcher",
        "FakePassword", ["myemail@gmail.com"])
    ]);

Email manual handler is different from Email auto handler. This handler creates email and opens default email application. User need to take action to send email. You don’t need to specify sender username and password, because user will use their email as a sender, so it’s safe to use in release stage.

Example usage:

CatcherOptions(DialogReportMode(), [
  EmailManualHandler(["email1@email.com", "email2@email.com"],
      enableDeviceParameters: true,
      enableStackTrace: true,
      enableCustomParameters: true,
      enableApplicationParameters: true,
      sendHtml: true,
      emailTitle: "Sample Title",
      emailHeader: "Sample Header",
      printLogs: true)
]);

Toast handler is the last handler. It shows toast in user screen. This is great to use when you just need to show short information to user.

Example:

CatcherOptions(DialogReportMode(), [
  ToastHandler(
      gravity: ToastHandlerGravity.bottom,
      length: ToastHandlerLength.long,
      backgroundColor: Colors.red,
      textColor: Colors.white,
      textSize: 12.0,
      customMessage: "We are sorry but unexpected error occured.")
]);

Description of all handler and their options can be find here.

You can even define your own handler! Just create new class and extend ReportHandler class:

import 'package:catcher/catcher_plugin.dart';

class MyHandler extends ReportHandler{
  @override
  Future<bool> handle(Report error) async{
    //my implementation
    return true;
  }
  
}

Conclusion

Catcher is new plugin but yet powerful. Plugin is still in development, but you can use it in your project. It’s pretty easy and straightforward to implement it in your project, so give a try!

Feel free to report issues or provide feedback in Github. You are also welcome to add new features to Catcher. Feel free to contribute to this project!

jhomlala/catcher

Thanks for reading!

JavaScript is not available.

Handling Flutter errors with Catcher was originally published in Flutter Community on Medium, where people are continuing the conversation by highlighting and responding to this story.

Making HTTP requests in mobile application is one of the common tasks. Thanks to http requests, application can communicate with backend and selects data.

Flutter framework offers http package which works great when we need do basic stuff. When we need to do something more advanced, we need something bigger. And this can be done by using Dio. Dio is http connection library which has extra features like interceptors that will be helpful in many tasks (adding token authentication for each request, logging requests). Dio API is pretty easy and the library is being maintained by the authors. It’s really worth trying.

Todays modern mobile development hot topic is reactive paradigm. Almost every application uses reactive paradigm, which is great. RxDart package offers support for basic reactive things just like Subjects or Observables. For our project it will more than enough.

Managing widget/application state is open topic in Flutter. There are many implementations like Bloc and Redux(2020 update: Provider is also worth mentioning here. Check whole list here). In this article we will use Bloc pattern which is pretty simple and powerful. You can use whatever you want in your project.

In this article i’m going to show you how to work with Dio, RxDart and Bloc to create basic application which loads data from external resource and show it in application.

Data

We’re going to use random user API which generates fake user data and returns it in JSON format. For that case we will use http://randomuser.me API. The random user service accepts request on this endpoint:

Want to read this story later? Save it in Journal.

GET https://randomuser.me/api/

The result of this endpoint is this JSON:

{  
   "results":[  
      {  
         "gender":"male",
         "name":{  
            "title":"mr",
            "first":"william",
            "last":"brar"
         },
         "location":{  
            "street":"8335 stanley way",
            "city":"lloydminster",
            "state":"northwest territories",
            "postcode":"Q4D 8S9",
            "coordinates":{  
               "latitude":"-62.1569",
               "longitude":"-79.5201"
            },
            "timezone":{  
               "offset":"-11:00",
               "description":"Midway Island, Samoa"
            }
         },
         "email":"william.brar@example.com",
         "login":{  
            "uuid":"f10dd86d-3297-4e4c-a33d-65d009740057",
            "username":"brownsnake466",
            "password":"citroen",
            "salt":"ojLC7qVQ",
            "md5":"8f30c2d6382c9290c979cf585b15cca3",
            "sha1":"57ded975628df8205d1d9b6eb11b0ffa7baafa43",
            "sha256":"b8f87131af64ee9c315411dadb499c8d10bdf00985bcd4b4a52c32b76ba84f9c"
         },
         "dob":{  
            "date":"1961-07-24T23:24:35Z",
            "age":57
         },
         "registered":{  
            "date":"2015-06-04T07:15:15Z",
            "age":3
         },
         "phone":"064-200-3481",
         "cell":"790-556-8085",
         "id":{  
            "name":"",
            "value":null
         },
         "picture":{  
            "large":"https://randomuser.me/api/portraits/men/1.jpg",
            "medium":"https://randomuser.me/api/portraits/med/men/1.jpg",
            "thumbnail":"https://randomuser.me/api/portraits/thumb/men/1.jpg"
         },
         "nat":"CA"
      }
   ],
   "info":{  
      "seed":"7ea59fb8e50ce24f",
      "results":1,
      "page":1,
      "version":"1.2"
   }
}

Installation

To install Dio package, we need go to file pubspec.yamlinside Flutter project and add this line:

dio: ^3.0.8

^3.0.8 notation means that we are accepting 3.0.x versions of Dio, where x≥8 .

(You can check current Dio version here: https://pub.dartlang.org/packages/dio)

In our project we also need RxDart, so let’s add it:

rxdart: ^0.23.1

Now we are ready to run flutter packages get command. This command downloads packages and enable them in project.

Model

First step is model. We need to create class structures which correspond to JSON response from API. We don’t need to map all the data from API, since it won’t be useful. Let’s create these classes:

class Location {
  final String street;
  final String city;
  final String state;


  Location(this.street, this.city, this.state);

  Location.fromJson(Map<String, dynamic> json)
      : street = json["street"],
        city = json["city"],
        state = json["state"];
}

class Name {
  final String title;
  final String first;
  final String last;

  Name(this.title, this.first, this.last);

  Name.fromJson(Map<String, dynamic> json)
      : title = json["title"],
        first = json["first"],
        last = json["last"];
}

class Picture {
  final String large;
  final String medium;
  final String thumbnail;

  Picture(this.large, this.medium, this.thumbnail);

  Picture.fromJson(Map<String, dynamic> json)
      : large = json["large"],
        medium = json["medium"],
        thumbnail = json["thumbnail"];
}

import 'package:user/model/location.dart';
import 'package:user/model/name.dart';
import 'package:user/model/picture.dart';

class User {
  final String gender;
  final Name name;
  final Location location;
  final String email;
  final Picture picture;

  User(this.gender, this.name, this.location, this.email, this.picture);

  User.fromJson(Map<String, dynamic> json)
      : gender = json["gender"],
        name = Name.fromJson(json["name"]),
        location = Location.fromJson(json["location"]),
        email = json["email"],
        picture = Picture.fromJson(json["picture"]);

}

import 'package:user/model/user.dart';

class UserResponse {
  final List<User> results;
  final String error;

  UserResponse(this.results, this.error);

  UserResponse.fromJson(Map<String, dynamic> json)
      : results =
            (json["results"] as List).map((i) => new User.fromJson(i)).toList(),
        error = "";

  UserResponse.withError(String errorValue)
      : results = List(),
        error = errorValue;
}

Each class contains final fields and constructors (final fields must be initiated in construction part). You can find special named constructor <class>.fromJsonwhich constructs class from Map<String,dynamic>. This map will be created by Dio from endpoint response. When we init list field in UserResponse we need to setup it more complex way, which includes projection to List and map function which maps each row to User class. The UserResponse class has additional parameter error which is not being returned from API. This field will be helpful when we need to store information about any error that happend in connection process. Because of this, we need to add additional named constructor which handles the error situation and this constructor is UserResponse.withError .

API Provider

Since we have our model ready, we can create code which connects to endpoint and gets response.

import 'package:user/model/user_response.dart';
import 'package:dio/dio.dart';

class UserApiProvider{
  final String _endpoint = "https://randomuser.me/api/";
  final Dio _dio = Dio();

  Future<UserResponse> getUser() async {
    try {
      Response response = await _dio.get(_endpoint);
      return UserResponse.fromJson(response.data);
    } catch (error, stacktrace) {
      print("Exception occured: $error stackTrace: $stacktrace");
      return UserResponse.withError("$error");
    }
  }
}

UserApiProvider class contains only one method getUser which connects to endpoints and returns UserResponse . The method is asynchronous, thus the return is Future<UserResponse> .

Repository

The repository class will mediate between high level components of our architecture (like bloc-s) and UserApiProvider . The UserRepository class will be repository for our random user selected from API.

import 'package:user/model/user_response.dart';
import 'package:user/repository/user_api_provider.dart';

class UserRepository{
  UserApiProvider _apiProvider = UserApiProvider();

  Future<UserResponse> getUser(){
    return _apiProvider.getUser();
  }
}

Bloc

Let’s add high level component of our architecture which is bloc (business logic component — read about it here).

UserBloc is the only component which can be used from UI class (in terms of clean architecture). UserBloc fetches data from repository and publish it via Rx subjects.

import 'package:user/model/user_response.dart';
import 'package:user/repository/user_repository.dart';
import 'package:rxdart/rxdart.dart';

class UserBloc {
  final UserRepository _repository = UserRepository();
  final BehaviorSubject<UserResponse> _subject =
      BehaviorSubject<UserResponse>();

  getUser() async {
    UserResponse response = await _repository.getUser();
    _subject.sink.add(response);
  }

  dispose() {
    _subject.close();
  }

  BehaviorSubject<UserResponse> get subject => _subject;
  
}
final bloc = UserBloc();

getUser method gets data from repository and publish them in _subject .

BehaviorSubject is subject which returns last emitted value when new observer joins. This can be helpful when our widget will change his state. The observer will be our widget which will show user data.

dispose method should be called, when UserBloc will be no longer used.

Widget

Widget which will display user data will be build around StreamBuilder component. There will be 3 states:

1. Loading
2. Error
3. Success

Loading state is default one. It will shows progress indicator and loading text. Error state can happen when connection with API fails (for example when user goes offline). Success is state when data was loaded sucessfully.

StreamBuilder has 2 important parameters: stream which is our source of data (the component will change his state when something new has pushed through stream) and builder which allows to create child widget based on current state.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:user/bloc/user_bloc.dart';
import 'package:user/model/user_response.dart';

class UserWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _UserWidgetState();
  }
}

class _UserWidgetState extends State<UserWidget> {

@override
  void initState() {
    super.initState();
    bloc.getUser();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<UserResponse>(
      stream: bloc.subject.stream,
      builder: (context, AsyncSnapshot<UserResponse> snapshot) {
        if (snapshot.hasData) {
          if (snapshot.data.error != null && snapshot.data.error.length > 0){
            return _buildErrorWidget(snapshot.data.error);
          }
          return _buildUserWidget(snapshot.data);

        } else if (snapshot.hasError) {
          return _buildErrorWidget(snapshot.error);
        } else {
          return _buildLoadingWidget();
        }
      },
    );
  }

  Widget _buildLoadingWidget() {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [Text("Loading data from API..."), CircularProgressIndicator()],
    ));
  }

  Widget _buildErrorWidget(String error) {
    return Center(
        child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("Error occured: $error"),
      ],
    ));
  }

  Widget _buildUserWidget(UserResponse data) {
    return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("User widget"),
          ],
        ));
  }
}

_UserWidgetState is class which implements UserWidget state. In initState we inform bloc that is time to load data. In Streambuilder’s builderparameter we decide what should be displayed at this moment. When there is no data yet, we will show loading widget which is build by _buildLoadingWidget method. Once error occured, we’ll show error widget build by _buildErrorWidget method and when the data was sucessfully returned, we’ll use _buildUserWidget .

Beautify UI

Our mockup from previous point shows only Text widget. It’s time to build something more user friendly.

Firstly, there was added background gradient. This was done by wrapping UserWidget with Container widget which has BoxDecoration with LinearGradient .

Container(
  child: UserWidget(),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      stops: [0.0, 0.7],
      colors: [
        Color(0xFFF12711),
        Color(0xFFf5af19),
      ],
    ),
  ),
)

Secondly, we will declare ThemeData which contains Text styles.

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primaryColor: Colors.white,
    textTheme: TextTheme(
        title: TextStyle(fontSize: 30, color: Colors.white),
        subtitle: TextStyle(fontSize: 20, color: Colors.white),
        body1: TextStyle(fontSize: 15, color: Colors.white)),
  ),
  home: MyHomePage(),
);

Declaring theme data keeps our code cleaner, because we don’t need to specify in each Text component style data.

Next, it’s time to modify loading, error and success widgets. Loading and error widgets has received style parameter:

Text("Loading data from API...",
    style: Theme.of(context).textTheme.subtitle),

Success widget has been modified much more. It has now CircleAvatar and multiple Text widgets which display user data. Please note that between Text components we’ve added Padding widgets to create space in layout.

Widget _buildUserWidget(UserResponse data) {
  User user = data.results[0];
  return Center(
      child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      CircleAvatar(
        radius: 70,
        backgroundImage: NetworkImage(user.picture.large),
      ),
      Text(
        "${_capitalizeFirstLetter(user.name.first)} ${_capitalizeFirstLetter(user.name.last)}",
        style: Theme.of(context).textTheme.title,
      ),
      Text(user.email, style: Theme.of(context).textTheme.subtitle),
      Padding(
        padding: EdgeInsets.only(top: 5),
      ),
      Text(user.location.street, style: Theme.of(context).textTheme.body1),
      Padding(
        padding: EdgeInsets.only(top: 5),
      ),
      Text(user.location.city, style: Theme.of(context).textTheme.body1),
      Padding(
        padding: EdgeInsets.only(top: 5),
      ),
      Text(user.location.state, style: Theme.of(context).textTheme.body1),
    ],
  ));
}

Handle connection error

When we’re reaching external resources like API, many problems may happend. One of the most common error is SocketException which happens when we’re offline. In our code we have try catch block, and our application will be not killed when this error occurs. Unfortunately, user will see this error in his screen:

Exception occured: DioError [DioErrorType.DEFAULT]: SocketException: Failed host lookup: ‘randomuser.me’ (OS Error: No address associated with hostname, errno = 7)

Lets create _handleError method which will translate DioError into human readable message.

String _handleError(Error error) {
    String errorDescription = "";
    if (error is DioError) {
      DioError dioError = error as DioError;
      switch (dioError.type) {
        case DioErrorType.CANCEL:
          errorDescription = "Request to API server was cancelled";
          break;
        case DioErrorType.CONNECT_TIMEOUT:
          errorDescription = "Connection timeout with API server";
          break;
        case DioErrorType.DEFAULT:
          errorDescription =
              "Connection to API server failed due to internet connection";
          break;
        case DioErrorType.RECEIVE_TIMEOUT:
          errorDescription = "Receive timeout in connection with API server";
          break;
        case DioErrorType.RESPONSE:
          errorDescription =
              "Received invalid status code: ${dioError.response.statusCode}";
          break;
        case DioErrorType.SEND_TIMEOUT:
          errorDescription = "Send timeout in connection with API server";
          break;
      }
    } else {
      errorDescription = "Unexpected error occured";
    }
    return errorDescription;
  }
}

Dio providers multiple error types which can be handled by us. DioError has response and requestobject, which can be used to show for example invalid status code.

Then we can use _handleError method in catch block:

...
} catch (error, stacktrace) {
  print("Exception occured: $error stackTrace: $stacktrace");
  return UserResponse.withError(_handleError(error));
}

Modify Dio settings

When we want change Dio default behavior just like connection timeout time we can use Options in Dio constructor.

Dio _dio;

UserApiProvider() {
  BaseOptions options =
      BaseOptions(receiveTimeout: 5000, connectTimeout: 5000);
  _dio = Dio(options);
}

We have added default constructor for UserApiProvider class. In this constructor we need to create BaseOptions instance and specify parameters that we want to change. To see all parameters that can be changed, click here. When our BaseOptions instance is ready, we can pass it to Dio constructor.

Intercept Dio requests

One of the common problem is adding some behavior for each request/response that is being made. We can add code for each method in API provider classes, but this will be useless since Dio provides interceptors.

Let’s create interceptor which logs each response/request just like OkHttp logging interceptor style.

Dio instance has interceptors field where we can add our log interceptor. Code from our interceptor will be called before request and after response.

class LoggingInterceptor extends Interceptor{

  int _maxCharactersPerLine = 200;

  @override
  Future onRequest(RequestOptions options) {
    print("--> ${options.method} ${options.path}");
    print("Content type: ${options.contentType}");
    print("<-- END HTTP");
    return super.onRequest(options);
  }

  @override
  Future onResponse(Response response) {
    print(
        "<-- ${response.statusCode} ${response.request.method} ${response.request.path}");
    String responseAsString = response.data.toString();
    if (responseAsString.length > _maxCharactersPerLine) {
      int iterations =
      (responseAsString.length / _maxCharactersPerLine).floor();
      for (int i = 0; i <= iterations; i++) {
        int endingIndex = i * _maxCharactersPerLine + _maxCharactersPerLine;
        if (endingIndex > responseAsString.length) {
          endingIndex = responseAsString.length;
        }
        print(responseAsString.substring(
            i * _maxCharactersPerLine, endingIndex));
      }
    } else {
      print(response.data);
    }
    print("<-- END HTTP");

    return super.onResponse(response);
  }

  @override
  Future onError(DioError err) {
    print("<-- Error -->");
    print(err.error);
    print(err.message);
    return super.onError(err);
  }

}

Here is our LoggingInterceptor class. It’s extends Interceptor class provided by Dio. We need to override onRequest , onRespone and onError . We are adding our behaviour (which is just print to console) in these methods.

Very often returned response is very long and doesn’t fit console view. We need to split response longer than maxCharacterPerLine into multiple lines, so it will fit inside console. Our logger will print response output in multiple lines.

Final step: let’s add our interceptor to Dio:

_dio.interceptors.add(LoggingInterceptor());

After application restart, you should see logs in console:

End

That’s all for the basic stuff. You can check code for this project here:

jhomlala/randomuser

Feel free to visit my open source weather application build in Flutter:

jhomlala/feather

Thanks for reading!

Jan 2020: Revisited article and updated stuff!

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.