Git Product home page Git Product logo

yaho_demo's Introduction

Yaho! demo

This is a demo project for Yaho!. Please read the instruction carefully for compiling guideline and packages used in the project.

Getting Started

Requirements

  • Have a collection of users presented in both Grid and List view.
  • Have all the fields for each item: email, full name and avatar.
  • Load users’ avatars and cache them, should have a placeholder.
  • Have “loading more” functionality with a “loading more” icon.
  • Use either MVVM or BLOC pattern.
  • Should have clear UX/UI presentations.
  • Have a compiling guideline attached.

Screens

Screen Preview

COMPILING GUIDELINE

Overview for build-helper

In this project, I use some packages to support the development phase. Such as:

Besides, here are my Android Studio plugins that have helped a lot:

For more information, please go to the documentation of each packages and plugins. You can find below the step-by-step compiling guideline.

Step-by-step

If you got the Flutter SDK and Dart SDK already, and you did set up its environment completely, you can continue to the following steps. If not, please check the Flutter documentation here.

  1. To install flutter_gen, go to Terminal and run this (works with macOS, Linux and Windows): dart pub global activate flutter_gen
  2. Next, we go with the famous command: flutter pub get
  3. To get those auto-generated codes from the [Freezed] and [FlutterGen] packages, run: flutter pub run build_runner build --delete-conflicting-outputs
  4. Get yourself a cup of coffee, this could take from just 5 seconds to minutes, depends on your machine/project size.
  5. After that, if your [Dart Analysis] does not show any red dot, you are ready to go. Just press the [Run] button or execute: flutter run

Attention!

  • You may need to set up your iOS-based profile in Xcode (development account).
  • From Flutter 3.3 (or any other version you are using), you may encounter the error with Gradle when running in an Android-based, check the following issue from StackOverflow.

Project Architecture and Approaches explained

Project constraints

In a short period of time, I must admit that I cannot list out all the constraints in the project. Here are the ones I used:

  • Dart SDK: '>=2.19.2 <3.0.0'
  • Flutter SDK: '3.7.3'
  • Xcode: 14.2
  • Android Studio: Electric Eel

Project architecture

  • Architecture: CLEAN
    Separation of Concerns, Maintainability, Testability, etc., we can tell this architecture keeps Software Development at its highest standard. By applying this, we also apply uncle Bob's best practices SOLID.
  • State management: BLoC (Cubit in particular):
    This is the most well-known state management that is used in almost every professional environment in my opinion. For a light project, I prefer using Cubit to minimize the boilerplate codes and decrease shipping-time but still get the power of BLoC.
  • Dependency Injection: GetIt
    GetIt helps us to get rid of all those dependencies and works well with other State Management.

What is not included in this project

  • Localization and internationalization: Text hardcoded in the codes
  • Animation when switching view type

yaho_demo's People

Contributors

nguyen703 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.