Get started with the Flutter generator for JHipster

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

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
Generate server side

Second let's generate the flutter app

cd jh-server-flutter
yo jhipster-flutter-merlin
Generate 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 :

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.

Customize the theme

For now the jhLight theme is the default.

Loading another theme

Switch environment

By the default the generator create two different environments Dev and Prod. The dev profile is the one by default (main.dart)

Main dev profile

The other one is located in main_prod.dart

Main prod profile

Running the application with differents profiles

If you use Android Studio / IntelliJ you can launch dev and prod like this :

Launch app with Android studio / IntelliJ

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

Annotations for serialization / de-serialization

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.

Cyril Casaucau

10 years of Fullstack dev / Freelance / Trainer #Angular #JHipster #Flutter #Java

More posts from this author

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.