
**Description**: This page is a supplementary document for <OutLink href="https://www.gdghk.org/">Google Developer Group Hong Kong (GGDHK)</OutLink> Flutter Study Group session titled <OutLink href="https://gdg.community.dev/events/details/google-gdg-hong-kong-presents-flutter-basics-for-web-developers-stateless-vs-stateful-widgets/">Flutter Basics for Web Developers: Stateless vs Stateful Widgets</OutLink>.

> **Disclaimer**: At the of writing this note, I'm fairly new to Flutter development, but has been developing mobile applications with <OutLink href="https://reactnative.dev/">React Native</OutLink> - If there are any mistakes that needs pointing out, feel free to react out at <OutLink href="mailto:nicholasb1537@gmail.com">nicholasb1537@gmail.com</OutLink>

<TableOfContents />

> Link to the assets used in the Flutter coding session can be accessed <OutLink href="https://github.com/nbean452/assets/tree/main/2026-08-07-flutter-study-group">here</OutLink>.

## Prerequisites

Here are the prerequisites before continuing any further during the live coding session:

- Flutter installed on your machine (<OutLink href="https://docs.flutter.dev/install/quick">official quickstart guide</OutLink>)
- Mobile device configured* (<OutLink href="https://docs.flutter.dev/platform-integration/android/setup">Android</OutLink> and <OutLink href="https://docs.flutter.dev/platform-integration/ios/setup">iOS</OutLink> setup guides)

> *Note that if you don't have your mobile device configured yet, you can always run your Flutter app on the web (e.g., `chrome`, etc.) - Which is what I'll be doing!

## Creating Your First Flutter Project

Now that you've setup Flutter (at least), let's start by creating a new empty Flutter project with the following command:

```sh
flutter create \
  --empty \
  --platforms ios \
  --platforms android \
  --platforms web \
  --org com.nbenedictcodes \
  pokedex
```

- `--empty`: Tells Flutter to use an empty template instead of the default.
- `--platforms <target>`: Specify what platforms to compile for (e.g., `ios`, `android`, `web`, etc.)
- `--org <reverse_dns>`: Unique identifier for your Flutter project (optional) - if you own a domain, see <OutLink href="https://blog.jim-nielsen.com/2021/reverse-dns/">here</OutLink>.

Depending on what your development platform is, you might be prompted to enter a valid development certificate - I'm using MacOS for this workshop, so I'm prompted to enter a certificate like below:

```sh
Valid development certificates available (your choice will be saved):
[1] Apple Development: nbenedict@mail-provider.com (XXXXXXXXXX)
Please select a certificate for code signing (or "q" to quit):
```

After creating your Flutter project, you can open `pokedex/` directory (or folder) and see its contents like below*:

```sh
pokedex/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── web/
├── README.md
├── analysis_options.yaml
├── pokedex.iml
├── pubspec.lock
└── pubspec.yaml
```

> *File structure above was simplified to prevent showing too many files at once, and this file structure was created with the help of <OutLink href="https://github.com/eza-community/eza#display-options:~:text=%2DT%2C-,%2D%2Dtree,-%3A%20recurse%20into%20directories">eza</OutLink>

Given this file structure, we only need to focus on the following places for this workshop:

- `lib/` - Where our Dart code lives, our custom Widgets goes here.
- `assets/` - **This folder doesn't exist yet.** We need to create this to store our local assets.
- `pubspec.yaml` - Manage third-party dependencies, bundle local assets into your Flutter project, configure linting, etc. More options <OutLink href="https://docs.flutter.dev/tools/pubspec">here</OutLink>.
- `openapi.yml` - OpenAPI specification to generate client-side code. We'll talk about this lovely tool [below](#open-api)

## Running your Flutter Project

Once you reach this section, you have several platform targets on running your Flutter project (ranked by the amount of effort needed to run the Flutter app, from top to bottom):

1. Web browser (e.g., Google Chrome, Microsoft Edge, etc.) - Available by default in your development machine
2. Android - Required to setup Developer Mode (<OutLink href="https://docs.flutter.dev/platform-integration/android/setup">guide</OutLink>)
3. iOS devices - Required to configure a development certificate, trust developer ID, etc. (<OutLink href="https://docs.flutter.dev/platform-integration/ios/setup">guide</OutLink>)

You can view available devices to run the Flutter project by running:

```sh
flutter devices
```

Which gives the following results:

