The blog of Marcin Szałek: in-depth Flutter tutorials on animations, complex UI and turning beautiful designs into real apps.https://fidev.io/https://fidev.io/stripe-checkout-in-flutter-web/https://fidev.io/stripe-checkout-in-flutter-web/Flutter Web is getting more mature every day. If you want to accept payments using Stripe in Flutter web application, this article is for you.Fri, 02 Oct 2020 04:48:19 GMTPaymentsStripehttps://fidev.io/stripe-in-flutter-mobile/https://fidev.io/stripe-in-flutter-mobile/Have you ever struggled to integrate card payments into your mobile Flutter app? If so, today is your lucky day! In this post, I present how to use Stripe Checkout in the Flutter app without any hassle!Wed, 19 Aug 2020 17:00:45 GMTPaymentsStripehttps://fidev.io/interact-with-framy/https://fidev.io/interact-with-framy/Have you ever developed a widget or a page and you wanted to make sure it works correctly in different scenarios but then it turned out that you can’t just reproduce all the cases you want to cover? Framy may solve such problems!Wed, 08 Jul 2020 18:44:31 GMTpubhttps://fidev.io/water-drop/https://fidev.io/water-drop/I'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! 😀Mon, 23 Mar 2020 09:00:30 GMTUI Challengehttps://fidev.io/kinetic-poster/https://fidev.io/kinetic-poster/In 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!Mon, 02 Mar 2020 15:30:08 GMTAnimationsUI Challengehttps://fidev.io/sy-animation/https://fidev.io/sy-animation/Check out the videos explaining how I implemented awesome SY Expedition Travel animation by Anton Skvortsov! In the following videos I will show you the whole process of creating a UI challenge in Flutter.Mon, 09 Sep 2019 09:24:33 GMThttps://fidev.io/thanos-snap-effect-in-flutter/https://fidev.io/thanos-snap-effect-in-flutter/Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂Tue, 06 Aug 2019 09:30:29 GMThttps://fidev.io/tickets-advanced-transitions/https://fidev.io/tickets-advanced-transitions/As 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!Tue, 28 May 2019 10:48:57 GMTAnimationsGestureDetectorUI Challengehttps://fidev.io/tickets-challenge-parallax/https://fidev.io/tickets-challenge-parallax/Parallax 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.Mon, 29 Apr 2019 04:05:40 GMTUI Challengehttps://fidev.io/ripple-animation/https://fidev.io/ripple-animation/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!”.Thu, 21 Mar 2019 20:05:46 GMTAnimationsRecthttps://fidev.io/piano-tiles/https://fidev.io/piano-tiles/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!Mon, 14 Jan 2019 06:44:21 GMTAnimationsGestureDetectorUI Challengehttps://fidev.io/shared-element-transition-in-flutter/https://fidev.io/shared-element-transition-in-flutter/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.Mon, 31 Dec 2018 17:36:16 GMTAnimationsRectUI Challengehttps://fidev.io/bmi-calculator-in-flutter-part-7-animated-transition/https://fidev.io/bmi-calculator-in-flutter-part-7-animated-transition/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.Wed, 14 Nov 2018 08:56:49 GMTAnimationsUI Challengehttps://fidev.io/bmi-calculator-custom-slider/https://fidev.io/bmi-calculator-custom-slider/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!Mon, 29 Oct 2018 07:07:33 GMTAnimationsGestureDetectorUI Challengehttps://fidev.io/bmi-calculator-animated-slider-hint/https://fidev.io/bmi-calculator-animated-slider-hint/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! 🙂Fri, 19 Oct 2018 07:50:37 GMTAnimationsUI Challengehttps://fidev.io/bmi-calculator-layouts/https://fidev.io/bmi-calculator-layouts/In this post I go through some layout changes in the BMI Calculator app, explain the thought process and provide code with app screenshots.Thu, 11 Oct 2018 05:11:07 GMTUI Challengehttps://fidev.io/bmi-calculator-height/https://fidev.io/bmi-calculator-height/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 :)Wed, 12 Sep 2018 07:33:00 GMTGestureDetectorUI Challengehttps://fidev.io/bmi-calculator-weight/https://fidev.io/bmi-calculator-weight/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!Mon, 03 Sep 2018 06:30:34 GMTListViewUI Challengehttps://fidev.io/bmi-calculator-gender/https://fidev.io/bmi-calculator-gender/This 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.Wed, 22 Aug 2018 07:14:09 GMTAnimationsUI Challengehttps://fidev.io/ui-challenge-flight-search/https://fidev.io/ui-challenge-flight-search/In 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.Tue, 31 Jul 2018 05:35:05 GMTAnimationsUI Challengehttps://fidev.io/filter-menu-ui-challenge/https://fidev.io/filter-menu-ui-challenge/In 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!Fri, 11 May 2018 14:58:09 GMTAnimationsFloatingActionButtonUI Challengehttps://fidev.io/infinite-dynamic-listview/https://fidev.io/infinite-dynamic-listview/In this post, I will quickly go through how to make an infinite ListView, that dynamically loads more data when a user scrolls down to the end. Let’s get to it!Mon, 16 Apr 2018 20:03:11 GMTListViewhttps://fidev.io/dynamic-sliver-floatingactionbutton/https://fidev.io/dynamic-sliver-floatingactionbutton/In this post I will walk through a process of creating FloatingActionButton that is pinned to the edge of Sliver’s FlexibleSpaceBar.Fri, 30 Mar 2018 12:54:58 GMTFloatingActionButtonpubhttps://fidev.io/ok-google-flutter/https://fidev.io/ok-google-flutter/In this post I would like to show you how I integrated Google Assistant/Google Now with my WeightTracker app written in Flutter (works only on Android).Mon, 26 Feb 2018 20:11:59 GMThttps://fidev.io/integrating-flutter-coveralls/https://fidev.io/integrating-flutter-coveralls/This post shortly presents snippet on how to integrate Flutter app with Coveralls, which will give you feedback on test coverage in your app. Let’s get to it!Sun, 28 Jan 2018 12:37:39 GMThttps://fidev.io/zooming-with-gesturedetector/https://fidev.io/zooming-with-gesturedetector/In previous post I described how to create own diagram using CustomPainter. Now I will go through adding zoom effect to the diagram.Mon, 18 Dec 2017 06:31:15 GMTChartshttps://fidev.io/deleting-entry-with-undo/https://fidev.io/deleting-entry-with-undo/In this post I will go through how I added delete functionality to my WeightTracker app. I will also show how to implement ‘undo’ action on Snackbar with help from Redux Library. 🙂 Let’s get to it!Sun, 26 Nov 2017 12:40:23 GMTFirebaseReduxhttps://fidev.io/line-chart-flutter/https://fidev.io/line-chart-flutter/In this post I will go through the process of creating line chart for my WeightTracker app. Since there is no official support for drawing charts yet, we will do it by our own 🙂 . Expected result is a Widget displaying history of weight entries. Let’s get to it!Tue, 14 Nov 2017 07:32:50 GMTChartshttps://fidev.io/flutter-tabbar/https://fidev.io/flutter-tabbar/In this short post I will document how I added TabView to my WeightTracker app.Mon, 06 Nov 2017 18:18:14 GMThttps://fidev.io/reduxing-flutter/https://fidev.io/reduxing-flutter/In this post I’m going to go through how I added flutter_redux library to my existing Firebase-connected app. Let’s get to it!Wed, 11 Oct 2017 04:27:14 GMTFirebaseReduxhttps://fidev.io/firebase-database-in-flutter/https://fidev.io/firebase-database-in-flutter/In this post I’m going to go through adding Firebase Database to a Flutter application. It is going to cover adding, editing and reading values from realtime database with intention to display them in listview. Let’s get to it!Tue, 29 Aug 2017 06:40:52 GMTFirebasehttps://fidev.io/full-screen-dialog/https://fidev.io/full-screen-dialog/In this post I would like to go through the process of creating full-screen dialog. Dialogs like that are used for more complex user operations that would be inappropriate for normal dialog. Luckily, Flutter framework provides very simple way to create and use them.Mon, 21 Aug 2017 16:25:47 GMThttps://fidev.io/flutter-listview/https://fidev.io/flutter-listview/In this post I am going to go through how I created basic ListView in Flutter with dynamically added values. I will present basic lists with one text as well as a bit more complex layout. Let's get to it!Sat, 22 Jul 2017 06:57:46 GMT