I will explain you in details how we can (and cannot) use Curves in Flutter, through a little application I made. But before dive into Curves, let refresh our mind with the main components involved in animations.

Very short reminder

In Flutter, we create our custom animation using 3 kind of objects: Animatables, Animation and AnimationController. For each kind, here is a short description, focusing only on details related to curves behavior.

• Animatable : an animatable is an object that produce a value, given an input generally from 0.0 to 1.0. It will be done thanks to the method transform. …

I recently discovered that you can make shortcuts in Flutter. First, I thought this feature will be used for desktop and web Flutter applications.

Is It really the case ? Let’s see four usages that will enhance your productivity and the reliability of your (mobile) applications :

• Enable / Disable debug banner for taking screenshots
• Enable / Disable the performance overlay and the material grid, to check widgets implementations
• Switch between Dark and Light mode to ensure that UI design is well implemented
• Send a big amount of debug data (however you want), feature mainly for the testing team

Few days ago, I read an article talking about best tools for developing a Flutter application in 2021 (January), and Adobe XD to Flutter plugin was one of them.

As I use Adobe XD for designing every application I made, I can define myself as a fan of both Flutter and Adobe XD. So let see what this plugin is capable of, to understand if the plugin is a good tool !

The design to be exported can be found here: https://github.com/GONZALEZD/flutter_demos/blob/main/adobe_xd_plugin/design/Flutter_plugin_tests.xd

Prerequisites

Create and setup a new flutter project:

• In a terminal (console), create a new flutter project: ‘flutter create…

Recently, I read an article talking about the Neumorphism, a “minimal way to design with a soft, extruded plastic look”. Some of UI Designers comment this design as good aesthetic, but doomed to disappear since there is not enough contrast to identify quickly components, especially for impaired people.

On contrary, the material design uses shadows a lot, in order to highlight even more components.

We will see how to do this in Flutter for any shapes:

• Text
• Rectangles and oval widgets
• Complex shapes

I also tried neumorphism design. …

Designing an application may be a real struggle when you have to made it to smartphones, tablets and web. Commonly, you may define general layout by retrieving the device screen size through the MediaQueryData instance.

@override
Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  if (screenWidth < 600.0) {
    return _buildPhoneLayout();
  }
  else if (screenWidth < 1000.0) {
    return _buildTabletLayout();
  }
  else {
    return _buildDesktopLayout();
  }
}

This example above a simple but pragmatic way to lay out your application page. The only thing I don’t like so much is that you have to define limits for device detection (devices…

On November 2020 was released two gaming consoles, starting a war between Xbox fans and Playstation one. On both side, they compared technical points about their favorite gaming console.

In Flutter SDK, there is no widget that mimics the iOS UITableView component (yet ?), with a floating section, as shown below.

A long time ago (a couple of weeks ago in fact), in a galaxy far far away (well, not from us, because we talked about our Milky Way)… a developer wanted to reproduce a design found on dribbble.com… In Flutter of course :D

Well, in that article I will show you that you have all needed stuff from the Flutter framework to design yourself a complex layout widget.