Boilerplate codes including Superbase settings for Flutter
flutter_boilerplate_supabase
Boilerplate codes including Superbase settings for Flutter.
Specification
- Localization
- Get package navigation settings
- Asset-related settings (Image, Icon, Color)
- Installed test packages
- Supabase settings
Folder Structures
├── android
├── build
├── ios
├── lib
│ ├── generated
│ │ ├── intl
│ │ │ ├── messages_all.dart
│ │ │ ├── messages_en.dart
│ │ │ └── messages_ko.dart
│ │ └── l10n.dart
│ ├── l10n
│ │ ├── intl_en.arb
│ │ └── intl_ko.arb
│ ├── main.dart
│ ├── models
│ │ └── sample.dart
│ ├── screens // <- or pages
│ │ └── home.dart
│ ├── utils
│ │ └── asset.dart
│ └── widgets // <- or components
│ └── sample.dart
├── res
│ ├── icons
│ │ └── logo.png
│ ├── images
│ │ └── logo.png
│ ├── fonts // <- If you want, you have to make it here yourself.
├── test
│ └── widget_test.dart
├── analysis_options.yaml
├── flutter_boilerplate.iml
├── pubspec.lock
├── pubspec.yaml
└── README.md
Dependencies
# dev_dependencies
test: ^1.17.12
mockito: ^5.0.17
build_runner: ^2.1.7
integration_test: ^0.8.1
# dependencies
intl: ^0.17.0
get: ^4.6.1
cupertino_icons: ^1.0.2
Running the project
pub get
flutter run ios
flutter run android
Localization
The repository is localizing using the arb recommended on the official Flutter website.
To use it, you need to install the Flutter Intl extension in your VSCode or Android studio.
You can go to the link below for installation.
When Flutter Intl is installed, a dart file is automatically created when modifying the arb file.
For posture information on this, check the document on the download link.
For Korean users, you can check it on this link.
How to use localization
import 'package:intl/intl.dart';
...
Text(Intl.message('appName'))
or
import 'package:flutter_boilerplate/generated/l10n.dart';
...
Text(S.of(context))
Assets
The following related things are called Assets.
- Images
- Icons
- Fonts
Things related to assets are created under the res folder.
└── res
├── icons
│ └── logo.png
├── images
│ └── logo.png
└── fonts // <- If you want, you have to make it here yourself.
How to use asset
To use the image or icon, you can use it as below.
import 'package:flutter_boilerplate/utils/asset.dart' as asset;
...
Image(
image: asset.Images.logo,
)