DEV Community: Aditya Rohman

Easy Way to Create a Good Error-Handling in Flutter with Dartz

Aditya Rohman — Fri, 06 May 2022 14:28:51 +0000

As developers, our main task is to create applications to solve certain problems. When published, the application we develop may produce some errors in front of the user. For example, maybe our users enter data incorrectly, the connection is lost, or even our server is down.

A good application will be able to handle the error and can point the user on the right path again. We certainly don’t want just because the app can’t handle minor errors like lost connection, the user decides to uninstall it.

In this article, I will show how to create good error handling in a Flutter project using Dartz.

Implementation

First things first, we need to figure out what errors are possible that will happen. In a login flow, for example, the common error is:

User inputs wrong password or email not registered
The server maybe had a problem
Lost internet connection

Now, let’s add the package that we need to the pubspec.yaml file:

...
dependencies:
    flutter:
        sdk: flutter

    dartz: ^0.10.1
    ...

Inside the Dartz package, we will use something called Either<L,R> class. This class will be used to return 2 different things in a function.

/// Create variety of exceptions
/// Enum to help create conditions
enum LoginFailure { invalidCredentials, error }

/// Repository
/// This class can be consumed by controller, provider, or other state management later
class SomeRepository {
  final http.Client _client;

  Future<Either<LoginFailure, bool>> login(String email, String password) async {
    final _response = await _client.post(
      Uri.parse(Urls.nowPlayingMovies),
      body: {'email': email, 'password': password}
    );

    if (_response.statusCode == 201) {
      return Right(true);
    } else if (_response.statusCode == 400) {
      return Left(LoginFailure.invalidCredentials);
    } else {
      return Left(LoginFailure.error);
    }
  }

  ...
}

There is a function with the type Future<Either<LoginFailure, bool>>. With that type, now I can return 2 different things out of that function. When the request is successful (with status code 200), boolean true will be returned as the right value. If a request failed, I can easily handle it by returning the enum as the left value. The enum class act as a helper to create conditions.

And this is the way we consume the login function, for example in a controller:

class SomeController {
  Future login(String email, String password) async {
    final _result = await _repository.login(email, password);
    _result.fold(
      (l) {
        /// Handle left
        /// For example: show dialog or alert
      },
      (r) {
        /// Handle right
        /// For example: navigate to home page
      },
    );
  }
}

Now you can create some user interactions like this.

Recap

So, that's the way to implement a good error-handling on Flutter. The term good means our app has more rich error-handling to help the user understand if there is something wrong when they use the app.

Thanks for reading. I hope these short tips can help you write a more clean, concise, and robust codebase for your Flutter project.

If you find this article helpful, please leave some reaction badges for me, if you don’t mind. Also, follow me to get updates about my latest articles in the future.

Build a Responsive Flutter App with The Power of MediaQuery

Aditya Rohman — Thu, 27 May 2021 09:53:16 +0000

First of all, I wanna say that I’m so excited about the new release of Flutter 2.2 with null-safety stable. But we'll talk about it later.

When we develop an app with a multi-platform framework like Flutter. Responsive and Adaptive are something important to care about. Because our app isn’t only run on a smartphone, but in various devices with different aspect ratio and visual density. So, as a developer, our task is to make sure our app layout is stable, good, and adaptive to all of those devices.
Okay, in this article I will show you step-by-step how to build a responsive app with Flutter. Feel free to follow along.

Load The Project

I have created a starter project. So, you don’t have to create a project from scratch. Just clone this repository

codestronaut / flutter_responsive_onboarding

Demo flutter responsive handle with MediaQuery

Note:
On that repository, select the branch flutter_responsive_onboarding_starter. Now, you’re ready to start

On that source code, I make separate packages/folders to keep our code more clean and maintainable. This is what the lib folder looks like:

Inside the lib folder there are several folders:

Screens: used to put all app screens or layouts
Utils: used to put all utilities such (i.e. constants, helper, etc)
Widgets: used to put widgets

Remember:
When developing an app, make sure to create single-responsibility functions, classes, and widgets (on Flutter). That's why it's better to separate the code into small pieces.

