A simple project with cool animations and fluid UI

Overview

Pokedex

This task was quite an interesting one. As with all my projects, I started with understanding the scope and state of this app.

I decided to use the clean-architecture structure, for architecting the app. I built the app in these stages: UI -> Domain -> Data.

For a small-scale project like this, I concluded that using state-management libraries might be overkill, and went with using what Flutter has provided: ChangeNotifiers and InheritedWidget.

Demo

Structure

The sample structure of this project is displayed below:

integration_test/
    |- app_test.dart
    |- custom_finders_matchers.dart
    |- detail_screen_test_cases.dart
    |- home_screen_test_cases.dart
    |
lib/
    |- data
    |  |- entity_mapper.dart
    |  |- models
    |  |- data_sources
    |  |_repository_impl.dart
    |
    |- domain
    |  |- pokemon_entity.dart
    |  |_ repository_base.dart
    |
    |- presentation
    |  |- widgets
    |  |  |_ widget_export.dart
    |  |
    |  |_ data_controllers.dart
    |  |_ data_provider.dart
    |  |_ detail_screen.dart
    |  |_ home_screen.dart
    |
    |- util
    |   |- colors.dart
    |   |- extensions.dart
    |   |- icon_util.dart
    |   |_util_export.dart
    |
    |_ main.dart

The presentation layer consists of all UI-related code, including UI logic. This layer depends on the Domain layer.

The domain layer bridge the presentation layer and the data layer. Since the presentation layer is only allowed to communicate with this layer. The base repository, entity(PokemonEntity), and entity mappers are defined here. The PokemonEntity is a simple data class that holds specific UI-related fields. It knows nothing about what the actual data coming from the server looks like. The mapper classes are provided to map a data model to an entity class.

The data layer holds all business logic. It's the backbone of any data-related task. It houses model data classes that parse JSON objects, an implementation of the repository, a data source, and a local data source.

The util folder contains some utilities used across apps, like colours, extensions, etc.

Packages used

The dependencies used are listed below:

  • Google fonts: This package is included to utilise Noto Sans font for the application.
  • Shimmer: The loading effect is handled by this package.
  • Equatable: Provides easy implementation of value-based equality of different object types.
  • Flutter SVG: Used to display network SVG image URLs.
  • Either Dart: Provides a seamless, efficient way for handling errors.
  • GraphQL: Used to interact with pokemon GraphQL APIs. This also includes an internal Hive local storage implementation.

    To understand why both graphql and dio are included in this project move down by tapping here

  • Path Provider:
  • Dio: Used to interact with pokemon RESTful APIs.

    To understand why both graphql and dio are included in this project move down by tapping here

  • Path Provider: Used by the Hive package to get a local storage path on the device.

Dev dependencies

  • Integration Test: A package to aid in running integration tests on real devices or emulators.
  • Mocktail: Used to mock certain part of the code for unit testing.

Why Graphql and Restful implementation

Why is both Dio and GraphQL implemented in the same app? You may be wondering that. The reason is simple: I noticed pokemon has a graphql API which is still in beta. Based on my experience using GraphQL and the flexibility it offers, I decided to go for it.

Everything worked out fine until I was greeted with bad news. I tried test-running my app some days after and was greeted with a server-down error. At that point, I recalled the wise advice of not using resources still in beta, at least for production. Despite this challenge, there was light at the end of the tunnel.

The project was structured flexibly. It allows data sources can be switched easily. After I was done with setting up the REST API, I thought it would be cool to keep both implementations.

To switch from REST APIs to GraphQL APIs, head over to lib/main.dart on line 15, and replace the code, with the code below.

final dataSource = GraphQlDataSource();

Now the app uses data from GraphQL API.

To know more about the flexibility GraphQL offers, here's an article I wrote concerning this subject: GraphQL article.

Testing

It can be painful sometimes to write tests. It was a bitter-sweet experience for me writing these test cases but it was worth it. However, I do believe testing is an integral part of software development. I make it an aim to write both unit tests and widget tests. Moreso, integration tests are even far better than unit and widget testing.

Integration test ensures that multiple components (widget, state-holders, repository) of a complete or large part of the app work together as expected, unlike unit test and widget test that ensures individual component/piece works together.

I focused on writing integration tests for the app, that's why unit test cases are few, and no widget test cases. Integration test covers a large part. To run this integration test with coverage, use the command below.

flutter test integration_test/app_test.dart --coverage

