A Design of UI Image Generation Method for Flutter Programming Learning Assistant System

To support novice students in learning Dart programming on Flutter, a cross-platform development framework, we have developed Flutter Programming Learning Assistant System (FPLAS). It features a Docker-based development environment and includes teacher-prepared sample projects for exercises. After completing these projects, students need to submit source codes and their output UI images to a teacher. Then, the teacher will manually assess them one by one. However, this manual assessment is inefficient and inconsistent due to variations in browser types and students’ PC resolutions. In this paper, we present a design of the UI image generation method for FPLAS to solve this issue. This method automatically runs submitted source codes on the FPLAS Docker container, and capture and store their output UI images. It will use the Flask Python framework. The implementation and evaluation of the design will be in future works.