Introduction
In my continuing pursuit of knowledge in development related things, one of the topics that I haven’t put much time on was mobile development. One of my interest is cross platform mobile development, I got to say that I found many ways to go about it, either developing web apps and bring them to the mobile ecosystem thanks frameworks like Ionic and React Native, using C# to develop cross platform and native applications with Xamarin, and Flutter, which is Google’s UI toolkit for building native applications for mobile (web and desktop are currently in development as of the time of this writing).
I got interested in Flutter thanks to a video of fireship.io on YouTube about Flutter, after that I went in to flutter.dev, downloaded the SDK and got my development environment going. I did both part 1 and part 2 of the “Write your first Flutter app” Codelab and got this going.
Completed Codelab
Sweet!
Everything is rainbow’s and sunshine’s following a tutorial, but that got my curiosity going, so I researched a bit about tutorials, courses etc. and found that Udacity has a free course on Flutter, I signed up and got the course rolling.
Cloning an app layout
During the Udacity flutter course that I’m taking, there was an interesting quiz about recreating an app layout as a way to practice flutter, at first I was scared, but after calming myself, I realized that this is the perfect opportunity to put my newly acquired skills to the test.
I’m probably not going to be very original, and not very optimized code wise, but I wanted to recreate the Instagram feed in a flutter app. Filled up with determination, I got things running.
Here is the repo if you want to check out my spaghetti code.
Development
When I started, everything felt very puzzle like, how am I supposed to know what do I need to do?
The first step was cleaning the code that was generated when I created the project, after that, I decided to set some constraints, so I don’t go crazy.
- I’m going to implement only one page/view, in this case, the home.
- I’m going to focus on make it “work” visually, not going to waste much time reading about code structure, that will be for later.
- I’m going to use the icons that come with flutter, so I can focus on layout building.
The main goal is to finish the project and consolidate my learning experience. With that in mind, I went ahead, banged my head on the keyboard a couple of times, and got this.
Progress!
Looking good, not bad for an attempt without a tutorial.
While I was searching things in the documentation, I found this link about flutter for web developers, this was very helpful since I got some experience working with HTML/CSS.
One thing I realized while I was working on this project is that widgets feels structurally the same as a <div> in HTML, in a way that both are building blocks.
Continuing with the development, things started to make more sense, I was getting more acquainted with the flutter API, I was getting more comfortable with dart, and I started having fun, which is great.
Nice, got the bottom navigation bar going thanks to flutter’s built in widgets. As time goes by the code starts to become spaghetti, and suddenly this feels like I bad idea, I’m even considering not to publish this blog, then I remember why I’m doing this.
IM DOING THIS TO LEARN!
If I do not make bad stuff, how will I learn, how will I grow?
With some of my doubts washed away and some more time developing, I got this.
It is not Instagram, is not even a good clone, but it’s close enough, and I did it without following a tutorial, and I learned a lot by doing this.
Here is the last picture update.
Key takeaways
- I need to think more about how I’m going to structure my widgets on the given project.
- Make the code more modular, less hardcoding and more variables and widgets.
- Write some documentation while I’m developing, after a while, I got lost in my own code.
- When in doubt, always google.
Closing thoughts
Despite my limited experience, I manage to get a UI going in flutter, not optimal by any means, but I’m really happy of what I manage to accomplish, I learned a lot during the process, but most importantly, I had a lot of fun doing it. I’m liking the widgets system a lot, it is making sense in my head, the documentation is great, and I found nice tutorials on YouTube.
Who would have thought, maybe this time mobile development will stick to me?
Hope to see you again on my next post.
Back to top