An Independent Learning System for Flutter Cross-Platform Mobile Programming with Code Modification Problems

1. Introduction

The use of mobile devices has become an integral part of daily life for a lot of people. In 2023, over 4.2 billion people worldwide used smartphones. Projections from Statista suggest that this number will continue rising so that over 6.3 billion people will use smartphones in the next five years [1].

As smartphone adoption grows, so does the demand for innovative and high-quality mobile applications. Based on data.ai, users worldwide downloaded over 255 billion mobile applications in 2023, demonstrating a strong interest in installing mobile applications that offer added value to smartphones [2]. This surge in application downloads has reflected the significant role of mobile applications that are relied upon for various purposes, including entertainment, communication, productivity, and shopping.

Traditionally, developers build applications using Java and Kotlin for Android, and Swift and Objective-C for iOS. These languages stand to be popular due to the fact that a lot of developers have been acquainted with these platforms [3]. Native development allows developers to fully utilize the exclusive capabilities and features of each operating system. However, one major drawback is developers need to build and manage different source codes depending on platforms even for the same applications.

To address this challenge, cross-platform application development [4] has emerged as a way to create applications for developers to write code once and deploy it on multiple platforms. This approach saves time, effort, and costs while reaching wider audiences. Cross-platform application development has gained great popularity in recent years.

Among the most prominent frameworks for cross-platform application development is Flutter, which has been developed by Google. Flutter is an open-source UI development toolkit that enables developers to build natively compiled applications for mobile, including Android and iOS, web, and desktop platforms from a single codebase. It provides a rich set of prebuilt widgets and tools that help developers create attractive, responsive, and flexible user interfaces [5].

The following advantages can be observed in learning and using the cross-platform application development with Flutter:

A single source code using one language, Dart, can run on various platforms.
An attractive, responsive, and flexible user interface can be easily made using prebuilt widgets and tools.
Real-time code changes become possible by the hot-reload feature.
Comprehensive documentation and a supportive community make Flutter particularly suitable for self-learners, enabling individuals to independently tackle and resolve code modification problems.

As a result, Flutter has become favored by many well-known companies due to its numerous advantages, and Flutter has been adopted at well-known companies such as Cryptograph, Postmuse, Hamilton, Apptree, and Google [6].

However, this rapid growth in the popularity of Flutter has not been accompanied by a proportional increase in classroom instruction and lectures in universities. Many universities still lack sufficient resources in terms of teachers and/or time to deliver comprehensive lectures on Flutter development. As a result, there is a growing need for independent learning environments for new developers and students to learn Flutter with Dart programming on their own.

In response to this gap, we previously developed a web-based Programming Learning Assistant System (PLAS) for self-study of programming languages through practicing code reading and code writing. Currently, PLAS covers familiar programming languages such as C, C++, Java, JavaScript, Python, Scratch, and Verilog. PLAS provides various types of programming exercises to enhance the programming learning experience.

Building on this foundation, we have also studied the use of Grammar Understanding Problem (GUP) for learning cross-platform application development with Flutter in PLAS. Each question in GUP relates to a fundamental grammar concept of the Flutter [7]. Additionally, the Learning Environment for Initiating Flutter App Development Using Docker has been implemented for Code Writing Problem (CWP). This environment makes it easier for novice students to set up the Flutter environment on their computers and independently modify the source code in the projects by following instructions [8].

In this paper, we present a system for independent learning using Code Modification Problem (CMP) for Flutter/Dart programming in cross-platform application development. A CMP instance asks to modify the given source code to generate the user interface as shown in the given screenshot. The correctness of any student answer is verified through string matching with the correct answer. A screenshot will help a student to understand the source code and answer the CMP instance. Novice students can learn the basics of Flutter/Dart programming through analyzing the screenshot of the user interface.

In this study, we explore the following Research Questions (RQs):

Can a student who has studied a major programming language such as C or Java but not Flutter/Dart programming modify its source codes without taking formal classes?
Can such a student develop a basic knowledge of Flutter/Dart programming by solving CMP instances?

To explore the answers to these RQs, we generated CMP instances covering various topics and widgets in Flutter/Dart programming, and assigned them to students with no Flutter/Dart programming experience. In the CMP instances, it is requested to alter only the parameters, such as color, alignment, and other widget properties. Solving CMP instances helps students become familiar with Dart coding patterns and build a fundamental understanding of the Flutter framework.

For evaluations of the proposal, we generated 20 CMP instances for basic topics and 18 CMP instances for advanced topics of Flutter/Dart programming. We assigned them to 21 master’s students at Okayama University, Japan, who have never studied it. Their solution results indicate that the students effectively fulfilled the assignments and delivered sufficient outcomes.

