I tried Flutter recently, it’s super enjoyable, productive and intuitive! 😄 I’ll discuss where Flutter shines and why I like it by showing you an Instagram clone I built.
What is Flutter❓
It’s a mobile framework for creating Android and iOS applications.
You write code once using the Dart programming language and ship it to both the App Store and Google Play Store, similar to React Native. Its main selling points are fast development, expressive user interface (UI), and native performance.
Creating Instagroot — Instagram clone for Groot 🌴
I only focused on creating the UI and interactions for the Home Feed, take a look at what it looks like below 👻
I took a top-down approach when building Instagroot:
- Break down the components and create the layout for them.
- Tackle big components one at a time: StoriesBar, PostWidget, and CommentWidget.
- Implement the details for smaller components, for example: avatars have a gradient border if a user has a new story.
- Create the interactions/animations such as liking a post, double tapping to like a post, commenting, and liking comments.
Why I like using Flutter 😍
Composable, intuitive, and fun
To create user interfaces in Flutter, you compose many “widgets” (components) together. To me it’s super intuitive and fun!
I created Instagroot using the Row, Column, Stack, and ListView widgets for layout. Then using the Padding widget to add spacing where needed.
For example, take a look at the UI and corresponding code for the “photo details” section:
Simple and useful built-in widgets
Flutter has many built-in widgets that implement common UI components such as a Scaffold (consisting of the AppBar and BottomNavigationBar), CircularAvatar, IconButton, Icon, and many more.
Highly customizable widgets
If the built-in widgets alone aren’t cutting it, you can create your custom widgets using some built-in widgets and lower level APIs which give you more fine grain control of pixels. Alternatively, you can find widgets from the nice Flutter community.
For Instagroot, I implemented custom widgets for the avatars with a gradient border, heart animation when a photo is double tapped, photo carousel dots, and heart button for liking comments:
Awesome Tooling
It’s easy to setup Flutter and start coding using VSCode which feels more lightweight compared to using Android Studio and Xcode. Notable features include:
- Inspect Widget for figuring out where a UI element is in the hierarchy and the corresponding code for creating it.
- Code Assist for quickly refactoring widgets such as adding Padding to a widget.
- Hot Reload so UI changes in your code will be reflected on the emulator or physical device in milliseconds.
Conclusion
Flutter’s fun, easy to use, and I’m pretty productive creating mobile applications using it. You should definitely give it a shot if you haven’t already.
Thanks everyone for reading and hope you all enjoyed it! ✌️
📱 Try the app on Google Play Store
❤️ See the full code on GitHub
Next up: I’ll be writing blog posts and posting videos on how to create specific Flutter widgets! 😄
🌈 Find me on Instagram
🐙 Follow me on GitHub
⭐ Let’s connect on LinkedIn
🐦 Follow me on Twitter
