Sign in

Phd candidate in Nuclear Physics at Duke University, Flutter lover

Dialog is an important interaction model in UI design. In Flutter, you can open a dialog by calling the showDialog function:

Future<T?> showDialog<T>({
required BuildContext context,
required WidgetBuilder builder,
bool barrierDismissible = true,
Color? barrierColor = Colors.black54,
String? barrierLabel,
bool useSafeArea = true,
bool useRootNavigator = true,
RouteSettings? routeSettings,

Shapes and borders are essential aspects of UI frameworks. CSS offers rounded rectangle shapes with four configurable borders out of the box. But you can use a clip-path or some smart tricks to generate all kinds of shapes. It would be great to have those features in Flutter as well.

How does Flutter handle shapes and borders?

All built-in shapes (more precisely, borders of shapes) in Flutter inherits from the abstract ShapeBorder class. Concrete Flutter built-in shape borders can be divided into two categories:

  • The BoxBorder and Border class. They have four border sides that are used to describe the four sides of a rectangle and are…

I love the fact that Flutter lets you create beautiful and customizable UI. There are many built-in widgets for you to use, and if you want even more customization, you can use the CustomPainter and paint the screen however you like. But when it comes to UI components like buttons, switches, checkboxes, sliders, etc, we typically just use the built-in widgets. They are easy to use and offer you some customization ability, but they have to follow the Material or Cupertino design guidelines. If that’s what you are aiming for, they are great to use. But if you want to…

This is what we will achieve in this article

The animated_styled_widget package just got an upgrade to support explicit animations. If you don’t know what the package could do before, here is a brief recap:

  1. There is the Style class which is a responsive data class for major UI ingredients like width, height, margin, padding, background decoration, shape, shadowing, transformation, text style, etc. They are responsive in the sense that all those class accepts a Dimension instance where a double px value was intended. For example, you can write something like:
var width = Dimension.clamp(100.toPXLength, 10.toVWLength, 200.toPXLength);

Responsive design is very important for those who want to target different platforms using a single code base. This is especially true for Flutter development since Flutter targets all major platforms.

How to do responsive design?

Responsive design in Flutter can be achieved in many ways. The simplest way is to get the current screen info using the MediaQuery widget:

Size screenSize = MediaQuery.of(context).size;
Orientation orientation = MediaQuery.of(context).orientation;

Or you can use a package that simplifies this process for you. They typically provide you with an interface like:

ResponsiveBuilder( builder: (context, sizingInformation) { // Check…

Neumorphism is one of the hottest design topics last year. It provides a soft and natural feeling to your UI. It is a careful selection of shadows, background color/gradient, and the surrounding environment. There have been multiple packages for achieving neumorphism in Flutter. The most famous one being flutter_neumorphic. If you just want to achieve the neumorphism effect, I strongly recommend this package. This package has the strength of being able to animate buttons that are “pressed” below the surface. …

A responsive, cyberpunk button
  1. Calculate the width is not difficult. Get…

CSS offers the <length>/<percentage> data type for easier responsive design of websites. It also allows some handy functions like:

max(10px, 10%)
calc(10px + 10%)
clamp(10px, 50%, 20px)

This is why I created the dimension package (formally called length_unit). The base class is simply called Dimension and below are the interface of this class (implementation omitted):

abstract class Dimension { const Dimension(); double toPX({double…

Greetings fellow coders. In my previous article “Creating morphable shapes in Flutter”, I talked about how to use the PathMetric class to morph two arbitrary shapes in Flutter. The basic ideas are the following:

  1. The PathMetric class can traverse the border of a shape(represented by the Path class in Flutter) and generate a list of points(represented by the Offset class) on the border.
  2. We take the two lists of border points and try to calculate the intermediate states between them. This is easy, as the intermediate states between two points on a 2D plane are just along the straight line…

Greetings everyone. Since the last time I wrote “Create morphable shapes in Flutter”, a lot of effort has been devoted to updating the Shape design for that package. Today I am excited to tell you that every shape in the morphable_shape package is now responsive, just like what CSS shapes do but even more.

To create a responsive shape, we need to introduce a length class similar to what CSS has (check out the length_unit package). Now you can create a responsive rounded rectangle by writing:

Shape rectangle=RectangleShape(
borderRadius: DynamicBorderRadius.only(
topLeft: DynamicRadius.circular(10.toPXLength),
bottomRight: DynamicRadius.elliptical(60.0.toPXLength, 10.0.toPercentLength))

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