Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github Acronyms

LinkedIn

Flutter development

Use Google’s Dart language Firebase database to create apps on web, iOS and Android

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

Flutter offers a single codebase (Google’s UI SDK) for building beautiful, natively compiled applications across many platforms:

  • Desktop apps on Windows, Mac, Linux
  • Mobile (smart phone) apps on Google Android vs. Java
  • Mobile (smart phone) apps on Apple iOS vs. Swift programming
  • Web apps on internet browsers

PROTIP: The biggest benefit to using Flutter instead of native languages is that no user action is needed to update the app. However, this “Hot Reload” causes a little delay for Flutter users as code is updated.

Smart Phone features in apps

Developers have grown weary of “Write Once, Work Everywhere” failed promises from several offerings over the years. Android “Material” and iOS have fundamentally conflicting design UI standards.

  1. Flutter is free and open sourced by Google at:

    https://github.com/flutter/flutter

  2. https://dart.dev/resources/glossary

    • “Bottom type” is a type that has no values and is a subtype of all other types.
    • Closurization = The process of turning a method or function into a closure.
    • Code asset = Compiled native code that is bundled with a Dart app using a build hook and can be used through dart:ffi.

  3. Documentation

    docs.flutter.dev

    API reference is at the api.flutter.dev.

Ecosystem

Developing using Flutter involves mastering several technologies within Google’s development ecosystem:

Create a New Flutter Project Using Android Studio IDE

Create a New Flutter Project Using Visual Studio Code

Socials

  1. Subscribe to:

    https://www.youtube.com/@flutterdev

    https://www.reddit.com/r/FlutterDev/

    https://developers.google.com/community/experts if you are an expert already, like Marcus Twichel at Billings, United States

Sample apps

https://kobe.io/ Kobe Apps, a mobile app SaaS Platform built in Flutter, to design and build a proof of concept, in English and Portugese.

ProCerts

https://developers.google.com/certification/associate-android-developer

https://developers.google.com/training/

Popular content creator are Google Experts:

https://cloud.google.com/learn/certification/cloud-architect Google Professional Cloud Architect certification ?

https://androidatc.com/pages/Eng/Flutter-Certified-Application-Developer

https://www.youtube.com/watch?v=xWV71C2kp38

Tutorials

  1. Install mobile app FlutterLab (Flutter Development course) by Hrishi Suthar provides a wealth of information.

  2. See list of Google’s tutorials at https://www.skills.google/catalog?keywords=flutter

  3. Create your first app at Google Skills Tutorial below

  4. https://www.geeksforgeeks.org/flutter/creating-a-simple-application-in-flutter/ 13 Mar, 2025

  5. May 2023 https://learning.oreilly.com/course/learn-flutter-and/9781805122029/ 30-hour video course by Maximilian Schwarzmüller from Germany (https://maximilian-schwarzmueller.com/)

  6. https://learning.oreilly.com/library/view/-/9781098154752/

Setup for development

https://docs.flutter.dev/get-started

  1. Install Homebrew for Mac
  2. Install git,

  3. Install Visual Studio Code with extras for Flutter. In Go to View > Command Palette or press Command + Shift + P.

    https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Tutorial1

