How to make ripple page transition in 3 minutes using Flutter

by Marcin Szałek | Mar 21, 2019 | Flutter | 14 Comments

Flutter makes beautiful animations easy. That’s the fact. What is also the fact is that we as developers are scared to push our apps to the next level by adding those minor animations that make the app beautiful instead of just pretty. Let’s change it together! In this post, I’d like to show you how we can add a ripple effect that may make your client say “I like that!”.

UI Challenge: Piano Tiles clone in Flutter

by Marcin Szałek | Jan 14, 2019 | Flutter | 24 Comments

Hi guys! This post is pretty straight-forward. I wanted to create a basic clone of Piano Tiles 2 – a mobile game where you play on simplified piano 🙂 Now I want to share with you how to do that in very few steps using Flutter. Let’s get started!

Shared Element Transition in Flutter

by Marcin Szałek | Dec 31, 2018 | Flutter | 5 Comments

Hello there! Some time ago a friend of mine showed me an article and asked me if I can do Shared Element Transitions in Flutter. The first thought that came into my mind was “Simple, Heroes!” but when I looked closely, I’ve noticed that the transition in that article occurs in one page, so Hero transitions wouldn’t work in that case. In this post I will use AnimationControllers, Overlays and Rects to get the same result.

BMI Calculator in Flutter – Part 7 – Animated transition

by Marcin Szałek | Nov 14, 2018 | BMI Calculator, Flutter | 11 Comments

Hello there! I’m back with a new post about implementing Johny Vino’s BMI Calculator design. This time we will focus on an animation between the input screen and the result screen. We will change the shape, position and size of a Widget using only one AnimationController. Let’s see how it goes.

BMI Calculator in Flutter – Part 6 – Custom Slider

by Marcin Szałek | Oct 29, 2018 | BMI Calculator, Flutter | 0 Comments

Hi guys! Welcome to part 6 of BMI Calculator in Flutter where I go through implementation of Johny Vino’s design. Recently we have implemented animation which indicates user how to use Pacman slider. In this post, we are going to code actual sliding behavior using GestureDetector. Let’s get to it!

BMI Calculator in Flutter – Part 5 – Animated Slider Hint

by Marcin Szałek | Oct 19, 2018 | BMI Calculator, Flutter | 4 Comments

Hi again! It’s about time to add some more code to the BMI Calculator app designed by Johny Vino. In this post, I will start creating bottom pacman slider. I will go through implementing the animated hint which will indicate user on how to use the slider. Let’s make it happen! 🙂

BMI Calculator in Flutter – Part 4 – Static Layouts

by Marcin Szałek | Oct 11, 2018 | BMI Calculator, Flutter | 0 Comments

After a long delay, I am coming back to you with a new BMI Calculator post. In this one, I will go through some layout changes I needed to make to update old Johny Vino’s design to the new version. Although most of the things here are quite straightforward, I want to invite you to this part as well, so that almost all of the development will be available for you too.

BMI Calculator in Flutter – Part 3 – Height

by Marcin Szałek | Sep 12, 2018 | BMI Calculator, Flutter | 7 Comments

Hi again! It’s time for another part of BMI Calculator in Flutter, a series in which I implement Johny Vino’s awesome BMI Calculator design (if you didn’t see previous posts, you can find them here). This time I will go through the implementation of height picker using GestureDetector. Let’s see how it goes 🙂

BMI Calculator in Flutter – Part 2 – Weight

by Marcin Szałek | Sep 3, 2018 | BMI Calculator, Flutter | 13 Comments

Hi again! I’m coming back with another part of the implementation of Jhony Vino’s awesome BMI Calculator design. In this post, I will focus on creating a widget for weight input. Let’s see how it goes!