Flutter is undoubtedly the hottest technology direction this year. As one of the first developers to get into Flutter, I have gone through various stages from being unable to get started, to being frustrated by various honey widgets after a brief understanding of Flutter, to now being able to establish the overall knowledge structure of Flutter. The whole process is actually quite painful because of the design idea of Flutter — everything is a component. This is a good idea, but there are so many widgets that the developers get bogged down in building up their knowledge of Flutter.
In my group of Flutter practitioners, there are often many novices seeking the introduction to Flutter. Although the official documentation of Flutter is very well documented and there are many Flutter demos in the community, however, with all due respect, There is basically no good way to help developers build their knowledge structure of Flutter. Today, I will analyze what kind of Demo a beginner of Flutter practitioners needs.
What is a good Demo
Demo is defined as a demonstration of a product or technique on wiki. A Demo is a demonstration of a technology or product. A Demo is the first channel for beginners or first-time users to learn about a product or technology. Just like the first impressions you make when you meet someone, a Demo will largely determine how good or bad a product’s promotion and publicity will be.
So what are the characteristics of a good Demo?
First of all, a good Demo needs to demonstrate the details of the use of this technology and how to use it clearly. What should be noted here is that it is a demonstration and the function of this technology is shown. This is the core of the Demo, so its first characteristic is that it is demonstrative.
Second, the beginner is to learn how to use this technology by the Demo, so the Demo code must be concise, and easy to understand, this is very important, for a new technology, beginners are difficult to grasp the whole picture of this door technology quickly, this leads to when we watch the Demo, it is hard to stand in a global perspective, so when the code is very complicated, It’s hard to understand what it means.
This just like we usually write code, for different types of code, need to write the code of different style, for example, for frequent changing business code, if at the time of design to use a variety of design patterns, all kinds of abstract, inheritance, it looks as if the code written very specs, but once this architecture can meet the expanding business, will turn into a nightmare. Taking over someone else’s code is the worst of nightmares, so for this type of code, developers need to write “code that can be easily modified” rather than showy code. On the other hand, for example, when writing an SDK with relatively concentrated functions and relatively stable business needs, it is necessary to write “well-structured code”. In the SDK, developers can use appropriate design patterns to optimize the architecture of the project and increase the scalability and stability of the SDK.
For Demo, we need the first kind of code, namely [super simple code], in addition to some necessary tool classes or general methods, Demo Demo code involving knowledge should not do any abstraction, directly use the most basic API calls to write, although such code will produce some redundancy, However, it greatly increases the readability and learnability of the code, which is the meaning of learning Demo code, and another feature of Demo — the code is concise and easy to understand.
Second, a Demo, like a human, is always better liked when it looks good. Although only a demo program, but at least, to be able to see the past, not a few random buttons, uneven arrangement, all kinds of obvious bugs.
Above, we summarize the characteristics of a good Demo:
- Good presentation
- Plain and simple code
- Nice interface design
Although these things look simple, but really want to do well, in fact, is also very difficult.
Not so good demos
As a former Flutter beginner, I have seen many Flutter demos in the community. Here are some that I know of to show you if they are good ones. Of course, all comments are based on the above features and are not directed at any developer.
The screenshots below are from some of the demos I’ve seen.
These pictures illustrate the use of some of the widgets in Flutter, but after reading them I felt confused and didn’t know what they meant, which didn’t show the effect of the demo at all.
Look at the next few pictures.
And these.
Although a simple demo program, but at least, or design… At least the text has to be aligned, right?
Take a look at the next slide.
This is the code in Google Sample, you may not know what it is, but you taste it, you taste it, this is all code… Yes, the code shown in the Demo is actually put together in lines like this, and this is really the first time I’ve seen such a simple and crude method.
There are many official Demo projects available in the Flutter SDK, all of which are practical. However, I do not recommend this for beginners, mainly because it is a very simple Demo that Google can write very complex. It’s fair to say that Google developers have a very strong code base, but that’s too insensitive for beginners.
I want to make a good Demo
So here it comes:
https://github.com/xuyisheng/flutter_dojo
Do you want to know why I think this is a good Demo? It is all written in the Readme. Please click on the link to read it and hopefully it will help all Flutter developers.
Welcome to follow my wechat public account — Android QunYingchuan