Working On The Widgets

Let’s begin with the widgets folder. We will write some code to construct the layout:

Title Widget

import 'package:flutter/material.dart';
import 'package:flutter_responsive_onboarding/utils/utils.dart';

class TitleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width;

    return Center(
      child: Image(
        image: AssetImage('assets/title.png'),
        width: Utils.getDeviceType() == 'phone'
            ? deviceWidth / 2
            : deviceWidth / 3,
      ),
    );
  }
}

Illustration Widget

import 'package:flutter/material.dart';
import 'package:flutter_responsive_onboarding/utils/utils.dart';

class IllustrationWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width;

    return Center(
      child: Image(
        image: AssetImage(
          'assets/illustration.png',
        ),
        width:
            Utils.getDeviceType() == 'phone' ? deviceWidth : deviceWidth / 1.2,
      ),
    );
  }
}

Caption Widget

import 'package:flutter/material.dart';
import 'package:flutter_responsive_onboarding/utils/utils.dart';
import 'package:google_fonts/google_fonts.dart';

class CaptionWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Text(
            'Play Anywhere',
            style: GoogleFonts.inter(
              fontSize: Utils.getDeviceType() == 'phone' ? 28.0 : 46.0,
              fontWeight: FontWeight.w800,
            ),
          ),
          SizedBox(
            height: 16.0,
          ),
          Text(
            'The video call feature can be\naccessed from anywhere in your\nhouse to help you.',
            textAlign: TextAlign.center,
            style: GoogleFonts.inter(
              fontSize: Utils.getDeviceType() == 'phone' ? 18.0 : 28.0,
              fontWeight: FontWeight.w300,
              color: Color(0xFFA6A6A6),
            ),
          ),
        ],
      ),
    );
  }
}

Indicator Widget

import 'package:flutter/material.dart';
import 'package:flutter_responsive_onboarding/utils/utils.dart';

class IndicatorWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(
            Icons.paid,
            color: Color(0xFF4756DF),
            size: Utils.getDeviceType() == 'phone' ? 24.0 : 32.0,
          ),
          Icon(
            Icons.paid,
            color: Color(0xFFB9BFF3),
            size: Utils.getDeviceType() == 'phone' ? 24.0 : 32.0,
          ),
          Icon(
            Icons.paid,
            color: Color(0xFFB9BFF3),
            size: Utils.getDeviceType() == 'phone' ? 24.0 : 32.0,
          ),
        ],
      ),
    );
  }
}

Button Widget

import 'package:flutter/material.dart';
import 'package:flutter_responsive_onboarding/utils/utils.dart';
import 'package:google_fonts/google_fonts.dart';

class ButtonWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width;

    return Container(
      width: Utils.getDeviceType() == 'phone'
          ? deviceWidth / 2
          : deviceWidth / 2.5,
      height: Utils.getDeviceType() == 'phone' ? 56.0 : 72.0,
      child: ElevatedButton(
        child: Text(
          'Get Started',
          style: GoogleFonts.roboto(
            fontSize: Utils.getDeviceType() == 'phone' ? 18.0 : 24.0,
          ),
        ),
        style: ElevatedButton.styleFrom(
          primary: Color(0xFF4756DF),
          elevation: 0.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(
              Utils.getDeviceType() == 'phone' ? 15.0 : 20.0,
            ),
          ),
        ),
        onPressed: () {},
      ),
    );
  }
}

All right, all of our widgets are ready and have a single responsibility. If you notice, we use MediaQuery to get the device width. Then, we manipulate the width of all widgets that we have to make it more sense when the app running on smartphones and tablets.

double deviceWidth = MediaQuery.of(context).size.width;

The variable deviceWidth will change as well as the device type change. Until this step, you may have errors in your widget's code. To control the UI behavior, add the following code to Utils Class:

import 'package:flutter/material.dart';

class Utils {
  static String getDeviceType() {
    final data = MediaQueryData.fromWindow(WidgetsBinding.instance!.window);
    return data.size.shortestSide < 550 ? 'phone' : 'tablet';
  }
}

