Back in April 2020, I had briefly tried going through the Introduction to Flutter Development using Dart course by Angela Yu.
I thought it was quite interesting, and the declarative model of user interface building really interested me. It reminded me of Microsoft Windows Presentation Foundation (WPF).
Although, I only briefly learned it to do a demo mobile app for my Android phone, and didn’t really pursue it much further.
At the time, Flutter on the Web was also not yet released or was only in its early stages, and since I was most familiar with JavaScript/TypeScript and web development, I decided perhaps having to learn Dart being something I was not willing to commit my time and energy to.
I have been wanting to build a personal time tracking app for quite a while, and may revisit using Flutter to do so, since it supports mobile, web, desktop, and I think I may want to be building a desktop app that isn’t too heavy on memory (cough, Electron, cough).
Part of me is even toying with learning how to do it in C++, since I do have a bit of experience with some of the Windows APIs, and really if its for me I don’t need it to be cross platform anyways… but I also think this may involve even more time that just learning Dart and Flutter.
So, today I downloaded it and also installed Visual Studio Community edition on my personal laptop, with the Desktop development with C++ workload installed.
Let’s see if I actually do anything with it going forward :D
On the first run, Flutter will print out a message about how it tracks usage using Google Analytics - see here. You can disable this using the below command.
flutter config --no-analytics
You can also set the environment variable FLUTTER_SUPPRESS_ANALYTICS to true - see here.
[System.Environment]::SetEnvironmentVariable("FLUTTER_SUPPRESS_ANALYTICS", "true", "Machine")
Then to check the environment, you can run flutter doctor. In my case it warned me that I didn’t have the tools installed for
Android development, namely the Android toolchain (Android SDK) and Android Studio, but this is fine since I will likely
focus on web and desktop first.
flutter doctor
I also noticed that you can use Visual Studio Code as an IDE, so I installed the Flutter extension to try it out. I guess this may come in handy for the web development side, and maybe Visual Studio proper more for the Windows desktop app, but this may be only necessary for the C++ wrapper solution that Flutter makes use of in any case.
In Visual Studio Code, you can use CTRL+SHIFT+P to open the command palette, and run Flutter commands, such as creating a new project, selecting the devices. Running the project is also possible from the Run menu, where it asks for a Dart and Flutter configuration to launch the desktop application, or you can also add a run configuration for this.
You can then also see the commands that were run from the Output window pane, selecting flutter, e.g. when creating a new project it runs the below command after you’ve selected a folder:
flutter create --template app --overwrite --project-name someapp .
Its also possible to just run the application from the command line, for example, to see the available devices to run on:
C:\> flutter devices
3 connected devices:
Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22000.795]
Chrome (web) • chrome • web-javascript • Google Chrome 104.0.5112.102
Edge (web) • edge • web-javascript • Microsoft Edge 104.0.1293.63
Then to run the app for the Chrome device on the web platform, you can run:
C:\> flutter run -d chrome
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome... 20.9s
This app is linked to the debug service: ws://127.0.0.1:50563/VvIm32AaoaI=/ws
Debug service listening on ws://127.0.0.1:50563/VvIm32AaoaI=/ws
💪 Running with sound null safety 💪
🔥 To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:50563/VvIm32AaoaI=
Flutter Web Bootstrap: Programmatic
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:50563/VvIm32AaoaI=
If you wish to run the windows app, you can run:
C:\> flutter run -d windows