Follow the steps below for my enhancements to steps (Nov 7, 2024 edition) at “Flutter Development” (GSP885) 1.5-hour hands-on course.

  1. Install Chrome browser (after brew install google-chrome).

  2. Start Lab. Click the IDE.

  3. Click the three dots at the upper-right and select “New Incognito Window” to avoid conflicts with cookies.

  4. Copy this url: https://console.cloud.google.com/
  5. Press command + ` to switch to the Lab window.
  6. Scroll down to click the icon to copy the Username, such as student-03-2e9edc111c72@qwiklabs.net

  7. Switch to the incognito window and paste the Email.

  8. Switch to the Lab window.
  9. Scroll down to click the icon to copy the Password, such as student-03-2e9edc111c72@qwiklabs.net
  10. Switch to the incognito window. Click “Enter the Password” and paste.
  11. Click “I understand”, then check under “Terms of Service”, “Agree and continue”.
  12. Click “Create or select a project”.

  13. Notice: Project number: 1030115194620 Project ID: qwiklabs-resources

  14. Click the Cloud Shell icon at the upper-right corner. Click Continue.
  15. Click Authorize to see lines like this: 
     Welcome to Cloud Shell! Type "help" to get started, or type "gemini" to try prompting with Gemini CLI.
 Your Cloud Platform project in this session is set to qwiklabs-resources.
 Use `gcloud config set project [PROJECT_ID]` to change to a different project.
 student_03_2e9edc111c72@cloudshell:~ (qwiklabs-resources)$

    Task 1: Open the Code Server editor

    In this lab, we will use a custom editor that includes the Flutter and Dart extensions.

  16. Switch to the Lab window.
  17. Click the copy icon for IDE.

  18. Switch to the incognito window and paste the URL

    Task 2. Create Flutter template “first_app”

  19. Switch to the IDE window.
  20. REMEMBER: Click control + shift + ` or click the menu at the upper-left to select “Terminal”.
  21. Copy and paste for the “Welcome” 
    flutter create first_app

    The name should be all lowercase, with underscores to separate words, “just_like_this”.Use only basic Latin letters and Arabic digits: [a-z0-9_].

    ``` Creating project first_app… Resolving dependencies in first_app… (1.1s) Downloading packages… Got dependencies in first_app. Wrote 129 files.

All done! You can find general documentation for Flutter at: https://docs.flutter.dev/ Detailed API documentation is available at: https://api.flutter.dev/ If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

$ cd first_app $ flutter run

Your application code is in first_app/lib/main.dart.

1. View the flutter app's commands: <pre>flutter</pre>

Manage your Flutter app development.

Common commands:

flutter create Create a new Flutter project in the specified directory.

flutter run [options] Run your Flutter application on an attached device or in an emulator.

Usage: flutter [arguments]

Global options: -h, –help Print this usage information. -v, –verbose Noisy logging, including all shell commands executed. If used with “–help”, shows hidden options. If used with “flutter doctor”, shows additional diagnostic information. (Use “-vv” to force verbose logging in those cases.) -d, –device-id Target device id or name (prefixes allowed). –version Reports the version of this tool. –enable-analytics Enable telemetry reporting each time a flutter or dart command runs. –disable-analytics Disable telemetry reporting each time a flutter or dart command runs, until it is re-enabled. –suppress-analytics Suppress analytics reporting for the current CLI invocation.

Available commands:

Flutter SDK bash-completion Output command line shell completion setup scripts. channel List or switch Flutter channels. config Configure Flutter settings. doctor Show information about the installed tooling. downgrade Downgrade Flutter to the last active version for the current channel. precache Populate the Flutter tool’s cache of binary artifacts. upgrade Upgrade your copy of Flutter.

Project analyze Analyze the project’s Dart code. assemble Assemble and build Flutter resources. build Build an executable app or install bundle. clean Delete the build/ and .dart_tool/ directories. create Create a new Flutter project. drive Run integration tests for the project on an attached device or emulator. gen-l10n Generate localizations for the current project. pub Commands for managing Flutter packages. run Run your Flutter app on an attached device. test Run Flutter unit tests for the current project.

Tools & Devices attach Attach to a running app. custom-devices List, reset, add and delete custom devices. devices List all connected devices. emulators List, launch and create emulators. install Install a Flutter app on an attached device. logs Show log output for running Flutter apps. screenshot Take a screenshot from a connected device. symbolize Symbolize a stack trace from an AOT-compiled Flutter app.

Run “flutter help ” for more information about a command. Run “flutter help -v” for verbose help output, including less commonly used options.

1. To disable reporting of telemetry, run this terminal command:
    <pre>flutter --disable-analytics</pre>

1. Navigate to the app's folder and run:
   <pre>cd first_app; flutter run</pre>

Connected devices:
Linux (desktop) • linux  • linux-x64      • Debian GNU/Linux 11 (bullseye) 5.10.0-30-cloud-amd64
Chrome (web)    • chrome • web-javascript • Google Chrome 126.0.6478.61
[1]: Linux (linux)
[2]: Chrome (chrome)
Please choose one (or "q" to quit):     ```    ### Task 3. Exploring the Flutter code
  1. Click the folder icon at the upper-left of the IDE window.
  2. Click “Open Folder” at /home/ide-dev/.
  3. Select “first_app” to see its folders.
  4. Click “OK” to see its files and folders:

  5. Click file pubspec.yaml to view it on the right-side pane.

    Task 4. Running the Flutter web application

  6. REMEMBER: Click control + shift + ` or click the menu at the upper-left to select “Terminal”.
  7. REMEMBER: Set the directory to first_app: 
    fwr
     Launching lib/main.dart on Web Server in debug mode...
 Waiting for connection from debug service on Web Server...         25.5s
 lib/main.dart is being served at http://0.0.0.0:8080
 The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.

 🔥  To hot restart changes while running, press "r" or "R".
 For a more detailed help message, press "h". To quit, press "q".

  8. Type R (for “r”) to reload, waiting until “Recompile” message appears.

  9. Click “Open in Browser” pop-up at the lower-right to open a URL such as: https://ide-service-6rqup7ut6q-uk.a.run.app/proxy/8080/

  10. Click Command+` to switch to the Lab window. flutter-tutorial1-538x300.png</a>
  11. Click the copy icon for “Live Server” at the left panel.
  12. Click the “+” at the top to start another incognito window.
  13. Switch to the incognito window and paste the URL. Rendering of the web application can take up to ten seconds. The view will show the application based on the code in the editor.
  14. Right-click to select “View Page Source”. REMEMBER: Instead of a lot of HTML, when the flutter_bootstrap.js file loads, it looks into manifest.json to know what else to load: 
    <link rel="manifest" href="manifest.json">
