Efficient self-study Notes on Flutter (II)

Why learn Flutter

Just learn. There’s no such nonsense.

Get Started

English: flutterchina. Club/get – started… English: flutter. Dev/docs/get – st…

The introductory tutorial is very high quality, almost unobstructed, and covers VSCode and Android Studio.

I chose Android Studio, of course, because I have too much desktop power 🙂

If the performance is not good, you can choose VSCode.

Note: You may find that the network is not very smooth while watching the tutorial, then you can set the Chinese mirror:

set PUB_HOSTED_URL=https://pub.flutter-io.cn
setFLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn orexport PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Copy the code

You can also use Privoxy + SS to set up agents for Android Studio.

If you can’t climb the wall, you don’t have to learn to code.

As you can see, the Chinese and English tutorials are not quite the same. The English tutorial only has 4 steps, leaving the other steps in Part 2; The Chinese course is just 7 steps without Part 2.

In fact, directly look at the English tutorial code is good, the code around the nonsense need not see too fine.

Get started with a typescript-based front end, and learn TS or Basic Dart syntax if you don’t.

To learn more

After you finish the Get Started tutorial, there is a list of tutorials. (The Chinese document has less list content than the English document)

  • Building layouts in Flutter tutorial
  • Add interactivity tutorial
  • Introduction to widgets
  • Flutter for Android developers
  • Flutter for React Native developers
  • Flutter for web developers
  • Flutter’s Youtube channel
  • Build Native Mobile Apps with Flutter (a free Udacity course)
  • Flutter cookbook
  • From Java to Dart codelab
  • Bootstrap into Dart: learn more about the language

Let me see what works.

  1. The first tutorial taught me how to use Layout. I went in and scanned the Layout controls.
  2. The second tutorial teaches me how to use setState to change the state of various components, going a little further than Get Started.
  3. The third tutorial teaches me the complete use of a component that needs to be looked at.
  4. The fourth tutorial is for Android developers, mapping concepts familiar to Android developers into Flutter is not for me.
  5. The fifth tutorial is for React Native developers, not for me.
  6. The sixth tutorial is for Web developers and is for me. Go inside and have a look.
    1. How do you set styles
    2. How to position, transform, add gradient, add rounded corners, add shadows
    3. How do you manipulate text
    4. Is there something wrong about Web developers that the people who write these tutorials have that I don’t want to see
    5. Maybe I should read the tutorial for React Native developers
  7. The seventh tutorial is the official Youtube channel, which has more than 30 Videos in English.
  8. The eighth tutorial is Udacity’s free course. Check it out
    1. The video is in English with Chinese subtitles
    2. The tutorial is divided into two parts, the first part can be done by looking at the first tutorial and the second part can be done by looking at the sixth tutorial
    3. I’m not going to watch this free eight-hour course.
  9. The ninth tutorial, the Cookbook, presents the core concepts in alphabetical order. Obviously this is only for dictionary use, not for reading.
  10. Dart syntax tutorial # 10 is about Dart syntax. If you’re not familiar with Dart, read this tutorial. But it assumes that you’ve learned Java.
    • There is a tool called DartPad that you can use to practice Dart in real time.
  11. Tutorial 11 is an index to the complete Dart tutorial, and it’s quite extensive. Let’s see.

After scanning these links, I am going to watch the third tutorial first and then try to make a Demo myself. If I encounter Flutter problems, I will look at the tutorial.

To be continued…