Since I started my career, I have often struggled with the way I was taught in the exam-oriented education stage – can I only learn by copying 100% of the contents of a book into my brain? Is it perfect to spend a lot of time memorizing knowledge that is not used or not commonly used?

The introduction to Flutter documentation has inspired me a lot. It does not directly show the API documentation or the entire framework to the beginner. Instead, it shows the core idea of Flutter through a simple counter example, from basic components to gesture monitoring and state changes.

I’ve seen a lot of beginners who like to read the how-to documentation, API documentation, and instructional videos word for word, but never open the editor so much as to write Hello World.

I think efficient learning methods, learning to master the basic knowledge of proper can start, through the operation to in-depth study, by playing, in the process found themselves do not understand, through access to data, do not understand the knowledge, the final will be knowledge extracted from the brain and to the way other people can understand the professor to others.

Why a calculator?

  • Layout classic, you can learn to use the most important widgets and quickly master common layout, such as Container, ListView, Row, Column, Expanded, FractionallySizedBox, etc.
  • Easy to use, use the most common layout attributes, such as padding, color, style, decoration, alignment, etc.
  • Have input, can learn to capture gestures and data flow between components.
  • Dart basic data types, such as String, List, int, double, num, bool, etc.
  • With output, you can learn when to use the StatelessWidget and StatefulWidget.
  • Do not rely on the UI, do not rely on the interface, successfully run Hello World can be developed immediately, do not try to perfect from the beginning, because it will stop you from taking action, realize that “start” is far more important than “do”.

How to develop?

1. [general] Observe the layout, start from the overall situation.

2. 【分】 Break down the components one by one.

Components can be split according to the business logic or the same layout. Here, the author chooses to split according to the same layout, because the business logic is not complex and the layout can be reused in more places. The NumberButton and NumberButtonGroup components are shown as examples:

3. [General] Integrate components and clarify logic.

Once you’ve implemented each of the components, it’s back to the overall calculator logic: how do you do input -> processing -> output?

The last

In fact, this is my first complete Flutter App. Although I have developed dozens of Android apps and wechat mini apps, I have not been so excited after completing a project for a long time. I get back the feeling of studying hard for knowledge in my school days. After refining my own learning methods and putting them into action, the results are incredible.

The project address