An Implementation of User-Interface Checking Function for Flutter Programming Learning Assistant System

To assist learning Dart programming on Flutter cross-platform development framework, we have developed the Flutter Programming Learning Assistant System (FPLAS). FPLAS integrates a Docker-based Flutter environment with Visual Studio Code, and offers three introductory exercise projects where a teacher needs to manually check the source codes from students by running them and verifying the output user-interfaces (UIs) one by one. In this paper, we implement a UI checking function to automatically check all the output UIs by comparing their image files with the given correct one using Flask framework and OpenCV libraries. For this function, currently, we request students to additionally submit the captured UI image files, which will be automated in future works. For evaluations, we applied the proposal to 141 UI image files for the projects from 32 students in Okayama University, Japan, and confirmed the validity and effectiveness.