UI Challenge
15 posts.
2020
- Water Drop effect in FlutterI'd like to share with you how to achieve a water drop effect in Flutter. Why would you spend your time learning such skill? Because it looks cool! 😀
- 3D Kinetic Type Poster in FlutterIn this post, we’re going to learn how to create probably the most useless effect on this blog. 😀 The design is named 3D CSS Kinetic Type Poster. It was created by Pete Barr, who shared the design on dribbble and the front-end implementation on codepen. Let’s see if we can do it in Flutter as well!
2019
- Advanced transitions – UI Tickets ChallengeAs developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!
- Parallax effect in PageView – UI Tickets ChallengeParallax effects are awesome. Having elements move in the different speed during scrolling can easily provide the unique feeling for the application and they can make the user think that your app is well-polished. In this post, I will try to achieve parallax effect using PageView, Transforms, Alignments and some basic math.
- UI Challenge: Piano Tiles clone in FlutterHi 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!
2018
- Shared Element Transition in FlutterHello 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 transitionHello 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 SliderHi 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 HintHi 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 LayoutsIn this post I go through some layout changes in the BMI Calculator app, explain the thought process and provide code with app screenshots.
- BMI Calculator in Flutter – Part 3 – HeightIt'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 – WeightHi 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!
- BMI Calculator in Flutter – part 1 – GenderThis is another UI challenge post from me. This time I teamed up with Johny Vino to fully implement one of his awesome designs: BMI Calculator in Flutter.
- UI Challenge – Flight SearchIn this post, I will go through another UI Challenge. I have picked Johny Vino’s Flight Search design from 100 Mobile App Interactions which is mostly about animations and I will try to implement it as close as I can.
- Filter Menu – UI ChallengeIn this post, I show how I did my first UI Challenge. As my goal I’ve picked a filter menu design from dribble. Let’s do it!