```sh
Found 3 connected devices:
  SM A3760 (mobile) • [SAMSUNG_ID] • android-arm64  • Android 16 (API 36)
  macOS (desktop)   • macos        • darwin-arm64   • macOS 26.5.2 25F84 darwin-arm64
  Chrome (web)      • chrome       • web-javascript • Google Chrome 150.0.7871.189

Found 1 wirelessly connected device:
  Nicholas' iPhone 16 Pro (wireless) (mobile) • [IPHONE_ID] • ios • iOS 26.5.2 23F84
````

> Result above depends on what devices are connected to your machine through either wired/wireless methods.

To run for a certain platform, we'd have to use whatever value that's shown on the second column (e.g., `[SAMSUNG_ID]`, `macos`, `chrome`, `[IPHONE_ID]`) and pass it into `-d` flag when running `flutter run`:

```sh
flutter run -d chrome
```

After waiting for Flutter to start up, you should see a new instance of Chrome browser dedicated for your Flutter app.

## Creating your first Widget

Now the Flutter app runs, but it looks blank and sad, what do we do next? We add widgets of course. Let's look inside `lib/main.dart`:

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}
```

We can see that the file has `MainApp` class inherits `StatelessWidget`, thus making the child class have to implement `build` method and its return type is of `Widget`. Let's start editing this file with the following code, replace `L10-L19` with the following snippet:

```dart
@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Pokédex',
    home: Scaffold(
      appBar: AppBar(
        title: Text('Pokédex', style: TextStyle(fontWeight: FontWeight.w700)),
        backgroundColor: Colors.red[400],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsetsGeometry.all(8),
          child: Column(
            spacing: 4,
            crossAxisAlignment: .stretch,
            children: [
              Row(
                children: [
                  Expanded(
                    child: SizedBox(
                      height: 100,
                      child: Card(
                        color: Colors.orange,
                        child: Center(child: Text("I'm card #1!")),
                      ),
                    ),
                  ),
                  Expanded(
                    child: SizedBox(
                      height: 100,
                      child: Card(
                        color: Colors.purple,
                        child: Center(
                          child: Text(
                            "I'm card #2!",
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 100,
                child: Card(
                  color: Colors.blue,
                  child: Center(
                    child: Text(
                      "I'm card #3!",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}
```

Whoa! What a big change just to render 3 widgets! Let me try to break it down:

- `debugShowCheckedModeBanner: false` - Removes the **Debug** banner on the top-right corner of our project
- `title` - Sets the title to whatever value you set if you're on web browser
- `Scaffold` - A top-level container of each screen, exposes easy-to-use properties (e.g., `appBar`, `body`, `floatingActionButton`, etc.).
- `AppBar` - Allows developers to place title of the app on top of the screen and navigation bar at the bottom (<OutLink href="https://api.flutter.dev/flutter/material/AppBar-class.html">docs</OutLink>)
- `SingleChildScrollView` - Allows screen to be scrollable when there's too many items in a screen (<OutLink href="https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html">docs</OutLink>)
- `Column` - Whatever children widgets placed in here will go vertically, one after another (<OutLink href="https://api.flutter.dev/flutter/widgets/Column-class.html">docs</OutLink>)
- `Row` - Whatever children widgets placed in here will go horizontally, one after another (<OutLink href="https://api.flutter.dev/flutter/widgets/Row-class.html">docs</OutLink>)

There are way more widgets that's used when developing Flutter apps, so do refer to the <OutLink href="https://docs.flutter.dev/ui/widgets/material">widget collection</OutLink> by Flutter.

Once the Flutter app is reloaded, we should be able to see the latest changes which looks better than a ***Hello World!*** text.

> My usual editor doesn't support automatic <OutLink href="https://docs.flutter.dev/tools/hot-reload">Hot Reload</OutLink>, so I'd have to keep pressing `r` in my terminal :)

## Bundling Local Assets into the Project

So our screen doesn't look that empty right now, but what about bundling some assets that needs to be available when there's no network (e.g., fonts, local images, etc.)? we'd have to 2 things:

1. Preparing local files for Flutter to use - (sample files provided <OutLink href="https://github.com/nbean452/assets/raw/refs/heads/main/2026-08-07-flutter-study-group/assets.zip">here</OutLink>)
2. Tell Flutter that we have some assets that needs to be bundled together by updating `pubspec.yaml`

So after downloading the zip file from the link above, make sure to unzip and move `assets/` folder into the project directory. Now we just need to add the following lines to `pubspec.yaml#L19`:

