Flutter Expert IDE Set Up
Sorry Google, the best IDE for flutter development is MS’s Vscode. As a node IDE is the future as far as developer tools. I am going to show you a very opinionated IDE setup that makes you a more effective flutter app developer.
Background
The problem is while Google does an excellent job at giving you an introduction to widgets; it’s not the techniques you really need to have mastered to develop a professional application and in a mature market. That is my self-assigned job in pushing out medium articles and my flutter design and development book series.
I am finding that by showing the cool visual and animation that I can get you guys and gals to do the boring devOPS and OOP and FP to get you to the point for flutter expert. Some subjects covered are:
DevOPS
Tuning A Cheap MS Windows Laptop for Flutter Development https://readmedium.com/tuning-a-cheap-ms-windows-laptop-for-flutter-app-development-572d09cd4d19
Log Driven Learning Flutter https://readmedium.com/log-driven-learning-flutter-d76b49b75a8c
UML Coolness in Flutter https://itnext.io/uml-coolness-in-flutter-6bb14217b5f2
Flutter Static Analysis, Dart Code Metrics https://readmedium.com/flutter-static-analysis-dart-code-metrics-c9ec484f4e0f
Flutter Static Analysis, Linting https://readmedium.com/flutter-static-analysis-linting-5fb050128ead
Getting Real Code Coverage https://readmedium.com/getting-real-code-coverage-951231afa2bc
Lcov on Windows https://readmedium.com/lcov-on-windows-7c58dda07080
Test Secrets, Test Suites https://itnext.io/test-secrets-test-suites-99f8390b8d4b
How To, Flutter Internal Packages https://itnext.io/how-to-flutter-internal-packages-cad1285fe8c
An Architecture Layout https://readmedium.com/an-architecture-layout-8f414271b2b4
Logging, The Expert Way https://readmedium.com/logging-the-expert-way-5beb5c967e44
Catch Flutter Application Exceptions https://itnext.io/catch-flutter-application-exceptions-cad036d0fd4e
Flutter Perfect SetUp https://readmedium.com/flutter-perfect-setup-c5462b412f78
Cool Flutter Docs https://readmedium.com/cool-flutter-docs-383b951d7feb
Visual
Animations Users Love(rive) https://readmedium.com/animations-users-love-75a57a8cad5
Full Flutter Background Trick https://readmedium.com/full-flutter-background-trick-d1ea813470d2
Cool Rive Background Animation in Flutter Apps https://readmedium.com/cool-rive-background-animation-in-flutter-apps-2fd5e58bc81b
Flutter Cross-Platform Tricks https://itnext.io/flutter-cross-platform-tricks-2196986c619c
Writing and Teaching
Medium Writing Secrets https://readmedium.com/medium-writing-secrets-a9b3d408b9e3
Since, my articles appear in multiple publications the best way to keep updated to those posting is to join one of these social platforms and follow me using my profile links:
LinkedIN https://www.linkedin.com/in/fredgrottstartupfluttermobileappdesigner/
Xing https://www.xing.com/profile/Fred_Grott/cv
Discord https://discordapp.com/users/9388/
Gitter(join this forum to get the article links) https://gitter.im/flutter/flutter
Slack https://app.slack.com/client/TGT6YF2J1/CGS4QDJ56/user_profile/UHK8PNRGU
Twitter https://twitter.com/fredgrott
Medium https://fredgrott.medium.com
Reddit FlutterDev Subedit(just join this forum and you will get the notices via reddit) https://www.reddit.com/r/FlutterDev/
As always, the code to both the articles and the books can be found at:
flutter design and arch rosetta at Github https://github.com/fredgrott/flutter_design_and_arch_rosetta
And, the plugins I contribute to are
Flutter Platform Widgets https://github.com/stryder-dev/flutter_platform_widgets
Flutter Rive(player) Plugin https://github.com/rive-app/rive-flutter
Which Edition
Which edition of MS’s VScode should we use for flutter development?
I have been using the insider’s edition of MS VScode without problems. The download page is at:
https://code.visualstudio.com/insiders/
The difference between VScode and VS Studio is that VS Studio has NET stuff integrated with it. But, at its core its still the same node-IDE basic core.
And your first step after the install is to set it to be able to launch multiple instances by setting the target in your app shortcut to:
"D:\myOpt\Microsoft VS Code Insiders\Code - Insiders.exe" -nFirst Steps Towards IDE Set Up Perfection
Now go ahead and create a folder called temp_project. Then create a sub-folder named:
.vscodeow start-up VScode and under the File menu select the open folder option and open up that project folder you created earlier. Now, under the file menu select save the workspace and save that file in the .vscode folder. And, that full project folder will be recognized as a VSCode project.
We are ready to select our plugins to make flutter app development easier.
What Plugins To Install For Flutter And Dart App Development
Right from my own .vscode folder extensions.json file:
Dart and Flutter support is supplied by the dart-code plugins:
To install it type dart code in the search box after clicking the extension tab on the left side border.
And now you will see why I had you create a workspace file. The workspace file is where your settings for plugins goes. And the settings you want for the dart and flutter dart-code plugins is:
And the Flutter Dart-Code specific part is:
{"folders": [{"path": ".."}
],
"settings": {"dart.flutterScreenshotPath":"screenshots","dart.flutterSdkPath": ".fvm/flutter_sdk","search.exclude": {"**/.fvm": true},
// Remove from file watching"files.watcherExclude": {"**/.fvm": true},
"[dart]": {"editor.formatOnSave": true,"editor.formatOnType": true,"editor.rulers": [80],"editor.selectionHighlight": false,"editor.suggest.snippetsPreventQuickSuggestions": false,"editor.suggestSelection": "first","editor.tabCompletion": "onlySnippets","editor.wordBasedSuggestions": false}
},
Of note, if you do use a Flutter Version Management tool; you need to add that fvm block of the dart.flutterSdkPath and search and watcher excludes.
And I derived those settings from dart-code’s settings document:
https://dartcode.org/docs/recommended-settings/
Now, on to some Flutter Task Settings
Flutter Task Settings
Then using that you can create a tasks.json with this:
Note, that I can somewhat eliminate any need to use the derry-script tool to complete some of my project workflow tasks by just switching to VScode from Android Studio.
Now for some Flutter launch settings.
Flutter Launch Settings
Some typical Flutter launch settings:
Note that you will not have to list the emulators or simulators as they are automatically picked up by the dart-code plugins and appear in the devices to launch palette menu.
Now, let’s add some more plugins to make this VSCode IDE full of more power!
Other Plugins
The whole idea is that we want our set-up for flutter and dart app development so that we can do everything.
UML
Yog PlantUML Highlight
https://marketplace.visualstudio.com/items?itemName=Yog.yog-plantuml-highlight
Jebbs PlantUML
https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml
Markdown PlantUML Preview
https://marketplace.visualstudio.com/items?itemName=myml.vscode-markdown-plantuml-preview
That covers highlighting details in the diagrams, generating the diagram in graphic formats, and previewing it in Markdown.
And I also use Henning Dieterichs’ Draw.io Integration plugin
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
Code Coverage
Makris Taylor’s Code Coverage
https://marketplace.visualstudio.com/items?itemName=markis.code-coverage
The coverage hints then appear in the left or right gutter so you no longer have to generate the report at each coding session multiple times.
MarkDown Utilities
Markdown All in One https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
Markdown Preview GitHub Styling https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles
Markdown Preview Enhanced https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced
Flutter Utilities
Flutter Insider(docs in ide window) https://marketplace.visualstudio.com/items?itemName=rexthedev.flutter-insider
Flutter Intl(makes internalization easier) https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl
Other Utilities
Anki for VScode https://marketplace.visualstudio.com/items?itemName=jasew.anki
Code Tour https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour
Helpful to make notes of codebases you are working with. I use these along with a separate instance of VScode with FOAM installed:
https://foambubble.github.io/foam/
Which then allows me to do ZettelKasten note-taking in Markdown format.
Conclusion
You can find my vscode settings in any vscode folder in my flutter design and arch rosetta repo at:
https://github.com/fredgrott/flutter_design_and_arch_rosetta
You will like that VScode has a smaller memory and CPU footprint than Android Studio, especially on cheap laptops.
Resources
Resources specific to the article:
flutter design and arch rosetta https://github.com/fredgrott/flutter_design_and_arch_rosetta
General Flutter and Dart resources:
Flutter Community Resources https://flutter.dev/community
Flutter SDK https://flutter.dev/docs/get-started/install
Android Studio IDE https://developer.android.com/studio
MS’s Visual Studio Code https://code.visualstudio.com/
Flutter Docs https://flutter.dev/docs
Dart Docs https://dart.dev/guides
Google Firebase Mobile Device TestLab https://firebase.google.com/docs/test-lab
Trademark Notice
Google LLC owns the following trademarks; Dart, Flutter, Android, Roboto, Noto. Apple Inc owns the trademarks iOS, MacOSX, Swift, and Objective-C. Apple Inc owns trademarks to their fonts of SF Pro, Sf Compact, SF mono, and New York. JetBeans Inc owns the trademarks to JetBeans, IntelliJ, and Kotlin. Oracle Inc owns the Java trademark. Microsoft Inc owns the trademarks of MS Windows OS and Powershell. Gradle is a trademark of Gradle Inc. The Git Project owns the trademark to Git. Linux Foundation owns the trademark of Linux. Smartphone OEM’s own trademarks to their mobile phone product names. Samsung owns the trademark to Tizen. To the best of my ability, I follow the brand and usage guidelines with the above-mentioned trademarks.
About me, Fred Grott
I am on a different adventure of creating a Maker and Creator studio the bootstrap way in teaching Flutter Application Design and Development to you guys and gals.
My keybase profile is at: https://keybase.io/fredgrott
