/bloc_pattern

This project focuses on implementing the Business Logic Component (BLoC) pattern in a Flutter application.

Primary LanguageC++

Flutter Practice: BLoC Pattern

Description

This project focuses on implementing the Business Logic Component (BLoC) pattern in a Flutter application.

Follow the series of YouTube videos below to get started:

The Ultimate Bloc Course - By Flutter Guys

Getting Started

  1. Install the project

    $ git clone https://github.com/liuyuweitarek/bloc_pattern.git

  2. Install Docker Desktop.

  3. Install VScode extension Remote - Containers.

    1. Go to the Extensions view by clicking on the square icon on the left sidebar or by pressing Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac).
    2. Search for "Remote - Containers" in the search bar.
    3. Click on the "Install" button next to the "Remote - Containers" extension.
    4. Once the extension is installed, you can follow the instructions provided in the extension's documentation to set up and use it with your project.

    Please note that the "VSCode Remote - Containers" extension allows you to develop inside a containerized environment, which can be useful for Flutter projects that require specific dependencies or configurations.

  4. Install VScode extension Flutter. The same steps as above.

  5. Create a new flutter project in ./src.

    1. ctrl + shift + p (Windows/Linux) or cmd + shift + p (Mac) searching for Flutter: New Project to create a new flutter project.
    2. Select folder ./src and build project.

  6. Run the following command in your terminal:

    $ docker compose up --build -d

  7. Follow the Debug step below to see whether the app is able to be running successfully or not.

Builds

The project is divided into two types of builds: Debug and Release.

Debug

This build type is used for development and testing. It is the default build type.

  1. Connect to the container through VSCode Extension.
  2. Run the following command in the terminal: 
    $ flutter run -d web-server --web-port=9001
  3. Visit http://localhost:9001 in your browser to the rendering effect. Also, you can see the logs in the terminal.

Release

This build type is used for local production.

  1. Run the following command in the terminal:
# Make sure that the services are down
$ docker compose down

# otherwise, run the following command
$ docker compose up --build -d
  1. If it's your first time to run the app, you'll need to create a release build first. Run the following command in the terminal(not in the container terminal):
$ flutter exec -it flutter-web-simple_news_app bash /usr/local/script/flutter-web-init.sh

Otherwise,

$ flutter exec -it flutter-web-simple_news_app bash /usr/local/script/flutter-web-build.sh

What's "Release build" actually do in the docker-compose.yaml file?

Step 1: Create the Release Build

To create a release build of your Flutter web app, navigate to the src/simple_news_app directory in your terminal and run the following command:

$ flutter build web

This command will generate the release build of your app in the ./build/web directory.

Step 2: Mount the Build Directory to Nginx

Next, you need to mount the ./build/web directory to the Nginx server's directory /var/www/html. To do this, you'll need to update the volumes section in your docker-compose.yaml file.

In the docker-compose.yaml file, locate the flutter-nginx service and update the volumes section as follows:

volumes:
  - "./src/simple_news_app/build/web:/var/www/html"

This will mount the ./build/web directory to the /var/www/html directory inside the Nginx container.

Step 3: Start the Nginx Server

To start the Nginx server and make it accessible on port 80, run the following command in your terminal:

$ docker compose up --build -d

This will start the Nginx server and make it accessible on http://localhost:80.