Pooja Bhaumik

Translator: UC International research and development Jothy


Welcome to the “UC International Technology” public account, we will provide you with the client, server, algorithm, testing, data, front-end and other related high-quality technical articles, not limited to original and translation.


Since I talked about Flutter at DevFest 2018, I’ve received at least five messages about Flutter every day on Linkedin, with four people asking this famous question:


How do I start learning Flutter? Please help me.


After a while, I found it tiring to make the same reply. Therefore, I decided to write this article.




Pooja’s Flutterverse guide

Many articles on the web or the GitHub repository have many learning resources, and I will also include links to some of them. But this article will be different. I want to hold your hand, lead you step by step into the Flutterverse, and let you fly.

Um, excuse me? What is a Flutterverse?

The universe of Flutter! XD You are just getting through the baby phase and will pick up these terms soon.




A prerequisite for

If you fall into any of the following categories, you can start writing Flutter directly.


  • I have used the Dart language.

  • I have worked with object-oriented languages such as Java, C ++, and I am familiar with OOP concepts such as classes, objects, methods, inheritance, abstractions, and so on.

  • I ama mobile developer and have worked with Android/iOS Native/ React Native/Xamarin/Ionic or other mobile development frameworks.


People who don’t fall into any of these categories should start learning OOP concepts. This is very important for learning any framework. I do not recommend anyone skip OOP basics and learn Flutter directly. You may be able to overcome it, but your progress will be slow.




Dart Quickstart?

For many of you who might not have used or heard of Dart if it wasn’t for Flutter, let me tell you some good news. Dart is easy to learn. I learned it in a day or two. But I’ve had plenty of Android experience, so I’m naturally familiar with OOP and have plenty of experience with JavaScript. However, I also taught a Dart class at GDG BBSR’s Flutter Study Jam and most students learned the concepts very quickly.


So I’ve put together a complete list of concepts you must know before learning about Flutter, and I’ll share my Flutter Study Jam presentation (Dart section only) with you. I’m sure it will help you a lot.


Here’s the PPT: http://bit.ly/2r2F8Mo

Try out the concepts mentioned in every slide in this DartPad (starting with slide 5) and that’s all you need to know for now.

If you want to learn more, these resources can help you –


Video Address:


Intro to Dart for Java Developers

https://codelabs.developers.google.com/codelabs/from-java-to-dart/#0


Can we start Flutter now?

Sure, you can get ready for the next flight.




Basic steps and components

Here is a 3-minute introduction to installing and running the first Hello World application in Flutter. Thanks to Husayn Hakeem for your support.


3 minutes introduction:

https://medium.com/@husayn.hakeem/flutter-hello-world-d15032356c81


Now that you know how to run a simple application, let’s look at the basic components first. I think it’s important to experiment with the basic components because they are like the building blocks of the application.


Now delete everything in the Hello World application and copy and paste the following code.

>> Play with these components <<

For our Flutter Study Jam, I have this GitHub library for beginners:

https://github.com/PoojaB26/FlutterBasicWidgets

It contains the code for the basic widget and most of the properties that can be applied in that widget.

Fork the project and play with sample components is the best way to learn. Play around and remove a property to see how it changes the appearance of components in the emulator.

Or if you want to start from scratch, take a look at readme.md and write through each example to see what happens in the emulator.


For example, let’s start with the Text component.

Replace line 24 of the main.dart code above with the following code –

Look at the changes in the simulator. Now let’s add more properties to the component. (I basically add parameters, but I like to call them component properties)

or

Now go ahead and add more properties or do the same experiment with the rest of the components in readme.md

PS. Flutter supports Hot Reload, so you don’t have to “restart” the application for every change. Just press Ctrl + Backslash and it will reload the change in seconds.

Keep exploring, keep trying.




The best position to develop Flutter?

This method works every time. It can help you get familiar with Flutter easily and the process is very interesting.



Show you the Flutter UI challenge

The rules are simple. Find your favorite app UI design and implement it yourself in Flutter. There are some amazing designs on UpLabs and Dribbble. Pick a few and conquer them one by one. Crazy design in development is bliss. (Hey, maybe the back end people who don’t like design aren’t happy. I’m a design-first developer, so I care a lot about the look and feel of my app.)


Some of the people I know who regularly post UI challenges are Fluttery and Deven Joshi. I’m sure there are more out there, and if you know someone, please put their link in the comments.




Personal tips

It’s important to visualize design structures by looking at things, so I always break design into pieces. I previously wrote about “breaking the layout of rows and columns in Flutter”, which will definitely help you implement your design better. Good luck!


Article Address:

https://medium.com/flutter-community/breaking-layouts-in-rows-and-columns-in-flutter-8ea1ce4c1316




I want to learn more

Yes, of course. Other members of the Flutter community have many other resources. I’ve put up some links here for you to study.


MTechViral Flutter tutorial by Pawan Kumar


The Flutter Crash Course by Nick Manning

https://fluttercrashcourse.com/


>> More stuff <<


Dart by VoidRealms:


Raja Yogan’s Guide to Flutter


Stephen Grider’s Udemy course

https://www.udemy.com/dart-and-flutter-the-complete-developers-guide/


GeekyAnts flutterlearn.com


☑️ OK, now I am happy with Flutter ~


A: congratulations! Now that you’re happy with Flutter and looking forward to the next leg of your journey, the following resources will help you learn more about this awesome SDK.


The Google developers showed off the clickable playlist on YouTube:

https://www.youtube.com/user/GoogleDevelopers/playlists?sort=dd&view=50&shelf_id=66


List of my favorite Solido GitHub repositories:

https://github.com/Solido/awesome-flutter


The Flutter Weekly brief on Flutter news:


Collect my favorite articles/tutorials on Flutter:

https://github.com/PoojaB26/AwesomeFlutterPlaylist


If you’re on Twitter, follow Nilay Yener and Flutter for all about Flutter.


Of course, if you find me missing any awesome beginner tutorials or super important Flutter resources, please add them in the comments.


英文原文 :

https://medium.com/flutter-community/i-want-to-learn-flutter-how-to-start-ffb4145f9b26



Good article recommendation:

Rust 2018 Annual Survey Report



UC International Technology is committed to sharing high quality technical articles with you

Please follow our official account and share this article with your friends