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/

You might also like...

A most easily usable cache management library in Dart. With CacheStorage, you can easily manage cache on your application.

A most easily usable cache management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use CacheStorage 1.2.

Dec 13, 2021

A most easily usable RESAS API wrapper in Dart. With this library, you can easily integrate your application with the RESAS API.

A most easily usable RESAS API wrapper library in Dart! 1. About 1.1. What Is RESAS? 1.2. Introduction 1.2.1. Install Library 1.2.2. Import It 1.2.3.

Apr 7, 2022

Flutter-GetX-Toturials - Getx full tutorials for flutter

Flutter-GetX-Toturials - Getx full tutorials for flutter

getx_full_tutorials A new Flutter getx tutorial. This Project Contains: Snackbar

Dec 1, 2022

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package

Aug 27, 2022

constructing... Flutter, Ganache, Truffle, Remix, Getx Pattern, Infura, GetX, Blockchain

constructing... Flutter, Ganache, Truffle, Remix, Getx Pattern, Infura, GetX, Blockchain

Dec 20, 2022

Flutter GetX Template (GetX, Dio, MVVM)

Flutter GetX Template (GetX, Dio, MVVM)

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package for State management, routing and Dependency Injection (bindings). We

Dec 18, 2022

Automatically create a new Flutter project with Getx & Directories

Automatically create a new Flutter project with Getx & Directories

Flucreator You can use Flucreator to create a new Flutter project. Automatically create a new Flutter project with Getx & Directories. 💻 Normal Usa

Jul 8, 2022

Flutter Transition UI - Create powerful UI design animations easily with Flutter

Flutter Transition UI - Create powerful UI design animations easily with Flutter

Transition Animation - Locations UI Design - Flutter Create powerful UI design a

Jun 30, 2022
Comments
  • 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
Owner
NEWWAVE SOLUTIONS JSC
NEWWAVE SOLUTIONS JSC
A basic boilerplate template for starting a Flutter GetX project. GetX, Dio, MVVM, get CLI, Localization, Pagination etc are implemented.

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package for State management, routing and Dependency Injection (bindings). We

Hasan Abdullah 214 Jan 9, 2023
Create dart data classes easily, fast and without writing boilerplate or running code generation.

Dart Data Class Generator Create dart data classes easily, fast and without writing boilerplate or running code generation. Features The generator can

null 186 Feb 28, 2022
Flutter boilerplate - A boilerplate project created in flutter using MobX and Provider

Boilerplate Project A boilerplate project created in flutter using MobX and Prov

Wali Khan 0 Jan 22, 2022
Deepak Sharma 149 Dec 10, 2022
Boilerplate for Flutter + GetX MVVM

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

Olayemii Garuba 4 May 31, 2022
My boilerplate for flutter with getx & dio environment

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

Hafizh Rifqi Fabian 1 Apr 6, 2022
This repo provides a starter kit thats include Getx package.

Getx_Starter This repo provides a starter kit thats include Getx package. It includes key-value databases, sample pages, and components which they are

Okan 2 Apr 27, 2022
This repo is an example of clean architecture using the GetX state-management solution.

GetX Clean Architecture A Flutter Clean Architecture Using GetX. This repo is forked from: https://github.com/phamdinhduc795397/flutter-getx-clean-arc

Md. Siam 78 Jan 3, 2023
Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file folder.

Flutter UI Boilerplate "Sharing for fun" Flutter ui boilerplate is easiest way to create new flutter project with clean code and well organized file f

Dimas Ibnu Malik 122 Dec 1, 2022
A most easily usable cookie management library in Dart. With SweetCookieJar, you can easily manage cookie on your application.

A most easily usable cookie management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use SweetCookieJar 1

Kato Shinya 9 Oct 27, 2022