This paper’s structure is outlined as follows: Section 2 contains a review of relevant research on the approach. Section 3 provides an overview of Flutter and Dart Language. Section 4 addresses the code modification problem (CMP) for Flutter. Section 5 presents experimental results. Section 6 concludes this paper with future works.

2. Literature Review

In this section, we explore a comprehensive review of the literature related to the topic of our paper. We examine several studies that have focused on the development of learning platforms for mobile applications.

In [9], Al-Hakim et al. presented an Android-based application for teaching algorithms and data structures. This application is implemented using Java and Android Studio for Android 6.0 and above, containing 13 learning modules covering topics, such as introductions to algorithms and programming, data structures, and linked lists. The application is freely available for learning purposes. It uses UML diagrams that are similar to activity diagrams and use case diagrams for system processing and user interactions. It adopts black-box testing to check the answer. The authors conclude that this application can replace textbooks, enabling both independent and lecturer-assisted learning using mobile technology.

In [10], Septiana et al. presented a learning application on Android Studio for building Android applications. The authors used various components within Android Studio, including manifest files, Java source code, and resource files to build the core functionality of the mobile application. Blender was used for 3D development and integrations. It is an open-source 3D computer graphics software tool that allows creating 3D models, animations, and visualizations. The integrated 3D contents from Blender enhanced biology learning experiences on Android devices with interactive features and multimedia presentations.

In [11], Tung presented a flashcard mobile application called Memoa using the Flutter framework, Dart, and Google Firebase services. This project aims to create gamified learning experiences for users struggling to retain knowledge from online courses. It covers flashcards, spaced repetitions, and gamification principles. The project follows an Agile Kanban methodology for developments. Key features include user authentication, cloud storage, the Leitner algorithm for spaced repetitions, and a virtual pet for gamification.

In [12], Yassine et al. presented a mobile application that teaches programming fundamentals by incorporating the multi-agent system, domain ontology, checkpoint system, and Xamarin.Forms for cross-platform developments. The goal is to appeal to wide audiences, reduce development and maintenance efforts, and offer versatile and engaging learning experiences.

In [13], Hu et al. discussed improving the teaching of Mobile Application Development (MAD) for students with diverse programming backgrounds using online and blended learning approaches. The study addresses the challenges posed by traditional lecture-based methods and text-based lab instructions, which did not adequately cater to students with differing programming experiences.

This literature review provides insights into advancements in the development of learning platforms for mobile application programming. It explores various methodologies, tools, and technologies that have been implemented to enhance the learning of mobile application programming.

To better understand and compare the features of these platforms, Table 1 summarizes their key attributes, advantages, and limitations.

4. Code Modification Problem for Flutter/Dart Programming

In this section, we present a code modification problem (CMP) for self-study of Flutter/Dart programming in PLAS.

4.1. Overview of PLAS

Previously, we developed a web-based Programming Learning Assistant System (PLAS) for the self-study of programming languages through practicing code reading and code writing. Currently, PLAS covers familiar programming languages such as C, C++, Java, JavaScript, Python, Scratch, and Verilog. PLAS provides various types of programming exercises to enhance the effectiveness of learning programming.

Figure 3 shows the learning path of a programming language in PLAS.

Grammar—Concept Understanding Problem (GUP) asks to answer the keywords or common libraries in the given source code that represent the concepts in the questions, which emphasizes the grammar study.
Value Trace Problem (VTP) asks to answer the values of important variables and output messages in the source code, which emphasizes the code reading study.
Code Modification Problem (CMP) asks to modify the source code to satisfy the new specifications, which emphasizes code debugging study.
Element Fill-in-blank Problem (EFP) asks to fill in the blank elements in the source code with the original words, which emphasizes the partial code writing study.
Code Writing Problem (CWP) asks to write the source code that can pass the test code from scratch, which emphasizes the code writing study.

Along this learning path in PLAS, first, students will grasp the various keywords of the programming language used in the source code GUP. Second, they will understand the behaviors of the source code with VTP. Third, they will study how to debug and modify the source code with CMP. Fourth, they will study how to complete the source code with EFP. Finally, they will study how to write the source code from scratch with CWP.

4.2. Overview CMP

A CMP instance consists of a Dart source code and a set of screenshots for mobile application pages. Among them, the initial screenshot displays the application page created by the Dart source code. The second screenshot depicts the page created by the source code modified by a student. These pages may have differences in parameters, widgets, functions, methods, properties, or variables. Challenges for the student are to carefully analyze source code and determine necessary modifications by comparing the original screenshots and the modified screenshots.

