Visual Density

When we use a Flutter application with different devices, the input we use is also different. On a smartphone or a tablet, we provide input by touching the screen, while on a desktop device, whether on web or a desktop application, we use a mouse pointer. Flutter uses the VisualDensity class to adjust the UI to different input styles.

For instance, when input is provided via touch, buttons can be made larger, so that they are easier to tap. Flutter takes care of this for us. If we want to change the UI depending on the visual density that Flutter is using, we can read the VisualDensity.adaptivePlatformDensity value and change our widgets according to this value.

On devices with touch input, VisualDensity.adaptivePlatformDensity gets a value of VisualDensity.standard, while on a device where the mouse pointer is used, it gets a value of VisualDensity.compact.

Force a visual density value

We can force the visual density of a Material application by setting a value for it in the theme. We can set its value to a predefined one, such as VisualDensity.standard or VisualDensity.compact. Otherwise, we can set an entirely custom one using the VisualDensity({double horizontal = 0.0, double vertical = 0.0})` constructor.