Sign in

Ph.D. in Nuclear Physics, M.S. in Computer Science 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?


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…


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…


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. …


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…


A responsive, cyberpunk button

Do you want to quickly create a button like this in Flutter? It has rounded corners, four different borders with four gradient fill, a gradient shadow, text with varying letter spacing and shadows. Besides, the button is actually responsive, with an automatic height and a width that evaluates to…


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)

Flutter’s layout system differs from the web and Flutter does not use CSS. But in my opinion, it would still be beneficial to…


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)…


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. …

Wenkai Fan

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