The elements targeted for modifications in the CMP include parameters such as color, size, positioning, and alignment, because they directly impact the visual layout of the mobile application. Ensuring these elements have only one correct modifications, which guarantees that the answer remains unique. Moreover, modifying them is highly beneficial in learning Flutter/Dart programming as it deepens students’ understanding of widget properties and layout management. This hands-on approach reinforces key Flutter/Dart programming concepts and helps students grasp the principles of UI designs and widget behaviors.

The correctness of any answer from a student is checked by matching string with the registered correct answer. The system employs two types of matching:

Exact matching with spaces/tabs: This compares the hashed value of the student’s answer, including spaces and tabs, with the correct answer’s hash.
Matching without spaces/tabs: This compares the hashed value of the answer after removing any extra space or tab, ensuring that minor formatting issues do not affect the correctness.

In the CMP, we follow the requirement to create any problem code line that has only one correct modification. When a student modifies the problem source code, the correctness of his/her answer is checked through string matching by the JavaScript program at the web interface, while avoiding missing any correct answer nor allowing any incorrect one.

4.3. Modification Code Selections for CMP Instance

A source code in cross-platform mobile programming is composed of widgets and methods that define the structure and behaviors of the application. Thus, the following elements in a source code can be selected for modifications in a CMP instance:

It is noted that Flutter forms an interface by taking the concept of a widget tree. This means that each widget represents a class that has the key properties aiding the development of the interface. Therefore, the modifications in a CMP instance may include changes in shape, color, alignment, text content, shadow effects, and borders of widgets. To learn the effective use of widgets, students will frequently make modifications to data types, variables, conditional statements, functions, and classes. This hands-on approach helps students understand the interactive aspects of Flutter and Dart programming, thus enabling them to create cross-platform mobile applications.

4.4. CMP Generation Procedure

A CMP instance can be generated through the following procedure:

Prepare a source code containing the Flutter/Dart topics to be studied in this instance, such as widgets, classes, and methods.
Execute this source code and take the screenshots of the generated application pages.
Select the parts to be modified in this (original) source code as the questions to be answered by students.
Make the the modified source code by changing the selected parts. It is noted that currently, these steps are carried out manually, which will be automated in future studies.
Execute the modified source code and take the screenshots of the application pages.
Save the original source code and the modified source code in one text file. This text file is used as the input file to the interface generation program [15].
Execute the interface generation program with the input text file to generate the CMP instance files including HTML, CSS, and JavaScript for the answer interface on a web browser.
Add the screenshots in the generated files, since they are not included automatically, which will also be automated in future studies.

4.5. Example of Generating CMP Instance

Here, we discuss an example of a new CMP instance generation.

4.5.1. Original Source Code

Basically, in this paper, we selected a source code that covers basic topics or multimedia and storage topics to generate a new CMP instance. For this example, the source code in Listing 1 is selected as the original source code that covers the topic of inserting an image into an application. It is used in the CMP instance with ID = 3 for basic topics.

Listing 1 CMP original source code.

4.5.2. Original Result

The results of the original source code for CMP basic topic instance ID = 3 in Figure 4 show the application that was created using source code in Listing 1. This application is offered as a reference for understanding the source code.

4.5.3. Modified Source Code

The original source code can be converted to the modified source code by changing a few parameters and functions. It is important for students to understand the connections among widget classes, parameters, and properties when creating the application. Listing 2 displays the modified source code as the correct answer. In this instance, it is necessary to change the value of the scale parameter for the image and the value of the alignment parameter for the text content and to adjust the appbar content by changing the title and centering it.

Listing 2 CMP modified source code.

4.5.4. Modified Result

Figure 5 shows the results of the application page from the source code that students modified.

4.6. Answer Interface for CMP

The answer interface for resolving this CMP instance in Figure 6 highlights the input form in red if the answer is incorrect. If it is correct, it keeps the white background. Students can continue submitting answers until they become correct. The answer interface automatically records the number of submissions and the answers for each attempt.

4.7. Student Workflow for Solution Submission

Figure 7 outlines the workflow of modifying and submitting a solution to a CMP instance. First, a student reads the instruction and sees the initial web page by the given source code. Second, he/she directly modifies the source code in the interface. Third, he/she can download the current source code into a text file by clicking the “File Save” button, and run it on a web browser to see the output web page if necessary. Fourth, he/she submits the source code by clicking the “Answer” button.

