Zomato App — Features Decoded

5 min readMay 27, 2023

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.

Features involved.,

→ 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