In this article we will address the features used in Zomato app. Along the side we will also look into how to use them in our flutter apps with reference tutorials and packages.
→ Multi language support using Localization
→ Changing app icons in run time
→ Roll over text animation
→ Pull to refresh indicator
→ Dynamic UI Components using Server driven UI technique
→ Elastic animation on scroll using Slivers
1) Multi language support using Localization
Multi language support is now available in most of the apps and zomato is no exception. In flutter apps, localization can be achieved using easy_localization package. It provides easy and fast internationalizing and localization our Flutter Apps.
You can check out my video tutorial about localizing flutter app: 👇https://www.youtube.com/watch?v=7CHeU1DstoQ
2) Changing app icons in run time
In most of the popular apps like zomato, slack etc., we have the option to change app icons dynamically. And if you like to do the same in Flutter? we got you covered!
flutter_dynamic_icon package provide options for dynamically changing app icon and app icon batch number in flutter apps.
You can check out my video tutorial about how to dynamically change app icons in Flutter apps: 👉 https://www.youtube.com/watch?v=412lSuyUJ_4
3) Roll over text animation
Roll over text animation can be observed in search bar of zomato app. In flutter, animated_text_kit package helps us to recreate this cool animation which really makes our app even or intuitive.
You can check out my video tutorial about implementing text animations 👉 https://www.youtube.com/watch?v=JmxqX48ChXU
4) Pull to refresh indicator
In zomato, we have option to refresh the restaurant list by pulling the contents down which is commonly referred as pull to refresh technique.
In flutter, Pull to refresh can be achieved by wrapping the top level widget using RefreshIndicator and provide relevant callback method to the onRefresh parameter.
You can check out my video tutorial about implementing pull to refresh in Flutter: 👉 https://www.youtube.com/watch?v=kwUe0eSAPzg
5) Dynamic UI Components using Server driven UI technique
Dynamic UI or Server driven UI is the concept of rendering the UI components based on the data which is sent from the server. The reason for using Server driven UI is because we don’t need the user the update the app to see the basic UI changes or enhancements that we have made in the app.
This technique is also adapted in zomato app. As you might have observed that the home page of the app changes dynamically based on the current events happening on our region (say for example it can be an IPL event). The home page UI is changed accordingly without we being updating the app. This is made possible with the help of Server Driven UI technique.
In flutter, Server driven UI can be achieved using firebase_remote_config package. This helps us to update our application look, feel and behaviour without re-releasing the app.
You can check out my video tutorial about implementing Server Driven UI in Flutter: 👉 https://www.youtube.com/watch?v=kFwrb0z5ZxE
6) Elastic animation on scroll using Slivers
We might have observed elastic scroll effect over images in zomato app upon trying to scroll after reaching the top.
In flutter, Elastic animation on scroll can be achieved using SliverAppBar and specifying StretchMode as zoomBackground. which will typically zoom the background image when we try to scroll after reaching the very top.
You can check out my video tutorial about implementing such fancy scroll animations in Flutter: https://www.youtube.com/watch?v=NkOXry6jbTQ
Well that’s it. 🎉 For more such awesome real case examples and flutter tutorials, subscribe to my YouTube Channel. 👇
Check out all my Flutter related blogs here.,👇
Other articles you may like.,
Shared Preferences in Flutter
Store the data locally in Flutter app using Shared Preferences.
Setting up your Flutter app for publishing in Play Store.
Before publishing our Flutter app in Google Play Store we need to brush up few feature to make sure that the app is…
Creating Desktop Apps using Flutter
In this article we will discuss about how to create and run a desktop app using Flutter.
If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇
Pay Vijay R using PayPal.Me
Go to paypal.me/iamVijayRavichandran and type in the amount. Since it’s PayPal, it’s easy and secure. Don’t have a…
If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