How to have seperate builds with different screens/UI dev and product build with one code base in Flutter

Question

I am building cross-platform with Flutter using Android Studio.

During my development process, I would like to use development tools like Flutter Redux Dev Tool which shows a debug screen right on the application UI like this

Or I can have my own debugging modules in the form of custom-styled print statements which I insert into different places in my codes.

I don't want to have to comment these debugging code out and/or switching out the appropriate UIs every time I need to build a product version

Are there ways to do this?

PS: I heard about build variants on Android Studio, is this the industrial way to solve this? If so, how to use it with Flutter

Solution

One way is to use different entry-point files

flutter run -t lib/main_config1.dart
flutter build apk -t lib/main_config1.dart
...

You can then configure your application with different services (for logging or similar) depending on the requirements.

The --flavor options provides further ways for customization.

See also https://medium.com/@salvatoregiordanoo/flavoring-flutter-392aaa875f36

Comments

[Tran Triet]

Thank you. I read the article. It is nice to learn a new technique. The article says there's no way to use flavor in Dart code and provides a work around, which is a switch and for each different parts in the flavors, you have to use the "Config" file. It works but it seems a lot more work and I would have to think about how to structure the project with this new Config layer (e.g. If I have many debugging code, I would need many of this Config.getSomething statements, maybe nested...). I was hoping for something like an annotation you can insert right into DART code. But thanks again.

[Günter Zöchbauer]

Dart doesn't provide anything like macros which would make this easy. Configurable (conditional) imports are planned for future versions which might help.