This repo is a boilerplate to create flutter application easily. It is based on **GetX**.

Overview

flutter-app boilerplate

This repo is a boilerplate to create flutter application easily. It is based on GetX. More info about GetX here. The app has been setup to work with retrofit, dio, json_annotation, intl_utils and shimmer

Getting Started

  1. Install Flutter SDK. Require Flutter 2.0
  2. Install plugins in Android Studio
  3. Clone the repo.
  4. Run flutter pub get
  5. Run flutter pub run intl_utils:generate
  6. Run flutter pub run build_runner build --delete-conflicting-outputs
  7. Run app.

File structure

assets
└───font
└───image
    └───2.0x
    └───3.0x

libs
└───common
│   └───app_colors.dart
│   └───app_dimens.dart
│   └───app_images.dart
│   └───app_shadows.dart
│   └───app_text_styles.dart
│   └───app_themes.dart
└───configs
│   └───app_configs.dart
└───database
│   └───secure_storage_helper.dart
│   └───shared_preferences_helper.dart
│   └─── ...
└───l10n
└───models
│   └───entities
│   │   └───user_entity.dart
│   │   └─── ...
│   └───enums
│   │   └───load_status.dart
│   │   └─── ...
│   └───params
│   │   └───sign_up_param.dart
│   │   └─── ...
│   └───response
│       └───array_response.dart
│       └───object_response.dart
└───networks
│   └───api_client.dart
│   └───api_interceptors.dart
│   └───api_util.dart
└───router
│   └───route_config.dart
└───services
│   └───api
│   └───store
│   └───auth_service.dart
│   └───cache_service.dart
│   └───setting_service.dart
└───ui
│   └───commons
│   │   └───app_bottom_sheet.dart
│   │   └───app_dialog.dart
│   │   └───app_snackbar.dart
│   │   └───...
│   └───pages
│   │   └───splash
│   │   │   └───splash_logic.dart
│   │   │   └───splash_state.dart
│   │   │   └───splash_view.dart
│   │   └───...
│   └───widget
│       └───appbar
│       └───buttons
│       │   └───app_button.dart
│       │   └───app_icon_button.dart
│       │   └───...
│       └───images
│       │   └───app_cache_image.dart
│       │   └───app_circle_avatar.dart
│       └───textfields
│       └───shimmer
│       └───...
└───utils
│   └───date_utils.dart
│   └───file_utils.dart
│   └───logger.dart
│   └───utils.dart
└───main.dart

main.dart

The "entry point" of program. In general, main.dart contain AppMaterial, but this repo use GetMaterialApp whichs has the default MaterialApp as a child.

assets

This folder is to store static assests like fonts and images.

common

configs

This folder hold the config of your applications.

database

l10n

This folder contain all localized string. See more

models

networks

router

This folder contain the route navigation

services

This folder contain all GetxService or any service which can not be removed from memory.

ui

utils

How to use

Creating a screen.

All screen should be created in the ui/pages folder User the GetX plugin to create new screen.

Example: MovieSection

Logic: movies_section_logic.dart

class MoviesSectionLogic extends GetxController {
  final state = MoviesSectionState();
  final apiService = Get.find<ApiService>();

  void fetchInitialMovies() async {
    state.loadMovieStatus.value = LoadStatus.loading;
    try {
      final result = await apiService.getMovies(page: 1);
      state.loadMovieStatus.value = LoadStatus.success;
      state.movies.value = result.results;
      state.page.value = result.page;
      state.totalPages.value = result.totalPages;
    } catch (e) {
      state.loadMovieStatus.value = LoadStatus.failure;
    }
  }
  ...
}

State: movies_section_state.dart

class MoviesSectionState {
  final loadMovieStatus = LoadStatus.initial.obs;
  final movies = <MovieEntity>[].obs;
  final page = 1.obs;
  final totalResults = 0.obs;
  final totalPages = 0.obs;
  ...
}

View: movies_section_view.dart

class MoviesSectionPage extends StatefulWidget {...}

