This article is a re-post from my original post on Medium.
I've just submitted Steady Calendar, a minimalist habit tracker app, on the Google Play Store, design by my wife Irina and developed in short order by yours truly in the little free time I have being a new father. The app was a port from iOS to Flutter. After speaking about the experience (slides) at last week’s Flutter Camp, organized by @flutterfyi, I've decided to boil my talk down to something more meaty for everyone and make it a prelude to what an upcoming Flutter course, Practical Flutter, will be all about.
Well, after writing this app, with little free time yet without cutting really too many corners, I wasted a lot of time with distractions on what I thought I had to learn about Flutter, which in the end wasn't very useful and was sort of time lost.
So with that said, here’s some advice for newcomers to Flutter.
- Keep it Simple When Getting Started with Widgets Flutter heavily uses Material Design widgets in examples and throughout most of its library. If you want to quickly get a UI together or have no time to write an app for Android and iOS, stick to Material Design.
Yet the problem with Material Design is it may alienate your iOS users unless customized properly. Google has been recently making efforts to make its library more flexible and show how adaptable it is, encouraging developers to break out of boring, repetitive UIs that all just look like Google Docs.
Flutter does offer “Cupertino” iOS style widgets yet this comes at the cost of needing to do some heavily code splitting, since these widgets require other parent widgets to work properly. Plus, Google isn’t heavily focused on offering a full blown comprehensive set of iOS widgets, after speaking with one of it’s employees at a recent event.
In my next app, I will be customizing Material Design heavily to match design needs yet here are some of the widget you may want to learn for now to stay flexible and get the most out of your time:
Scaffold and an AppBar (container for a screen and nav bar, respectively)
Layouts, with Column, Row
Container (ability to set ‘padding’, ‘decoration’, etc)
Text
AssetImage (NetworkImage as a bonus)
RaisedButton (forgot icons for now)
- Forget Learning Dart From Day One Flutter uses Dart, a language that is very easy to pickup, even for folks new to software development. Yet getting an app running and rendering some simple UI does not at all require any Dart knowledge.
After you’re comfortable with learning the basics of layouts, getting some content on the screen, then take an entirely separate day to read up on Dart. After that, you’ll be ready to learn things like handling events (i.e. tapping a button) and maybe even fetching data from an API, depending on your experience level.
- Stick to Stateless Widgets For Now
‘StatelessWidget’ is the default class any Widget will extend in Flutter. As the name implies they are for rendering widgets that will not need to hold any state.
In terms of it’s counterpart, ‘StatefullWidget’, Flutter’s documentation presents this by showing how to say, handle an event and change some information that’s on a screen. If you’re a newcomer to programming or even a junior developer, learning this in the beginning is by no means required. I say this because in the beginning of learning anything, motivation is the key to keep going and your primary focus should be getting comfortable with rendering a nice looking screen with some content.
- Establish Some “Motivation Milestones”
Again, when learning anything, hitting some important milestones is key to staying motivated. Here are some of my recommended learning milestones:
Milestone One: Be able to develop a screen with a simple layout, text, a non-working button, and an image.
Milestone Two: Be able to run your app on your actual phone. This is very cool and really motivating.
Milestone Three: Learn how to hook up a button, change some state and render it on the screen by using a StatefulWidget.
Milestone Four: Take a few hours to read up on Dart (this step can even come before the previous milestone if you’d like).
Milestone Five: Be able to fetch some data from a public API (examples) and render it on the screen. Understand how to work with JSON and deserializing it.
Milestone Six: Release an actual iOS and/or Android build to a friend. This will surprise you but I really believe in doing this early, unless you’re still evaluating to see if Flutter is right for you. Showing an app you wrote, even if it’s not at all useful, to friends and family and sending it out to a test user via iTunesConnect or the Google Play Store (easier) and doing this early on is the really an amazing way to stay motivated and confident that you can crank out an app to the public one day.
- Learn How to Get Help
Get used to going to the Flutter Google Group if you can’t find an answer to a problem on Stack Overflow. I recommend the former over Stack Overflow when asking questions actually. You can read more advice here.
Try to find a few mentors that can help you as well. You’ll find the Flutter community is wonderfully engaged and passionate.
- Share Your Work
I’ve found that Twitter is a great way to share what you’ve done. Even if it’s something simple, simply posting a screenshot of your app and mentioning @flutterio is really motivating.
Final Thoughts on Learning
Overall, in terms of learning resources out there, there’s a lot available yet I’ve found that there isn’t enough real, end to end, battle tested tutorials on Flutter out there. Sure there’s your Google-produced YouTube videos and Udacity courses and these are great, yet a lot of the time they cover 1/5th of what you’ll need to learn to get a real app into the app store(s). I say this because after writing a port from iOS to Flutter for a simple app I wrote, Steady Calendar, recently, I found that things like working with JSON, APIs, manging multiple build environments, localization, caching, code organization, state management, tweaking Material Design for really custom UIs, etc took some digging.
So with that, I plan to release a beta Flutter course which will take my experiences learning Flutter and boil it down to practical, more “end to end” type tutorials which will focus on Flutter and all the other know-how it may take to write a real app.
If you’d like to sign up to get notified when I release the first lesson in July ’18, sign up here: Practical Flutter.
Happy Fluttering.
Top comments (3)
hanks for the tips. Easy to understand. Great to learn before diving deep into flutter development. However, I do suggest to section out the article with headings. It's kind of hard to read. Feels congested. But, great article indeed. If you decide to dive into depth of flutter, you should definitely check out some amazing and powerful flutter templates using which we can create just about any kind of application.
Great article there! I kinda want to have your passion to flutter as well. I started learning from stateless to stateful widgets in flutter, but somehow in some aspects like state management.Is it true that we want to lessen the "stateful" class even though some of the widgets don't really change its state? I really want to hear words from the hardworkers. I also watched the reactive programming for flutter in google i/o 2018. It's just that I need to further read and understand the documentation. This will also be my milestone about the state management(Redux,Streams,InheritedWidget,ScopedModel/ScopedModelDescendant). setState was a common for beginners. but I rarely use it when nothing complex is in my code.
I am not familiar with any other Javascript Mobile Frameworks like React Native. But Flutter was my first and will be last in mobile development. I went to react native but gave me hard time to deal with..
Hey there Vince! My apologies for the late reply.
Note that if one uses something like ScopedModel, one naturally uses more Stateless widgets because there's simply no need. Overall though, StatefulWidget is very much frequently used in general, just not as heavily.
RN has a high learning curve so I'd personally only get into RN if you're interested in easily finding a job or contract work. IMO investing in Flutter is a good bet long term.
Feel free to stay in touch on Twitter if you want to hear my updates! twitter.com/seenickcode
If you want to get notified when my course launches in late July ’18, click here too mailchi.mp/5a27b9f78aee/practical-...