Since direct testing of the modified source code within the system is not available, we provide a feature that allows a student to download the modified code into a text file and run it on a web browser. It enables him/her to review the current answer and ensure its alignment with the required page before its submission. Additionally, we offer the function for downloading all the necessary packages and dependencies in a zip file, allowing the student to run any modified code locally in an IDE.

5. Evaluation

In this section, we evaluate the code modification problem for Flutter/Dart programming in PLAS.

5.1. CMP Instances

For this evaluation, we generated 20 CMP instances for basic topics in Table 2 and 18 CMP instances for multimedia and storage topics in Table 3 in Flutter/Dart cross-platform mobile application programming. These tables show the topic or widget, the number of lines in the source code, and the number of elements to be modified. The two sets of CMP instances were designed with the consideration of ensuring that novice students can solve them on a self-study basis.

5.2. Assignment to Students

Then, we assigned these instances to 21 first-year master students at Okayama University in Japan who have not formally studied Flutter/Dart programming. Before the assignments, we did not conduct any lectures on them. Instead, we provided references and websites that can be helpful in solving the CMP instances. The students spent two class hours solving the 38 CMP instances, where one class hour has 100 min. They could continue solving them for one more week at home if necessary.

5.3. Solution Results for Basic Topics

First, we discuss the solution results for basic topics.

5.3.1. Results of Individual Students

In the beginning, we see the solution results for the individual students. Table 4 shows the number of answer submission times and the correct answer rate (%) for each of the 21 students among the 20 CMP instances for basic topics.

Distribution of Correct Answer Rate

Table 5 shows the distribution of the correct answer rates. Five students achieved the perfect score (100%), and 11 students did the score above

90 %

. On the other hand, only five students did the score bellow

90 %

. The results indicate that the generated CMP instances can be solved by novice students on a self-study basis. Thus, the proposed PLAS with CMP for basic topics is proper for independent learning of the Flutter/Dart cross-platform mobile programming by novice students.

Distribution of Answer Submission Times

Table 6 shows the number of answer submission times by the students to finalize their answer. The average number of submission times to solve the 20 CMP instances for basics topics is

186.85

. Generally, the students could solve one instance by submitting answers

9.34

times on average, which suggests that the students carefully reviewed their answers before submissions.

5.3.2. Results of Individual Instances

Then, we discuss the solution results for the individual instances. Table 7 shows the average correct answer rate and the average number of answer submission times among the 21 students for each of the 20 CMP instances. This table suggest that the difficulty varied across the instances, where the lowest rate is

96.90 %

for ID = 11 and the highest rate is

99.67 %

for ID = 1. Similarly, the number of answer submission times required varied, where the lowest one is

3.72

for ID = 10 and the highest one is

18.74

for ID = 7.

5.4. Solution Results for Multimedia and Storage Topics

Next, we discuss the solution results of 17 students for 18 CMP instances for multimedia and storage topics. Unfortunately, four students did not solve them.

5.4.1. Results of Individual Students

In the beginning, we see solution results for the individual students. Table 8 shows the number of answer submission times and correct answer rate (%) for each of the 17 students among the 18 CMP instances for multimedia and storage topics.

5.4.2. Distribution of Correct Answer Rate

Table 9 shows the distribution of the correct answer rates. One student achieved the perfect score (

100 %

), and 10 students received a score above

90 %

. On the other hand, six students did not reach a score of

90 %

. The results indicate that the generated CMP instances can be solved by most novice students on self-study basis. Thus, the PLAS with CMP for multimedia and storage topics is also proper.

5.4.3. Distribution of Answer Submissions Times

Table 10 shows the number of answer submission times by the students to finalize their answers. The average number of submission times to solve the 18 CMP instances for multimedia and storage topics is

221.59

. The students solved one instance by submitting answers

12.31

times on average.

5.4.4. Results of Individual Instances

Then, we discuss the solution results for individual instances. Table 11 shows the average correct answer rate and the average number of answer submission times among the 17 students for each of the 18 CMP instances. It is noted that some students did not have enough time to complete the CMP instances for multimedia and storage topics. This table suggests that the difficulty is varied across the instances, where the lowest rate is

96.73 %

for ID = 6 and the highest is

99.39 %

for ID = 18. Similarly, the number of answer submission times is varied, where the lowest one is

5.18

for ID = 18 and the highest one is

38.94

for ID = 1.

5.5. Discussions

Understanding the challenges faced by novice students is crucial for improving educational approaches in mobile programming. Several studies have highlighted the significant challenges novice students face when working on mobile programming tasks. These difficulties often arise from the need to integrate platform-specific knowledge with foundational programming skills, along with the high cognitive demands of mobile application development [16,17]. This is consistent with our observations in the proposed learning system.

