Get started with the Flutter generator for JHipster

Introduction

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

Prerequisite

• 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.

Let’s try

First, we need a JHipster backend so let’s generate and launch it

mkdir jh-server-flutter
cd jh-server-flutter
jhipster
./mvnw

Second let’s generate the flutter app

cd jh-server-flutter
yo jhipster-flutter-merlin

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 :

First launch of the app

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.

Switch environment

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

flutter pub run build_runner build

Run the reflection for serialization / de-serialization

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.

Conclusion

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.

By the way, I’m launching a Spring boot / Angular Courses for beginners with coaching integrated, if you are interested click here