What is Flutter Create？
It is a competition of the app created using Flutter.
Below, Look back on Create
Determine the axis of the idea
The main point
- Total source code is less than 5120 B
- It is a contest of Flutter
Below, Organize
The main point
- Total source code is less than 5120 B
-> Small app
-> Limit to return one response to one action - It is a contest of Flutter
-> Let’s make it without any plug-in
My theme is “Limit to return one response to one action” and “Let’s make it without any plug-in”.
Below, Candidate for idea
- An educational system that opens monsters-like doors.
- A mysterious system whose shape or color changes by tapping on geometrical figures.
- A series of games that will make time attacks.
- Picture book system using many images.
- Simple system like tutorial app.
This time, we focused on the characteristics of Flutter and decided on an idea “Simple system like a tutorial app”.
Materialize the idea
Tutorial app elements
- The user takes action and the change is easy to understand on the app
- Easy to follow changes in code state, easy to read code
- It is fun to use
- Simple layout
Below, Organize
Tutorial app elements
- The user takes action and the change is easy to understand on the app
-> Character change < Shape change =< Color change - Easy to follow changes in code state, easy to read code
- It is fun to use
-> Game-like apps - Simple layout
“Color change” and “Game-like apps” is an important factor.
Below, Final idea decided
Color Matching game
- When you launch the app, the theme color and the maximum color of the hint will be displayed.
- Set the red, green and blue buttons in 3 steps so that they have the same color as your theme color.
- You can check the result with “SHOW RESULT” button.
- Even if the result is displayed, you can change the color by pressing the red, green and blue buttons.
- You can go to the next theme color with the “NEXT COLOR” button.
I realized “Color change” and “Game-like apps”.
Adjust the design
This time I wanted to bring the characteristics of Flutter to the front, and I decided only simple rules because this is a simple application with few elements.
Below, Rules
- Central alignment
- Text size does not change
- Button size does not change
- 10 between each part
- Three buttons line up horizontally
I realized “Simple layout”.
Adjust the code
Set the rules again here.
- Intuitive understanding of variable names and function names
- For the readability of beginners, commonality is minimal and does not increase branching
- Branch and iteration also use basic if and for in preference
- State management variables are distinguished by prefixing “_”
It became as follows as a result in relation of “Total source code is less than 5120 B” of the rule of the contest.
- Intuitive understanding of variable names and function names
_red -> _r
_green -> _g
_blue -> _b
_answer -> _ans - For the readability of beginners, commonality is minimal and does not increase branching
- Branch and iteration also use basic if and for in preference
-> I used many ternary operators. - State management variables are distinguished by prefixing “_”
As a result, it is not the best code.
However, I was satisfied because the goal of not compressing the source code was achieved.
I realized all.
The time it took to create this app was 90 minutes, from idea to implementation.
To Close
This time, the submitted app is released at the store, so please install and play it.
App can be made with 5000B! Please realize that.
Also, if you like it, I would like a review.
Source code