Building on these insights, we analyzed the frequent mistakes of students from their solution results.

5.5.1. Mistakes in Basic Topics

In the 20 CMP instances for basic topics, ID = 3, 5, 6, and 11 contain classes that require properties to be applied. Properties are variables defined in the class. Students struggled with properties such as aligning, font weight, and font style.

ID = 7 requires the addition of the .toString() method, which is used to convert any data type into String. However, students often struggled to understand how to use this method. To help students understand how to use it, a debugging exercise can be useful by showing the output of the method, which will be in future works.

ID = 11 contains an element that requests the use of List in the program. Although List functions similarly to Array in other programming languages, students are unsure how to use it in Flutter/Dart. To improve their understanding, it can be useful to provide the problems for understanding collection data types such as lists, maps, sets, and enums, combined with data structures on Dart with their use in Flutter.

5.5.2. Mistakes in Multimedia and Storage Topics

Next, we analyzed the frequent mistakes of students from their solution results in multimedia and storage topics.

In ID = 1, 7, 9, 11, 13, and 15, certain elements can be modified based on the given instructions or by referring to the provided screenshots. This often involves changing the color of the elements, despite providing instructions and being able to see it in the screenshots. Students are required to read and comprehend these modifications. Thus, the instruction can be improved for better understanding.

In ID = 3, 5, and 6, there is an element that requires the use of ternary conditional operators. Students did not understand how to utilize this operator.

In ID = 16, 17, and 18, there is an element that requires the use of the provided Maps. The Maps type in Flutter is similar to the dictionary type in other programming languages. Students often struggle with how to utilize them in Flutter. To help students understand them, additional problems on collection data types combined with data structure and ternary conditional operators in Dart should be provided with guidance, which will be carried out in future works.

5.5.3. Comparing of Learning Platforms

Compared with other platforms such as the mobile-based application developed by Al-Hakim et al. [9], cross-platform solution presented by Yassine et al. [12], and the blended learning approach discussed by Hu et al. [13], our approach focuses on enhancing problem-solving skills through code modification problems. While these platforms provide structured learning experiences or integrate various learning methods. Our system offers a distinct method by inviting students to modify code, which helps students practice their observation and problem-solving abilities in a controlled environment. This method supports students in developing their coding skills by engaging them in practical coding challenges where they need to understand and adjust code to meet specific interface requirements.

Our findings align with previous research indicating that students benefit from engaging in problem-solving activities [10,11]. By focusing on coding modification tasks that require students to analyze and adapt code based on interface observations, our system supports the idea that engaging students in practical, hands-on activities can improve their comprehension and retention of programming concepts. This approach aligns with the view that active involvement in solving coding problems enhances learning outcomes compared with more passive methods.

5.6. Feedback

After solving the CMP instances, the students gave the following opinions as feedback:

The screenshots are unclear, and certain text and word styles are difficult to see.
The instructions are challenging to read.
Some problems are quite tricky.
The transition from basic topics to multimedia and storage topics makes a significant difference.
The hint button is useful if available.

To support independent learning by the proposal, we will address these problems in our future works.

5.7. Limitations

While this study provides valuable insights, several limitations should be considered. First, the sample size of 21 novice students from a single university may limit the generalizability of the findings. This participant pool may also introduce the subject selection bias, since students from different backgrounds or institutions may produce varied results. Although 38 CMP instances were developed to ensure the thorough coverage of fundamental concepts of Flutter/Dart programming, some advanced topics still need to be implemented. Besides, the current system allows the modifications of the parameters such as color, size, position, and alignment to avoid the issues related to string matching at the answer verification. As the next step, this limitation should be alleviated to allow modifications of functions or classes. Further integration across various educational contexts will be necessary in future works or studies.

5.8. Implications

This study has several implications for both researchers and practitioners in education technology and mobile application programming learning. For researchers, the findings will provide a foundation for further investigations of adaptive learning systems that automatically adjust the problem difficulty based on student performances. For practitioners, and particularly for educators, this system will serve as a practical tool to support independent learning and supplement classroom teaching of Flutter/Dart programming. It offers an interactive method to enhance student engagement. Integrating this system into both formal and informal learning environments could offer students a more flexible and self-paced way to develop their programming skills.

Source link

Safira Adine Kinari www.mdpi.com

Greenberg News

An Independent Learning System for Flutter Cross-Platform Mobile Programming with Code Modification Problems

1. Introduction

2. Literature Review