Flutter boilerplate for newbie

For Flutter newbie, who confuses about the template, libraries should use for an initial project

The repo here

https://github.com/nhancv/nft

I use this template to set up the initial project. It uses necessary dependencies to start and something you should consider:

  • Bundle id, app name can be changed easily by search and replace
  • The app icon had been checked for distribution to stores.
  • Application clean structure
  • I18n had been set up and sample
  • App env approach tested with CI
  • Compatible with appcenter.ms (just use appcenter for ci, it’ll recognize automatically)
  • Example about how to use rest API
  • Example about how to use provider
  • Example about app theme, custom page transition navigation, route name and argument
  • Adapt screen size approach
  • App theme
  • Lint
  • Unit Test + Integration Test

Mark star and fork if you like.

Let go with pubspec.yaml

dependencies

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  cupertino_icons: ^0.1.2
  flutter_spinkit: ^4.1.2+1
  dio: ^3.0.9
  shared_preferences: ^0.5.7+3
  flutter_screenutil: ^1.1.0
  provider: ^4.1.3
  # localization
  intl: ^0.16.0
  intl_translation: ^0.17.9

flutter_intl:
  enabled: true
- Jetbrains: https://plugins.jetbrains.com/plugin/13666-flutter-intl
- VS code: https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl

dev_dependencies

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_driver:
    sdk: flutter
  test: any
  lint: ^1.2.0
  flutter_launcher_icons: ^0.7.3

flutter_icons:
  image_path: "assets/base/icons/app_icon.png"
  android: true
  ios: true
  image_path_android: "assets/base/icons/app_icon.png"
  image_path_ios: "assets/base/icons/app_icon.png"
  adaptive_icon_background: "assets/base/icons/app_icon_adaptive.png"
  adaptive_icon_foreground: "assets/base/icons/app_icon_adaptive.png"
+ Prepare app_icon.png with square size and should be > 500 pixels.
+ Prepare app_icon_adaptive.png with lager padding compare with app_icon.png, used for Android 8+
+ The app icon with No transparent background and square in size
+ Generate icon with command line
flutter pub get
flutter pub run flutter_launcher_icons:main
app_icon.png
app_icon_adaptive.png

assets

then you should define all app assets in separate dart file, it’s useful for maintenance later

Convention

Naming

ref: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo

  • lowercase for a project name, folder, file name.
  • for long project name use underscore _
  • bundle id use hyphen –

Lint

The source need pass flutter analyzehttps://github.com/nhancv/nft/blob/master/analysis_options.yaml

Versioning

Defined in pubspec.yaml

version: 1.0.6+2003271407
---
Version name: 1.0.6
Version code: 2003271407

Version name: major.minor.build/patch
Version code: yymmddHHMM

Remember to increase bold the version name and code as well.

Structure

lib
  |-generated                     ---> auto genrated by flutter_intl
  |-I10n                          ---> auto genrated by flutter_intl
    |-intl_en.arb                 ---> define your translation here
  |-models                        ---> places of object models
  |-pages                         ---> define all pages/screens of application
    |-home                        ---> we should organize as app module (eg: home, about, ...) rather then platform module (eg: activity, dialog, ...)
      |-home_provider.dart
      |-home_page.dart
  |-services                      ---> define app services (database service, network service)
    |-remote
      |-api.dart
      |-auth_api.dart
    |-app_loading.dart
    |-local_storage.dart
    |-logging.dart
  |-utils                         ---> app utils
    |-app_asset.dart
    |-app_theme.dart              ---> app theme
    |-app_config.dart
    |-app_constant.dart
    |-app_helper.dart
    |-app_style.dart
  |-widgets                       ---> app widgets
  |-main.dart                     ---> each main.dart file point to each env of app. Ex: default main.dart for dev env, create new main_prod.dart for prod env
  |-my_app.dart                   ---> application bootstrap
test                              ---> widget/unit testing
test_driver                       ---> integration testing

Deal with i18n

Install flutter_intl tool

Add other locales:

  • Update `CFBundleLocalizations` in `ios/Runner/Info.plist` to add new locale
  • Run `Tools -> Flutter Intl -> Add Locale`

Access to the current locale

Intl.getCurrentLocale()

Change current locale

S.load(Locale('vi'));

Reference the keys in Dart code

Widget build(BuildContext context) {
    return Column(children: [
        Text(
            S.of(context).pageHomeConfirm,
        ),
        Text(
            S.current.pageHomeConfirm,// If you don't have `context` to pass
        ),
    ]);
}

Checklist for release

medium.com/@nhancv

nhancv.com

upwork.com/fl/nhancv

Leave a Reply

Your email address will not be published.Required fields are marked *