</head>
<body>
<script src="flutter_bootstrap.js" async></script>
</body>

    That is called “Hot Reload”.

    Task 5. Flutter Hot reload lib/main.dart

  15. In the EXPLORER menu click “lib”, then “main.dart”.

  16. Mouse over the separator above the Terminal panel and drag it down.

    IMPORTANT: Leave a line exposed so you can easily type R (“r”) to Reload (even though the instruction is no longer visible.

  17. Press “Esc” to enter Edit mode, because this is VIM.

  18. Click to highlight Flutter Demo and type in its place Flutter is awesome

  19. REMEMBER: Click control + shift + ` or click the menu at the upper-left to select “Terminal”.

  20. Switch to the browser tab displaying “https://browser-service-6rqup7ut6q-uk.a.run.app/

  21. Press CTRL+R to reload the page

  22. Click control + shift + ` or click the menu at the upper-left to select “Terminal”.
  23. Click “End Lab”.
  24. Close the Incognito browser window and Google Skills web page.

Google’s Dart language

  1. Confirm the version of the Dart language installed.

    3.10 released on: November 12, 2025

    Dart code files have an extension of “.dart”, introduced in 2011 and got to v1.0 in 2013.

  2. Past versions are listed at:

    https://dart.dev/resources/whats-new

  3. TODO: dart install tool.

  4. TODO: dart build tool.

Widgets

flutter-widgets-hier-357x662.png</a>

YouTube Live: Building scrolling experiences in Flutter | Workshop

Calls to APIs

AI tools: Google Gemini, OpenAI (ChatGPT), Anthropic

Google’s Firebase database

Smart Phone app features

animations and transitions to make apps visually stunning.

Utilize device features such as the camera within your applications.

Web apps

Taking Flutter to the Web By Damodar Lohani

Resources

Jobs

https://www.virtualemployee.com/da/hire-flutter-app-developers/

Flutter development was published on .