I wrote some unit test cases to ensure GraphQlDataSource and RepositoryImpl work as expected. To run these test cases with coverage, use the command below.

flutter test --coverage

Thank you for taking the timeout to review my project. I hope this writing gives you the insight you need when looking through the codebase.

You might also like...

This is a simple Flutter Application to learn Animations.

Magic 8 Ball A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Dec 23, 2021

Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Dec 29, 2022

This repo is for anything that can be reusable in flutter like custom widgets πŸŸ₯, animations 🌟and more

Ease This packa is for anything that can be reusable in flutter like custom widgets πŸŸ₯ , animations 🌟 and more. Features 1-custom text widget to ease

Dec 3, 2022

A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

Nov 26, 2022

Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

Flutter page widget that is dismissed by swipe gestures, with Hero style animations, Inspired by Facebook and Instagram stories.

dismissible_page πŸ”₯ πŸš€ Creates page that is dismissed by swipe gestures, with Hero style animations, Inspired by FB, IG stories. Live Demo Contents Su

Dec 22, 2022

A radio button widget for flutter that supports custom builders and a variable number of animations.

A radio button widget for flutter that supports custom builders and a variable number of animations.

custom_radio An animatable radio button that can be customized to the max. I found it strange that flutter only provides two radio widgets: Radio and

Dec 28, 2022

Stroke order animations and quizzes for Chinese characters for use in Flutter apps

Stroke order animator This package implements stroke order animations and quizzes of Chinese characters based on the Make me a Hanzi data. That data i

Dec 27, 2022

Pokemon App with animations, beautiful UI and network call.

Pokemon App with animations, beautiful UI and network call.

🐯 Pokemon-App Pokemon App with animations, beautiful UI and network call. πŸ“Έ ScreenShots ✨ Requirements Any Operating System (ie. MacOS X, Linux, Win

Jul 16, 2021

Advanced widgets, animations and more.

advanced_ui A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Aug 11, 2022
Owner
JasperEssien
Mobile Developer | Technical Writer. I love building quality products using flutter framework. I also enjoy writing visual, easy-to-follow technical articles!!
JasperEssien
A state management library that enables concise, fluid, readable and testable business logic code.

Creator is a state management library that enables concise, fluid, readable, and testable business logic code. Read and update state with compile time

Xianzhe Liang 181 Dec 24, 2022
The component created with Flutter using Dart programming language, inspired in Fluid Slider by Ramotion.

Fluid Slider Flutter The component created with Flutter using Dart programming language, inspired in Fluid Slider by Ramotion. About The component was

Wilton Neto 41 Sep 30, 2022
A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Flutter Carousel Slider A customizable carousel slider for flutter Screenshots Installing dependencies: flutter_carousel_slider: ^1.0.8 Demo Demo a

Udara Wanasinghe 23 Nov 6, 2022
Simple but pretty cool birthday countdown app built using flutter

Simple but pretty cool birthday countdown app "For You" ?? Don't forget to star ⭐ the repo if you like what you I have created ?? . ?? GIF of a sample

Ruslan Hasanov 6 Aug 13, 2022
A simple, powerful widget to build cool transitions

motion_widget A simple, powerful widget to build cool transitions Features Fine-grained control with Interval Lightweight & fully customizable No boil

Sumeet Rukeja 33 Jul 29, 2021
A complete music player in flutter with cool UI and design.

Flutter Music Player A complete and open source music player designed in flutter. It is first complete music player designed in flutter. This app expl

Aman gautam 423 Dec 30, 2022
Collection of cool Layouts built with Flutter to Inspire Other UI developers and explore the possibilities of Flutter.

Awesome_Flutter_Layouts Would you like to Contribute your Designs? Please refer the Contribution guidelines before you dive In Need help? or Looks Som

Mahesh Jamdade 103 Nov 22, 2022
Cool linter This is a custom linter package for dart/flutter code.

Cool linter This is a custom linter package for dart/flutter code. It can set linter for exclude some of words. This words you can set in analysis_opt

null 8 Mar 4, 2022
A collection of Animations that aims to improve the user experience for your next flutter project.

Flutter Animations A collection of Animations that aims to improve the user experience for your next flutter project. Built by Ezaldeen SAHB I hope th

Ezaldeen Sahb 134 Dec 24, 2022
Flutter Project For Practice Getx GetCLI Maps Animations ...

Toyota Flutter Project For Practice Getx GetCLI Maps Animations ... Screenshot Website My Website : www.habchibessem.com Getting Started This project

Bessem Habchi 4 Nov 5, 2022