Saturday, March 21, 2020

Learning Flutter - Part 2 - Configuring and Designing a Prototype

In my last post, I went over the start of my Flutter learning journey.

Since then, I've installed the Flutter SDK and VS Code, watched the tutorials over at fluttercrashcourse.com and started into a Udemy course on Flutter.

A few initial thoughts on the language are that first it has annoying layers of braces and brackets ({}{[[},,]]) but if you can get past that, it is a C-like language so isn't too difficult to get started with. On the Flutter SDK, the hot reload feature is useful when it works and the tools in VS Code in terms of formatting and looking up definitions of functions are quite useful.

Learning a mobile app is best demonstrated by actually building an app and one of the first things in building an app is to draw it out on paper. What is below is a very rough drawing (that was a collaboration with my 7 year old). The point is not to make it pretty but to quickly sketch out the most basic design.




Deciding what is enough for the MVP (Minimum Viable Product) and for a prototype is also key. For this app (a tool to show the cost - financial and carbon cost - of driving), the prototype would need to calculate costs based on distance travelled as measured by GPS. The prototype will not to allow for any parameters (type of car, metric/imperial, saving, manual override, etc.) but will just provide the basic functionality of providing a cost for an 'average' car.

With that, the next step is to create a mock-up in the app of what it will look like. It's not too difficult to make something that doesn't look too bad (running on a simulator of an iPhone 8 below):


Going forward, the mock-up will need to be made updatable (it is static now), figuring out how to pull data in from the GPS to calculate distance travelled, then setting some parameters (hard coded at first) to calculate cost, finally to update them real-time when the app opens. At that point, the app will be usable (though not useful). 








Sunday, March 1, 2020

Learning Flutter - Part 1 - Gathering Learning Resources

In my previous post I outlined my plan to learn Flutter (and Dart).

In preparing to get started, I've been looking into various learning resources.

The Flutter Website is a great place to start. The documentation if pretty good and there is both a language tour and a style guide that are useful to peruse:
https://flutter.dev/
https://flutter.dev/docs/
- Language Tour: https://dart.dev/guides/language/language-tour
- Dart Style Guide: https://dart.dev/guides/language/effective-dart/style
- Flutter Install Guide for Mac: https://flutter.dev/docs/get-started/install/macos

Google also has some Code Labs to help learn Flutter - I've not tried these but have taken a quick look and may do so as I start my hands-on learning:
Google Code Labs: https://codelabs.developers.google.com/?cat=Flutter

Youtube also has some decent Flutter materials. I'm well into the first one and may look through the other ones. As is my habit, I've been watching on the train to work:
- Flutter Full Tutorial for Beginners (freeCodeCamp.org and his website https://fluttercrashcourse.com): https://youtu.be/pTJJsmejUOQ
- 44 Short Flutter Videos: https://www.youtube.com/playlist?list=PLUbFnGajtZlX9ubiLzYz_cw92esraiIBi
- 35 Short Flutter Tutorial Videos: https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ
- Dart Programming Tutorial (1 hr 40 min): https://www.youtube.com/watch?v=Ej_Pcr4uC2Q
- Crash Course on Flutter (5 hrs 44 min start of an Academind course): https://youtu.be/x0uinJvhNxI

There are a few Medium pages with text intros/posts/articles that seem worthwhile along with some Example Sites with working code. I've only taken a brief look but these look like very useful resources for learning more advanced concepts and understanding what Flutter can do
- GetHub Awesome Flutter examples: https://github.com/Solido/awesome-flutter
- "Flutter Awesome" Website: https://flutterawesome.com
- List of apps built in Flutter: https://itsallwidgets.com 
- Medium Flutter Landing Page https://medium.com/flutter
- Another Medium Flutter Landing Page https://medium.com/flutter-community

Rounding out the learning materials are a Flutter Book (with Kindle download available free) and a Tutorials Site. I've downloaded the book but have not started reading it. I've looked at some of the tutorials briefly but have not tried any of them.
- Flutter Succinctly Book: https://www.syncfusion.com/ebooks/flutter-succinctly
- Flutter Tutorials Handbook (several small tutorials): https://kodestat.gitbook.io/flutter/

My likely approach will be to build and learn in parallel. What I mean by that is that I'll continue to tackle the above in parallel with starting into actually building an app. I'll definitely go down some blind alleys and develop some code that's not great but by building in parallel I'll be able to apply learnings immediately which will be better both for my learning and for my building. 

If there are any great Flutter (or Dart) resources you think I've missed in the list above please let me know. Now onto some more Flutter learning!