In this article, I'll show you how to get started with the Flutter generator for Jhipster that I maintain. We'll see two main aspects:
- How you can use the generator
- How you can customize it to fit your needs and start coding quickly
- Flutter SDK, Android SDK / Xcode, etc
- Jhipster npm package installed
- Flutter jhipster generator installed
For my part I'll use Android and the Android emulator to demonstrate things in this post.
First, we need a JHipster backend so let's generate and launch it
Second let's generate the flutter app
Before launching the app we need to change the ip address of the backend in the environment.dart class
Let's launch the Android, iOS simulator or plug your phone in debug mode... Then launch the app :
cd flutter-app flutter run
and voila you should have this screen on your device :
What to do now ?
Change / Customize the theme
You can change the colors, fonts, etc easily, everything is centralized in themes.dart at the root of the lib folder.
For now the jhLight theme is the default.
By the default the generator create two different environments Dev and Prod. The dev profile is the one by default (main.dart)
The other one is located in main_prod.dart
Running the application with differents profiles
If you use Android Studio / IntelliJ you can launch dev and prod like this :
With a terminal :
flutter run -t lib/main_dev.dart flutter run -t lib/main_prod.dart
Adding profiles or environment variables
Go to the environment.dart file
1) Add your variable in the _Config class
2) Add the getter in the Constants class
3) Use it
Generate the model for JSON Serialization / Deserialization
The generator use reflection to serialize/de-serialize JSON with the library dart_json_mapper it allows us to use annotation in our models like in Java, .NET, etc
The drawback of that method is that when you modify your model classes you have to rerun the reflection manually like this
Install the flutter_intl for Android studio / IntelliJ
If you select I18n and you use Android Studio / IntelliJ you can install the plugin integrated in the IDE for auto-generating code for Internationalization when you modify the translations files.
You are ready to code your flutter app !!!
Feedback are welcome, also if you find issues on the generator feel free to create one it on Github.