14. Appendices

14.1. Installing Flutter

The [Flutter] SDK can be downloaded from docs.flutter.dev (select [Windows], then [Android]). It is a simple compressed folder, which you extract into a folder WITHOUT spaces or accented characters (e.g., [C:\dev\flutter]), then add its subfolder [bin] to the user’s environment variable [Path]. The [Dart] SDK is included. Verify the installation in a new console:

1 2	`flutter --version flutter doctor`

[flutter doctor] checks everything that [Flutter] requires: SDK, [Android], and its licenses, [Chrome], [Visual Studio] (for [Windows] applications), connected devices, and network access. Each line is preceded by a checkmark [√] if everything is okay, an X [X] or an exclamation point [!] otherwise, with instructions on what to do listed below. [flutter doctor -v] provides details (versions, paths).

The “Visual Studio” line applies only to [Windows] applications (the [windows/] examples folder): it may remain in error if you’re targeting only mobile and web.

In [Windows], projects that use native code packages ([shared_preferences]...) require the system’s “developer mode”: [flutter pub get] indicates this (“Building with plugins requires symlink support”). You can enable it in Settings / System / For developers (command [start ms-settings:developers]).

14.2. Installing Android Studio and an emulator

[Android Studio] can be downloaded from developer.android.com/studio. It is not used to write code, but to install the [Android] SDK and create an emulator:

Upon first launch, the wizard installs the [Android] SDK;
More Actions menu / SDK Manager, SDK Tools tab: check “Android SDK Command-line Tools,” which [Flutter] requires;
in a console: [flutter doctor --android-licenses], and accept the licenses;
More Actions / Virtual Device Manager menu: create a virtual phone (for example, a “Pixel”) using a recent system image. Click the ▶ button to launch it; [flutter devices] will then detect it under the name [emulator-5554]. You can also launch it without opening [Android Studio]: [flutter emulators] lists the emulators, and [flutter emulators --launch <name>] launches one.

For a real phone: In Settings / About Phone, tapping “Build Number” seven times brings up “Developer Options,” where you can enable “USB Debugging.” When connected to the computer, the phone will ask you to authorize the computer; [flutter devices] will then detect it.

14.3. Installing Visual Studio Code

[Visual Studio Code] is downloaded from code.visualstudio.com. In the Extensions panel (Ctrl-Shift-X), install the [Flutter] extension (from [Dart Code]), which also installs the [Dart] extension. They provide:

code completion, code validation as you type (using the rules from [analysis_options.yaml]), navigation to the definition of a widget or class, and renaming across the entire project;
code formatting upon saving ([dart format]);
device selection, in the lower-right corner of the window (or the “Flutter: Select Device” command);
launching via F5 (debugging: breakpoints, variables); each time a file is saved, the app is reloaded on the fly;
actions on widgets (Ctrl-. on a widget): “Wrap with Padding,” “Wrap with Column,” “Extract Widget,” etc.—very useful for reorganizing a widget tree.

To run an example using F5, open its file [main.dart] before pressing F5 (or create a file named [.vscode/launch.json]). Open a project via the File / Open Folder menu (the [examples_flutter] folder, for example), and open a console via the Terminal / New Terminal menu.

14.4. The Flutter tool DevTools

[Flutter DevTools] is included with the SDK. While the application is running, [flutter run] displays its address (“The Flutter DevTools debugger and profiler... is available at: http://127.0.0.1:9101... ”); in [VS Code], the “Flutter: Open DevTools” command opens it in the editor. Its most useful tabs:

“Flutter Inspector”: the widget tree for the screen, and the properties for each widget. “Select Widget Mode” lets you tap an element on the phone to find its widget in the tree; “Show Guidelines” draws the margins and alignment lines. This is the tool that answers the question, “Why isn’t this widget in the right place?”;
“Performance” and “CPU Profiler”: the time spent rendering and drawing each frame, to identify the cause of a choppy animation;
“Network”: the application’s HTTP requests, including their headers and bodies; here you can see the token cookie being sent and returned;
“Logging”: what the application displays ([debugPrint]).

14.5. Installation of Node.js

[Node.js] is downloaded from nodejs.org: select version LTS (long-term support). The [Windows] installer also installs [npm]. It is only required for the JSON server. Verify the installation in a console:

1 2	`node --version npm --version`

14.6. Installing MySQL with Laragon

The JSON server requires [MySQL] (or [MariaDB]). [Laragon] (laragon.org) installs one under [Windows], ready to use, with the [HeidiSQL] administration tool. After installation:

the “Start All” button launches the [MySQL] server on port 3306;
the user [root] has no password: these are the default values from the server’s [.env.example] file;
in [HeidiSQL] (the “Database” button), the File / Run SQL File menu item runs the [database/dbrdvmedecins2.sql] script.

In [Linux] or [macOS], install [MySQL] or [MariaDB] using the system’s package manager, and run the script using the command-line client: [mysql -u root -p < database/dbrdvmedecins2.sql].

14.7. Installing curl

[curl] is included with [Windows] versions 10 and 11, [macOS], and most distributions of [Linux]. Check its version:

1	`curl --version`

The option [--json], used in this document, has been available since version 7.82 (2022). If you are using an older version, replace [--json @file] with [-H "Content-Type: application/json" -d @file], or install a recent version from curl.se.

In [PowerShell], you must enter [curl.exe], not [curl]: In [PowerShell], [curl] is an alias for another command ([Invoke-WebRequest]), which does not include the options from [curl]. The command prompt ([cmd]) does not have this issue.