```yaml
  assets:
    - assets/images/

  fonts:
    - family: Poppins
      fonts:
        - asset: assets/fonts/poppins/regular.ttf
        - asset: assets/fonts/poppins/bold.ttf
          weight: 800
    - family: Comic Neue
      fonts:
        - asset: assets/fonts/comic-neue/regular.ttf
        - asset: assets/fonts/comic-neue/bold.ttf
          weight: 800
```

- `assets:` - Tells Flutter that we are including all files in `assets/images/` folder
- `fonts` - Tells Flutter of font families that it can use and any variations (e.g., font weight, italic, etc.)

> **Note the indentation!** These sub-items must be placed under `flutter` on L18 of the file

Once `pubspec.yaml` is updated, make sure to stop and re-run the Flutter development server since these assets aren't loaded yet. After that, we will add a new line under `lib/main.dart#L14` with the following line:

```dart
theme: ThemeData(fontFamily: 'Comic Neue'),
```

After that, replace L19 within the same file where we pass `title` property with this:

```dart
title: Row(
  spacing: 5,
  mainAxisAlignment: .center,
  children: [
    Image(
      image: AssetImage('images/pokeball.png'),
      width: 25,
      height: 25,
    ),
    Text('Pokédex', style: TextStyle(fontWeight: FontWeight.w700)),
  ],
)
```

Now the app bar shows a pokeball with **Pokédex** next to it!

## Fetching Data over Network and Creating Structured Data

Now that we some sort of an understanding on how we compose UI using widgets in Flutter, we should start reading up on fetching data over the internet. We'll be using <OutLink href="https://pub.dev/packages/http">http</OutLink> package to make network requests.

Alongside that, here are the following data sources that we're using for this workshop:

- <OutLink href="https://pokeapi.co/">PokéAPI</OutLink> - Open-source Pokémon data
- <OutLink href="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white">Pokémon sprites</OutLink> - Provided by the same entity, but in GitHub

To install `http` package, we can run this command:

```sh
flutter pub add http
```

If command had no errors while executing, you should be able to find `http` inside `pubspec.yaml`

Once that's done, let's create a `Pokemon` data model where it holds `name` and `url` properties - let's name the file `lib/models/pokemon_species.dart`, with this content:

```dart
class PokemonSpecies {
  final String name;
  final String url;

  const PokemonSpecies({required this.name, required this.url});

  factory PokemonSpecies.fromJson(dynamic json) {
    return switch (json) {
      {'name': String name, 'url': String url} => PokemonSpecies(
        name: name,
        url: url,
      ),
      _ => throw const FormatException('Failed to load Pokémon.'),
    };
  }
}
```

After that, create a file located under `lib/components/pokemon_species_catalog.dart`, with the following content:

```dart
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:pokedex/models/pokemon_species.dart';

class PokemonSpeciesCatalog extends StatefulWidget {
  const PokemonSpeciesCatalog({super.key});

  @override
  State<PokemonSpeciesCatalog> createState() => _PokemonCatalog();
}

class _PokemonCatalog extends State<PokemonSpeciesCatalog> {
  late Future<List<PokemonSpecies>> futurePokemonSpeciesList;

  Future<List<PokemonSpecies>> _fetchPokemonSpeciesList() async {
    final response = await http.get(
      Uri.parse('https://pokeapi.co/api/v2/pokemon-species/?limit=25'),
      headers: {'Accept': 'application/json'},
    );

    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
      return (jsonDecode(response.body)['results'] as List<dynamic>)
          .map((json) => PokemonSpecies.fromJson(json))
          .toList();
    } else {
      // If the server did not return a 200 OK response,
      // then throw an exception.
      throw Exception('Failed to load Pokémon species');
    }
  }

  @override
  void initState() {
    super.initState();
    futurePokemonSpeciesList = _fetchPokemonSpeciesList();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<PokemonSpecies>>(
      future: futurePokemonSpeciesList,
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(child: CircularProgressIndicator());

          case ConnectionState.done:
            List<PokemonSpecies> pokemonSpeciesList = snapshot.requireData;

            List<Widget> listTiles = pokemonSpeciesList.map((pokemonSpecies) {
              List<String> pokemonUrlParts = pokemonSpecies.url.split('/');

              String pokemonSpeciesId =
                  pokemonUrlParts[pokemonUrlParts.length - 2];
              String paddedPokemonSpeciesId = pokemonSpeciesId.padLeft(3, '0');

              String pokemonSpriteUrl =
                  'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/$pokemonSpeciesId.png';

              return ListTile(
                contentPadding: .symmetric(vertical: 5, horizontal: 10),
                leading: Container(
                  padding: .all(8),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.grey[300],
                    border: BoxBorder.all(color: Colors.black, width: 1),
                  ),
                  child: CircleAvatar(
                    backgroundImage: NetworkImage(pokemonSpriteUrl),
                  ),
                ),
                trailing: Icon(Icons.chevron_right),
                title: Text('Pokémon #$paddedPokemonSpeciesId'),
              );
            }).toList();

            return Column(children: listTiles);

          default:
            return Text("Unhandled case");
        }
      },
    );
  }
}
```