In Utils class, we use MediaQueryData to specify the kind of devices. We get the shortest side of the device. We can specify the shortest side < 550 is a smartphone. Otherwise, it must be a tablet.

Complete The Pages

Let’s complete our on_boarding_screens.dart! Put all widgets on the column. This is the arrangement of the widgets:

import 'package:flutter/material.dart';
import 'package:flutter_responsive_onboarding/widgets/button_widget.dart';
import 'package:flutter_responsive_onboarding/widgets/caption_widget.dart';
import 'package:flutter_responsive_onboarding/widgets/illustration_widget.dart';
import 'package:flutter_responsive_onboarding/widgets/indicator_widget.dart';
import 'package:flutter_responsive_onboarding/widgets/title_widget.dart';

class OnBoardingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 16.0,
            vertical: 24.0,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              // Here is where the widget will build
              TitleWidget(),
              Column(
                children: [
                  IllustrationWidget(),
                  CaptionWidget(),
                  SizedBox(
                    height: 16.0,
                  ),
                  IndicatorWidget(),
                ],
              ),

              ButtonWidget(),
            ],
          ),
        ),
      ),
    );
  }
}

Now, our app is ready. Let’s run it and see the result on both a smartphone and a tablet. Here are the results:

All right. So, that’s the step of how to make your Flutter app more responsive on any kind of device. For web and other OS, you can add more conditions in the Utils file.

This is the traditional method to make your app responsive. Flutter has provided tools for that. But, if you want to work faster, then you better use third-party packages like the following:

Sizer (Link to Pub.dev)
Responsive Framework (Link to Pub.dev)

That’s all from me. If you like this kind of article, please give me claps :) also if you have any questions, feel free to post a comment to this article. Thank you so much!

For the complete source code, you can check it here:

codestronaut / flutter_responsive_onboarding

Demo flutter responsive handle with MediaQuery

The Reason Why You Have To Write Clean Code

Aditya Rohman — Mon, 23 Nov 2020 02:47:18 +0000

Hi there, today I want to talk about clean code. So, what is exactly is clean code? Well, coding is not just an activity of typing in the editors, is not just typing variables or functions. But, coding is more than that. Coding is a tool and the programmer is a problem solver.

Thinking about this case. You are a mobile developer and have an application that used to solve the specific problem on your campus. You've built that app for 3 months and now it's release on the Google Play Store and App Store. This application certainly needs maintenance and updates. Moreover, the application will be more complex than the previous version and you are working with the team.

Writing code with the concept of clean code is important in this case. With clean code, your application will be easy to maintain and easy to add new features in the next update. One more benefit is your workflow will be structured with your team.

Below, I list some tips for clean code for you. I use Dart language for the example

Clean Code Tips in Dart

Write a readable variable

When you declare a variable for your program, you must be given the name of the variable. Your variable name must be readable and match its functionality in the program. Let's see this example!

DO

var firstName = "Aditya"
var lastName = "Rohman"
var age = 20

DON'T

var x = "London"
var a = 100

In the code snippet above, it's clear that the firstName variable is used to store a person's first name. But, when you name the variable with no descriptive name, you will be confused later on. So, give the descriptive and readable name to your variables.

Choose your code convention-style

The second tip is you must choose one of the code conventions based on the language you work with. In this example, I use Dart. So, I will choose either the lower camel case (firstName) or the snake case (first_name). You must be consistent with using it in all your code.

Use comments

Comment is one of the powerful tools for developers. You can write an explanation about a function or class in your program. So, you will be understood if you want to give an update later on. If you're using Visual Studio Code, I recommended you to use a plugin called Better Comments. With this plugin, you can specify the special comments. For example, you can give a warning comments, TODO comments, and more.

Keep on Refactoring

The last tip is to keep refactoring your code when you adding a new feature or modify your code. Clean all the warnings and errors, and don't forget to give comments. Use the refactoring feature on your IDE of code editors. For example, here I use the VS Code plugin called Prettier - Code Formatter. This plugin will reformat your code when you hit save.

Okay, so that's the 4 tips for implementing Clean Code in your projects. I hope this article helpful. Thank you for reading this article. Let's discuss in the comment section down below for further talks! Thank you!