Flutter Tips & Tricks

Code Formatting

• The Dart Plugin for Android Studio/IntelliJ adds dartfmt
• With a trailing comma after parameters, dartfmt will add a new line
• Settings > Languages and Frameworks > Flutter > Format on Save

Code Insertion:

• (On Mac) Option + Return while cursor is on a widget, brings up context menu with options to wrap widget with other widget types, remove widget (but leave children), etc.

Helpful Jetbrains IDE Plugins:

• Rainbow Brackets
• String Manipulation
• Code Glance (sublime like minimap)
• Key Promoter X

Helpful Terminal Software:

• Oh My Zsh
• fd (alternative to find)
• ripgrep (alternative to grep)
• bat (alternative to cat)
• peco (piping filtering tool)
• HTTPie (alternative to curl)

Flutter Mobx Doc: (State management)

https://pub.dev/packages/mobx

Flutter Font Wight class:

https://api.flutter.dev/flutter/dart-ui/FontWeight-class.html

File structure for viewModels:

• Constructor fields
• @observables
• @computed's
• @actions
• Getters
• private functions that don't mutate state

Notes / Troubleshoot

1. Interactively seeing possible finders when running test on device or emulator: When you run a test on an emulator (or device) via flutter run, and the test pauses (whether due to breakpoint, error, or manually invoking await tester.idle()), you can then tap elements on the screen, and you will receive output of possible finders.

2. IF json class is not generating the generated file: Please try upgrading the json_annotation and/or json_serializable packages to be compatible with each other

3. For @Computed property, the caching behaviour is only for notifications and not for the value: https://github.com/HomeXLabs/lightning/pull/465

4. Terminal command to take a screenshot of android emulator, and place it in your clipboard (may require brew install xclip for macOS):

5. adb shell /system/bin/screencap -p /sdcard/screenshot.png && adb pull /sdcard/screenshot.png ~/Desktop/screenshot.png && xclip -selection clipboard -t image/png -i ~/Desktop/screenshot.png