Finishing up, you should import `PokemonSpeciesCatalog` into `lib/main.dart` and you'll be able to see the first 25 Pokémon entries in the Pokédex.


This is a hands-on workshop on the steps required to run open-source docker applications on a Compute Engine instance in Google Cloud Platform and serve the apps via https.

Google Developer Group HK: Flutter Study Group #01


Link to the sample `docker-compose.yml` files can be found <OutLink href="https://github.com/nbean452/google-dev-fest-2025-workshop">here</OutLink>

Description: This is a hands-on workshop on the steps required to run open-source docker applications on a Compute Engine instance in Google Cloud Platform and serve the apps via https.

When you read this, it's safe to assume that you have met the pre-requisites:

- Created a Compute Engine instance from GCP
- Able to SSH into the Compute Engine instance
- Own a subdomain (e.g., domain.com) and have access to its DNS settings
- Have API token key for the domain registrar (e.g., Cloudflare, Namecheap, etc) to authorize issuance of SSL certificates

Note: If you are experienced, some of these steps are interchangeable if you want to host apps from your own personal computer.

So, what are the next steps?

- [Git Clone this repository](#git-clone-this-repository)
- [Docker Installation](#docker-installation)
- [Setup Docker Network](#setup-docker-network)
- [Setup the env files](#setup-the-env-files)
- [Run the applications](#run-the-applications)
- [Configure Nginx Proxy Manager](#configure-nginx-proxy-manager)

## Git Clone this repository

First, we need to clone this repository into our Compute Engine instance. So SSH into your Compute Engine instance and run the following command:

```sh
sudo apt install git -y && git clone https://github.com/nbean452/google-dev-fest-2025-workshop.git
```

## Docker Installation

Now that we've SSH-ed into our Compute Engine instance, we need to install Docker before we can run the apps that we want. So we need to run the following commands

Note: installation command taken from official Docker installation instructions for Linux Debian 12 [here](https://docs.docker.com/engine/install/debian/)

```sh
# Remove pre-existing docker installation from the machine
for pkg in docker.io docker-doc docker-compose podman-docker containerd runc; do sudo apt-get remove $pkg; done &&

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl -y
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/debian/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/debian \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y

# Give our user permission to run `docker` without sudo privileges
sudo groupadd docker
sudo usermod -aG docker $USER

# Ensure docker always run when compute instance is turned on
sudo systemctl enable docker.service
sudo systemctl enable containerd.service

exec $SHELL
```

If everything went well, you should be able to verify if the installation went well with this command:

```sh
docker run hello-world
```

## Setup Docker Network

To achieve our goal of having our docker apps accessible by our web server (`nginx-proxy-manager`) when there's an incoming request, we need to create a docker network and put all our docker containers within the same network

```sh
docker network create --driver bridge services-network
```

## Setup the env files

To make it easier to manage our own apps, let's create `.env` files from the given `.env.example` files in each app subdirectories

## Run the applications

Now that we have everything set up, we can now run our applications. For each subdirectory, run the following commands (except nginx-proxy-manager, which we will run last):

```sh
cd <app-directory>
docker compose up -d
```

## Configure Nginx Proxy Manager

First thing, we need to do `docker compose up -d` in the `nginx-proxy-manager` subdirectory to start the NGINX Proxy Manager app. But here's the difference, first run, we're going to route port 81 within the docker into the host machine's port 80 (to access nginx proxy manager dashboard from browser). From there, we can set up the SSL certificates and proxy hosts.

- Proxy hosts (helps NGINX understand which app to forward the incoming request to)
- SSL Certificates (helps secure the connection between the user and the NGINX server) using the Cloudflare API token (we're using Cloudflare for this demo)

Once these are set up, we can now change back the port mapping to "80:80" and "443:443" in the `docker-compose.yml` file within the `nginx-proxy-manager` subdirectory and restart the container.

# Conclusion

You have reached the end of this README, meaning that you have successfully hosted your own open-source applications on a Compute Engine instance in Google Cloud Platform and served the apps via https using NGINX Proxy Manager. Congratulations!


Google DevFest 2025 Notes: Host Open-source Applications on Compute Engine


For my university's final year project, I proposed a full-stack web application that can recommend relevant courses based on user's inputs. The full-stack web app consists of Next.js and Django app. Additionally, I used Django Rest Framework to enable my Django app to send and receive JSON responses, making it easy for my Next.js app to communicate with the server. I used Supabase for the database as it was free and I didn't want to spend too much on using Amazon's RDS.

Next.js app serves as where the user interacts with the system and visualizes the JSON data from Django app. On the other hand, the Django app handles all logic available from reading and modifying database to generating course recommendations.

Within the Django app, I proposed two types of recommender system, the first one being the Content-Based Filtering (CBF) Recommender System, and Collaborative Filtering (CF) Recommender System. As of writing this post, I had finished the both recommender systems.

For CBF Recommender System, I needed the gather my university's course data before I can do anything. I started with creating a simple web scraper to get a list of offered courses on my university's website and downloaded each course's pdf files. Then I used PyPDF2 to extract the pdf's texts and stored them into the database. Next, I used NumPy and scikit-learn to implement TF-IDF (Term Frequency - Inverse Document Frequency), a Natural Language Processing technique to vectorize each course descriptions and compared each other using Cosine Similarity to generate course recommendations which will be sent as a JSON response from the Django app.

For deployment, both apps were containerized and deployed to Digital Ocean's servers and for the web server, I used Caddy, an alternative to Nginx, to serve the containerized apps. I made these choices to cut down on costs while still maintaining performance.

With this project, I learned a lot, such as learning the new Redux Toolkit as I had only used the old Redux before, learned many new things about Django development as it had several convenient functionalities built-in, and lastly, practiced DevOps by dockerizing and using web servers for deployment.

Lastly, for reading all of this, I present to you, the website <OutLink href="https://capstone.nbenedictcodes.com">link</OutLink>


Full stack web application that uses NLP approach to generating course recommendations

Course Recommender System


<OutLink href="https://iprotect.hk">iProtect</OutLink> is one of MyLife Network's
projects and the idea of this application was to provide personalized insurance health
products.

As a Full Stack Developer Intern at MyLife Network, I was assigned with developing the mobile and web app. For mobile app, I used React Native extensively. On the other hand, I used Next.js for the web app development. This was one of my first real-world projects that I had gotten and I had the opportunity to practice by coding on an existing project.

In addition to having the mobile application's UI rebuilt, I also contributed to the revamping of one of the company's websites as a member of the frontend web development team. We enhanced the user experience by porting features from mobile app to the web app.

Overall, my internship at MyLife Network allowed me to develop my skills as a Full Stack Developer and meet other like-minded people during my time there.


App that provides personalized insurance health products

iProtect (Web & Mobile App)


An entry for the Global Game Jam HK 2022. This AR Mobile game received received recognition as the "Best AR Game". This game was developed in five days by the combined efforts of four people. This game was built using Unity and for the AR aspects, Vuforia, an AR software platform was used to enable rapid development of the game.

At the time, the Global Game Jam committee announced the "Duality" theme. This meant that if our game wouldn't qualify for any awards if we made game without factoring the theme. Additionally, we only had 10 days in total, so we spent the first 5 days brainstorming on an interesting with the announced theme in mind. On the 5th day, we came up with the gameplay of using "black and white" perspective to solve puzzles. What happened next was we started working on it tirelessly for the next 5 days for a game worthy of an award for Global Game Jam.

For winning the "Best AR Game" award, we received an MR glasses and several face masks. It was a fun experience for me because I was able to meet with other like-minded people and do what we love doing, and that is programming.

<OutLink href="https://globalgamejam.org/2022/games/mono-1">Here</OutLink> is the
link for the game submission and thanks for reading!


An AR game made for Global Game Jam HK 2022

Hey, I'm Nicholas 👋

Tech I Use

Latest Notes

Google Developer Group HK: Flutter Study Group #01

Google DevFest 2025 Notes: Host Open-source Applications on Compute Engine

Selected Works

Course Recommender System

iProtect (Web & Mobile App)