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:

The builder usually returns a Dialog widget like an AlertDialog or SimpleDialog. There are also many packages on that lets you build more customized dialog widgets. The dialog has no information about where the widget that opens it lies on the screen and is almost always just at the…

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:

which specifies the width to be 10% of the screen width but…

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:

Then you build your widget differently based on that information.

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

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

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 max(50% of the screen width, 500px). If you move a mouse pointer over it, the cursor will change to the click gesture as well. Here are some of the steps I could think of to achieve this using Flutter out of the box.

  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:

Flutter’s layout system differs from the web and Flutter does not use CSS. But in my opinion, it would still be beneficial to be able to do something like what CSS offers for easier responsive design purposes.

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

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:

which will give you…

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