class _MoviesSectionPageState extends State<MoviesSectionPage> {
  final MoviesSectionLogic logic = Get.put(MoviesSectionLogic());
  final MoviesSectionState state = Get.find<MoviesSectionLogic>().state;
  
  @override
  Widget build(BuildContext context) {
    return Obx(() {
      if (state.loadMovieStatus.value == LoadStatus.loading) {
        return _buildLoadingList();
      } else if (state.loadMovieStatus.value == LoadStatus.failure) {
        return Container();
      } else {
        return _buildSuccessList(
          state.movies,
          showLoadingMore: !state.hasReachedMax,
        );
      }
    });
  }
}

Creating api service.

  1. Create entity object in folder lib/models/entities Ex: movie_entity.dart
import 'package:json_annotation/json_annotation.dart';

part 'movie_entity.g.dart';

@JsonSerializable()
class MovieEntity {
  @JsonKey()
  String? title;
  ...
    
  factory MovieEntity.fromJson(Map<String, dynamic> json) => _$MovieEntityFromJson(json);
  Map<String, dynamic> toJson() => _$MovieEntityToJson(this);
}

Class must have @JsonSerializable() for generator. Read json_serializable

  1. Define and Generate your API in file lib/networks/api_client.dart Ex: GET movies
  /// Movie
  @GET("/3/discover/movie")
  Future<ArrayResponse<MovieEntity>> getMovies(@Query('api_key') String apiKey, @Query('page') int page);

Note: Using ArrayResponse and ObjectResponse for generic response

  1. Require run command line:
flutter pub run build_runner build --delete-conflicting-outputs
  1. Create api service file for your feature in folder lib/services/api Ex: movies_api.dart
part of 'api_service.dart';

extension MovieApiService on ApiService {
  Future<ArrayResponse<MovieEntity>> getMovies({int page = 1}) async {
    return _apiClient.getMovies(MovieAPIConfig.APIKey, page);
  }
}

After, add part 'auth_api.dart'; to services/api/api_service

  1. You can call API in the logic of screen. Ex:
  final apiService = Get.find<ApiService>();
  final result = await apiService.getMovies(page: 1);

Support multiple Theme and Language

See SettingService class for more detail

Other

Logger

logger.d("message"); //"💙 DEBUG: message"
logger.i("message"); //"💚 INFO: message"
logger.e("message"); //"❤️ ERROR: message"
logger.log("very very very long message");

Snackbar

AppSnackbar.showInfo(message: 'Info');
AppSnackbar.showWarning(message: 'Warning');
AppSnackbar.showError(message: 'Error');

Dialog

AppDialog.defaultDialog(
          message: "An error happened. Please check your connection!",
          textConfirm: "Retry",
          onConfirm: () {
            //Do something
          },
);

Button UI when call API

return Obx(() {
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: AppTintButton(
          title: 'Sign In',
          onPressed: _signIn,
          isLoading: state.signInStatus.value == LoadStatus.loading,
        ),
    );
});

Refer

https://github.com/CNAD666/getx_template/blob/main/docs/Use%20of%20Flutter%20GetX---simple%20charm!.md https://pub.dev/documentation/get/latest/

Issues
  • Error when run flutter pub run intl_utils:generate

    Error when run flutter pub run intl_utils:generate

    $ flutter pub run intl_utils:generate INFO: No @@locale or _locale field found in intl_en, assuming 'en' based on the file name. INFO: No @@locale or _locale field found in intl_vi, assuming 'vi' based on the file name.

    opened by berthojoris 0
  • Missing *.g.dart file

    Missing *.g.dart file

    How to generate *.g.dart file ?

    Not found example part 'movie_entity.g.dart';

    opened by berthojoris 0
Owner
NEWWAVE SOLUTIONS JSC
NEWWAVE SOLUTIONS JSC
A Boilerplate Project which adopts the concept of Clean Architecture and Modularization.

Flutter-Works Boilerplate Table Of Content Overview Getting Started Requirement Setup Setup Firebase Android IOS Change Package Name Running/Debugger

KodingWorks 32 Jan 14, 2022
Flutter Getx Template

