soethandara/plas_flutter_docker

It is about the system that can build flutter applications without installing flutter SDK. Student can directly create flutter apps without worrying about implementation of system environment.

Flutter Development Environment in Docker Container

1. ⚙️ About the System
2. 🔨 Prerequisites
3. 🖥 Follow the procedure according to OS
   • Windows
   • Linux (Ubuntu)
   • MacOS
     • Intel Processor
     • M1/2/3 Chip Processor
4. 📜 About Exercises
   • Exercise-1
   • Exercise-2
   • Exercise-3
5. 📑 Answer File
6. 🔖 Answer File Submission Links
7. 📝 System Usage Feedback

---

1. About the System

In response to the identified challenges confronted by students in mobile app development education, this study introduces a comprehensive solution with Docker containers. The background emphasizes the difficulties students encounter in setting up development environments for Flutter app development. Addressing this issue, our proposed system streamlines the entire process within a Docker container, thereby offering a hassle-free environment accessible through Visual Studio Code (VSCode) across diverse operating systems, including Windows, Linux, and Mac.

if back to top ↑

---

2. Prerequisites

• It is needed to install VSCode and Docker. Then, three extensions (flutter, remote development, docker) are necessary to add. if necessary, please download & reference the following user manual plas_flutter_docker.pdf

  Tool	Install	URL
  	VSCode	https://code.visualstudio.com/
  	Docker	https://www.docker.com/products/docker-desktop
  	flutter	Add 'flutter' extension to VSCode
  	remote development	Add 'remote development' extension to VSCode
  	docker	Add 'docker' extension to VSCode

if back to top ↑

---

3. Procedure according to OS

• Depending on the Operating System, the way is different. Therefore, please follow the procedure according to the conrrespondence OS.

Windows

Get the docker image, which has flutter development environment.

docker pull soethandara/plas_flutter_docker:v1.1

Get the project from Github, which has

• docker-compose.yml to execute pulled docker image
• devcontainer.json to connect running docker container from VSCode.

git clone https://github.com/soethandara/plas_flutter_docker.git

Open VSCode and correspondence folder plas_flutter_docker/windows/

Connect to container

• Click icon at the left-button of VSCode
• Type Reopen in Container (or) Choose Open Folder in Container...

if back to top ↑

---

Linux (Ubuntu)

Get the docker image, which has flutter development environment.

docker pull soethandara/plas_flutter_docker:v1.1

Get the project from Github, which has

• docker-compose.yml to execute pulled docker image
• devcontainer.json to connect running docker container from VSCode.

git clone https://github.com/soethandara/plas_flutter_docker.git

Open VSCode and correspondence folder plas_flutter_docker/linux/

Connect to container

• Click icon at the left-button of VSCode
• Type Reopen in Container (or) Choose Open Folder in Container...

Caution

if error is occurred in the above stage, please do the following:

• Click Edit devconainer.json Locally
• Open terminal from VSCode
• Type the following

docker compose up

if back to top ↑

---

MacOS

Apple's transition from Intel processors to its custom-designed chips (M1/2/3), starting with the M1 and subsequent iterations. Before their transition, Apple Mac computers used Intel processors. It is provided for both Intel and M chip processors.

MacOS (Intel Processor)

Get the docker image, which has flutter development environment.

docker pull soethandara/plas_flutter_docker:v1.1

Get the project from Github, which has

• docker-compose.yml to execute pulled docker image
• devcontainer.json to connect running docker container from VSCode.

git clone https://github.com/soethandara/plas_flutter_docker.git

Open VSCode and correspondence folder plas_flutter_docker/mac/intel/

Connect to container

• Click icon at the left-button of VSCode
• Type Reopen in Container (or) Choose Open Folder in Container...

if back to top ↑

---

MacOS (M Chip Processor)

Get the docker image, which has flutter development environment.

docker pull soethandara/plas_flutter_docker:v1.2

Get the project from Github, which has

• docker-compose.yml to execute pulled docker image
• devcontainer.json to connect running docker container from VSCode.

git clone https://github.com/soethandara/plas_flutter_docker.git

Open VSCode and correspondence folder plas_flutter_docker/mac/mchip/

Connect to container

• Click icon at the left-button of VSCode
• Type Reopen in Container (or) Choose Open Folder in Container...

if back to top ↑

---

4. About Exercises

Student can see 3 sample flutter projects under /root directory using the following comment on VS code terminal. Students need to modify these 3 sample projects according to the expected results. If above step-3 is successful, it will automatically enter to the running container and terminal will be opened. The following things can be performed at the opened terminal.

ls -al /root

Exercise-1

Copy the exercise-1 to workplace

scp -r /root/exercise1 /root/workspace/
cd /root/workspace/exercise1

Modify the codes as same as expected result in main.dart under lib folder from exercise-1

Run following command to check the output

flutter run -d web-server

Access http://localhost:port

(port number is dynamic and so, access url will be displayed in the output of above command. It can be accessed then.)

Caution

On MacOS, there may have no response matter, when calling the url (http://localhost:port). It is still figuring out ....

if back to top ↑

---

Exercise-2

Copy exercise-2 to workplace

scp -r /root/exercise2 /root/workspace/
cd /root/workspace/exercise2

Modify the codes as same as expected result in main.dart under lib folder from exercise-2

Run to check the output

flutter run -d web-server

Access http://localhost:port

(port number is dynamic and so, access url will be displayed in the output of above command. It can be accessed then.)

if back to top ↑

---

Exercise-3

Copy exercise-3 to workplace

scp -r /root/exercise3 /root/workspace/
cd /root/workspace/exercise3

Modify the codes as same as expected result in main.dart under lib folder from exercise-3

Run to check the output

flutter run -d web-server

Access http://localhost:port

(port number is dynamic and so, access url will be displayed in the output of above command. It can be accessed then.)

if back to top ↑

---

5. Answer File

Student need to submit main.dart for each exercise and the location of main.dart (for e.g. exercise1 in below)

• C://flutter_workspace/exercise1/lib/main.dart at Windows
• current_directory/exercise1/lib/main.dart at Linux
• current_directory/exercise1/lib/main.dart at MacOS

if back to top ↑

---

6. Answer File Submission Links

To submit main.dart, rename as the following format.

• studentId_main.dart (e.g, 43M21510_main.dart)

• 📜 Exercise1 https://u.pcloud.com/#page=puplink&code=7XIkZ3rfLz7YXcmYlTj1QtJ9nA01IEKB7

• 📜 Exercise2 https://u.pcloud.com/#page=puplink&code=kXIkZ6Ye4qeJJqihxtKHtTxDJgmOaNYdy

• 📜 Exercise3 https://u.pcloud.com/#page=puplink&code=XXIkZi84JJaLos9LMkftECB3iFp8skIR7

if back to top ↑

---

7. System Usage Feedback

Please access the following Google form for taking survey usage of this system

• 📝 https://forms.gle/hidR2kpiEtAQJ2uJ6

if back to top ↑

---