Fluido

A simple and lightweight package to efficiently create reactive and responsive user interfaces in Flutter.

Introduction

Fluido widgets are based on the use of breakpoints (sm, md, lg, xl, xl2). A value is specified, for example a widget, to be returned for each breakpoints depending on the dimensions.

If no value is specified for a given breakpoints, the lower closest non-null value is used.

For example if you specify only sm and lg for the dimensions small and medium the specified sm value is selected while for the dimensions from large upwards the specified lg value is selected.

This allows you to incrementally specify which value you want to get.

Breakpoints and orientation

Breakpoints are used to select a value depending on the width of the screen or window, for example with the ScreenWidth and LayoutWidth widgets.

To select a value based on orientation, landscape or portrait, use the ScreenOrientation and LayoutOrientation widgets.

Screen or Layout

There are two versions of the main widgets and classes:

Objects named with Screen* refer to the size of the screen or window while those with Layout* refer to the size of the parent widget and can therefore only be used as a widget.

Documentation

ScreenSwitchValue

ScreenSwitchValue selects the specified value according to the screen or window size, it updates automatically as dimensions change and can be used for values of any type.

Container(
  color: ScreenSwitchValue(
    context,
    sm: Colors.red,
    lg: Colors.blue,
  ).value,
);

It can also be accessed directly from the BuildContext using context.screenSwitchValue() method.

This can be very useful when used with Flutter's Flex widget to display items in row or column depending on size:

Flex(
  direction: context.screenSwitchValue(
    sm: Axis.vertical,
    lg: Axis.horizontal,
  ),
  children: [
    ...
  ],
);

ScreenWidth and LayoutWidth

ScreenWidth select the specified widget according to the screen or window size (like ScreenSwitchValue of type widget). LayoutWidth is the same but based on the size of the parent widget.

ScreenWidth(
  sm: Container(
    child: Text('sm'),
  ),
  md: Container(
    child: Text('md'),
  ),
  lg: Container(
    child: Text('lg'),
  ),
  xl: Container(
    child: Text('xl'),
  ),
  xl2: Container(
    child: Text('xl2'),
  ),
);

Thanks to the incremental system of breakpoints ScreenWidth can also be used to show a widget only for certain dimensions:

ScreenWidth(xl: Spacer())

In this example the Spacer widget will only be displayed for sizes extra large and up.

ScreenOrientation and ScreenOrientation

ScreenOrientation select the specified widget according to the screen orientation. ScreenOrientation is the same but based on the orientation of the parent widget.

ScreenOrientation(
  portrait: Container(child: Text('portrait')),
  landscape: Container(child: Text('landscape')),
);

FluidoSettings

The following breakpoints are currently available:

  • sm = 640
  • md = 768
  • lg = 1024
  • xl = 1280
  • xl2 = 1536

To globally change the value of the breakpoints, use the FluidoSettings object:

void main() {
  FluidoSettings.breakpoints = FluidoBreakpoints(
    sm: 768,
    md: 1024,
    lg: 1280,
    xl: 1536,
  );

  runApp(MyApp());
}

To specify different breakpoint values for a specific widget use the optional breakpoints parameter:

ScreenWidth(
  breakpoints: FluidoBreakpoints(
    sm: 768,
    md: 1024,
    lg: 1280,
  ),
  sm: ...
  md: ...
);

Maintainers

Libraries

fluido
A simple and lightweight package to efficiently create reactive and responsive user interfaces. [...]
fluido_context
fluido_settings
layout_orientation
layout_switch_widget
layout_width
screen_orientation
screen_switch_value
screen_width