Developers love Lottie because it provides them with great, effective, and efficient animations. But it has one shortcoming– Lottie is static. By static, I mean to say that the behaviour of the animation is coupled with time and it behaves the same way every time it is played.

When it comes down to showing the dynamic values, we often have to club Lottie with our Animated API in React Native or for any Animated APIs in other Native Platforms (like iOS or Android), where static part (for example, background confetti) is controlled by Lottie and, the dynamic part is controlled…

Program Statement: Designing mesmerizing, interactive timeline for the user’s weight loss journey.

For the past few months, we are working on a health app that helps users in their weight loss journey. Here we call it more of a Wellness Journey. This app keeps track of your weight, your inches, water intake, and of course your calories. We are creating a platform that acts as a personal assistant in their journey. Lately, our users have been asking us for a feature in the app where they can view their entire journey i.e what was their weight when they started, and…

Shared element transition is a great way to add animations between activity transitions. I didn’t realize I had been using them all along until one day when I read about them in one of the blog posts. It piqued my interest and I wanted to learn to implement them in my project.

So, I tried to give it a go. After reading a bit about the shared transition, I realized that it is just not the transition between two screens. It has all the concepts like micro-interactions, animation affordances, and making user interactions seamless.

The reason why shared transitions are…

As a developer, I have always been smitten by the beautiful animation concepts which designers put on their Dribbble accounts for mobile apps and websites.

Until now, I used to spend my days and nights scratching my head in order to build those animations in my projects. That’s because designing animations that delight users is not an easy task. When users are interacting with these animations, we have to make sure that these animations elicit the right emotions. Such as the joy of completing a task successfully communicated by an animation. I wanted to build those experiences for our users.

This article is , in my opinion , will be helpful for android developer mostly. In Android, we have luxury to give padding , margin, background color in almost all the widget. But in Flutter we are cheated. Therefore i have created a small table which show which widget has which property. Right now, i have include only those widget which I have explained in this series. I will constantly keep it updating whenever I discuss about any other widget. So If you like bookmark this page or take a printout and refer it.

In the last article, we have covered

  1. Text
  2. Padding
  3. Container
  4. Center
  5. TextField
  6. Image
  7. Icon
  8. Card
  9. Radio
  10. Opacity

Now , it’s time to explore rest of them.

Go to index to find out all the articles in this series.

In this article we will learn about few basic widget required to build any UI. Flutter has a ton of widget and it will be nightmare to try to remember all the widget and their properties at once therefore i am picking only most used and basic widget. We will learn advance widget later in the series while creating complex ui and clones.

In this article we will discuss about

  1. Text
  2. Padding
  3. Container
  4. Center
  5. TextField
  6. Image
  7. Icon
  8. Card
  9. Radio
  10. Opacity
  11. Column
  12. Row
  13. Button
  14. Wrap
  15. ListView
  16. PageView
  17. Divider
  18. Circular…

Go to index to find out all the articles in this series.

In any software , we want to react with user input like button pressed, radio toggle etc etc. In Android we don’t have to do anything to specify this behavior but in Flutter we have to.

In flutter we have two type of Widgets:

  1. Stateless Widget
  2. Stateful Widget

Stateless Widget

Widget that don’t hold the state(variable) inside itself to present past or future value are called stateless widget. There state depends on the information provided by the parent. For example , a textview , it just know the…

Go to index to find out all the articles in this series.

In the last blog , we created our first Flutter app but it was pretty ugly. In this blog we will try to implement App Bar and Navigation Drawer. In Android, app bar is provided using style file or using AppBar in xml, but in Flutter , app bar, bottom bar, navigation bar are all provided by Scaffold.

In general meaning , Scaffold is temporary wood or metal pipe structure to support construction. …

Nitish Prasad

Mobile developer at Quovantis Technology

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store