This is source flutter template use getx for statemanagement ☕

Dao Hong Vinh 39 Jan 16, 2022
Garreta project using Flutter and GetX

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

Seea 3 Jun 3, 2021
Flutter Easy Getx Implementations .

Flutter Easy GetX Description People ask me how I manage state,dependency,routes etc when I work with flutter,Here is the Simple Brief About GetX whic

Tasnuva Tabassum oshin 13 Dec 6, 2021
flutter 2.x and getx v4.x template

flutter_getx_template Language: 中文简体 | English 基于getx 实现的全新flutter getx 模版,适用于中大型项目的开发。 ?? flutter最新版本的空安全 ?? view 和 逻辑 完全解耦 ⚡ view 和 state 自动响应 ?? di

xieyezi 107 Jan 6, 2022
An application built using Flutter that can be used while playing board games if actual or physical dice is missing . This is a dual dice application.

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

dev_allauddin 4 Nov 17, 2021
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI 1/2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Fl

Johannes Milke 24 Jan 19, 2022
Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flutter app.

Flutter Tutorial - User Profile Page UI #2 Create a Flutter User Profile Page UI where you can access and edit your user's information within your Flu

Johannes Milke 15 Dec 20, 2021
Let's create a selectable Flutter Navigation Drawer with routing that highlights the current item within the Flutter Sidebar Menu.

Flutter Tutorial - Sidebar Menu & Selectable Navigation Drawer Let's create a selectable Flutter Navigation Drawer with routing that highlights the cu

Johannes Milke 9 Dec 9, 2021
Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's information in Flutter.

Flutter Tutorial - User Profile & SharedPreferences Let's create a complete Flutter User Profile Page with SharedPreferences to persist the user's inf

Johannes Milke 12 Jan 11, 2022
Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navigation Drawer in Flutter.

Flutter Tutorial - Collapsible Sidebar Menu & Navigation Drawer Let's create a Flutter Collapsible Sidebar Menu that can collapse and expand the Navig

Johannes Milke 11 Dec 9, 2021
A Flutter widget to create an iOS settings-table (static TableView).

flutter_cupertino_settings A Flutter widget to create an iOS settings-table (static TableView). import 'package:flutter_cupertino_settings/flutter_cup

Matthias Rupp 219 Dec 19, 2021
Create highly customizable, simple, and controllable autocomplete fields for Flutter.

Field Suggestion Installing Depend on it Add this to your package's pubspec.yaml file: dependencies: field_suggestion: <latest_version> Install it Y

Ismael Shakverdiev 15 Jan 6, 2022
Today we will show you how you can create your developer portfolio website and app using flutter.

Responsive and Animated Portfolio Website & App - Flutter UI Live Preview Watch it on YouTube Packages we are using: flutter_svg: link goole_fonts: li

Abu Anwar 146 Jan 15, 2022
AI Library to create efficient Artificial Neural Networks. Computation uses SIMD (Single Instruction Multiple Data) to improve performance.

eneural_net eNeural.net / Dart is an AI Library for efficient Artificial Neural Networks. The library is portable (native, JS/Web, Flutter) and the co

null 17 Dec 22, 2021
Space Themed Turn-Based Strategy Game developed in Flutter

Space Empires ?? Introduction ?? Space Empires A 4X Space themed Strategy Game made with Flutter Complete Rules and Instruction can be accessed from t

Satyam 34 Jan 13, 2022
Bhagavad Gita app using flutter & Bhagavad-Gita-API is A lightweight Node.js based Bhagavad Gita API [An open source rest api on indian Vedic Scripture Shrimad Bhagavad Gita].

Gita Bhagavad Gita flutter app. Download App - Playstore Web Application About Bhagavad Gita app using flutter & Bhagavad-Gita-API is A lightweight No

Ravi Kovind 7 Sep 29, 2021
A flutter search engine based on MediaWiki with caching.

Table of contents Project Description Working App Architecture BLoC/Cubit Pattern Caching using HiveDB App UI Project Setup To-Do How to get started w

Shashwat Joshi 37 Nov 16, 2021