liquid_ui 1.0.0+9

Liquid is an open source UI toolkit for developing cross platform apps using Flutter.

Liquid

Build fast, responsive, cross platform apps with Liquid.

Liquid is an open source UI toolkit for developing cross platform apps in Flutter. Quickly create apps for Android, IOS, Web or Desktop with our powerful grid system, text processor, forms, extensive prebuilt components and dozens of utilities.

Visit Liquid Expo and Documentation

#MadeWithLiquid

Salient Features

• Powerful grid system that support upto 12 column
• Extensive array of UI Elements ( With more than 1000+ configuration )
• A powerful text processor to use CSS like text styling in flutter
• Liquid Form (support all html form features)
• Responive utilities to use with non-liquid components
• Stable and optmized for Web
• And More to explore 😁

Getting Started

Step 1: Add liquid to pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
    
  liquid_ui: <latest-version>

Step 2: Wrap Your MaterialApp widget with LiquidApp

import 'package:liquid_ui/liquid_ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({
    Key key,
  })  : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LiquidApp(
      materialApp: MaterialApp(...)
    );
  }
} 

Step 3: Visit Liquid Expo for demo and tutorials.

Note

Liquid is compatible with MaterialApp for now. LiquidCupertinoApp will be available in next major update

Authors

• Raj Singh
• Pulkit Nanda

---

1. Introduction

Liquid is divided into 3 sub-libraries

• Liquid Base - holds layout, theme, extensions, text processor, etc.
• Liquid Components - holds components like buttons, scrollspy, dropdown, form, etc.
• Liquid Core - holds validators for LForm.

2. Layout

Breakpoints

Breakpoints are the point in which your sites/apps content will respond to provide the user with the best possible layout to consume the information.

Liquid support 5 breakpoints

Breakpoint	Width	Devices
xs	< 576px	mobile (portrait)
sm	>= 576px	mobile (landscape)
md	>= 768px	tablet (portrait)
lg	>= 992px	tablet (landscape) laptop (small)
xl	>= 1200px	Desktop laptop(large)

Layout Mechanism

Liquid has 4 Layout Building mechanism

1. Responsive Builder
2. Responsive Columns
   • Rows
   • Columns
3. Responsive Container
4. Responsive Utilities

1. Responisve Builder

A builder that builds its childrens based on active breakpoints.

LResponsiveBuilder(
  onXS: (context) => buildOnXS(context), // required
  onSM: (context) => buildOnSM(context), // build only on SM breakpoint
  onMD: (context) => buildOnMD(context), // build only on MD breakpoint
  onLG: (context) => buildOnLG(context), // build only on LG breakpoint
  onXL: (context) => buildOnXL(context), // build only on XL breakpoint
)

NOTE: LResponsiveBuilder will build onXS by default for other breakpoints if they are not defined.

NOTE: By default LResponsiveBuilder will use parents width to determine the active breakpoint.

To use screen width instead of parent width to determine breakpoint

LResponsiveBuilder(
  ... // builders
  useMediaQuery: true, // this will make responsive builder to use screen width to build layout
)

Note: Responsive builder helps to build layout based on screen size but its too much work to build layout for 5 breakpoints. use Responisve Columns to build responsive layout in liquid.

2. Responisve Columns

Liquid comes with Rows (LRow) and Columns (LColumn) which helps to create a responsive grid thats layout their children according to active breakpoint.

Rows (LRow)

LRow is a responsive layout component in liquid that accepts a list of columns. It can change its axis based on breakpoint by using axis property.

LRow(
  columns: <LColumn>[
    ... //list of columns
  ]
)

LRow support maximum of 12 columns in fixedSize mode (default mode). i.e, if on a particular breakpoint the sum of all the column span is greater than 12 than mode will be changed to ratio.

LRow(
  columns: <LColumn>[
    LColumn( // first column
      lg: 8, // span to 8 column space in lg
      xl: 6, // span to 6 column space in xl
      children: <Widget>[...]
    ),
    LColumn( // second column
      lg: 4, // span to 4 column space in lg
      xl: 3, // span to 3 column space in xl
      children: <Widget>[...] 
    ),
  ]
)

LRow support 2 mode to render its columns.

• fixedSize (columns will takes exact span space)
• ratio (uses ratio/percentage to determine available space)

LRow(
  mode: LGridMode.ratio
  columns: <LColumn>[
    LColumn( // first column
      lg: 8, // takes ~53% space in lg
      xl: 6, // takes ~50% space in xl
      children: <Widget>[...]
    ),
    LColumn( // second column
      lg: 4, // takes ~26% space in lg
      xl: 3, // takes ~25% space in xl
      children: <Widget>[...] 
    ),
    LColumn( // third column
      lg: 3, // takes ~26% space in lg
      xl: 3, // takes ~25% space in xl
      children: <Widget>[...] 
    ),
  ]
)

Gutters The space between columns is known as gutter

default: 5px

LRow(
  gutter: 10.0, // add 10px space between columns
  columns: <LColumn>[
    ... //list of columns
  ]
)

Margin The space around the row

default: bottom margin equals to gutter/2

NOTE: by default LRow is in horizontal axis except in xs breakpoint which is vertical. you can change this using axis property of LRow

Hiding a column on particular breakpoint

You can prevent a column from rendering on breakpoint by using visibility property of LColumn

LRow(
  columns: <LColumn>[
    LColumn( // first column
      lg: 8, // span to 8 column space in lg
      xl: 6, // span to 6 column space in xl
      children: <Widget>[...]
    ),
    LColumn( // second column
      visibility: LBoxVisibility.belowXL(false),
      xl: 3, // span to 6 column space in xl
      children: <Widget>[...]
    ),
    LColumn( // third column
      lg: 4, // span to 4 column space in lg
      xl: 3, // span to 3 column space in xl
      children: <Widget>[...] 
    ),
  ]
)

In above code, the second column will not render on XS, SM, MD and LG breakpoints.

3. Responisve Container (LBox and LAnimatedBox)

Liquid comes with a container that can change its property based on breakpoint. properties like alignment, height, width, decoration, visibility, padding and margin.

LBox

Creates a widget that combines common painting, positioning, rendering and sizing widgets according to breakpoint.

LBox(
  visibility: LBoxVisibility(
    xs: false, // will not render child in XS breakpoint
    sm: false, // will not render child in SM breakpoint
  ),
  height: LBoxDimension( // height based on active breakpoint
    xs: 250.0,
    sm: 280.0,
    md: 350.0,
    lg: 450.0,
    xl: 500.0,
  ),
  padding: LBoxEdgeInsets( // padding based on active breakpoint
    lg: EdgeInsets.all(10.0),
    xl: EdgeInsets.all(20.0),
  ),
  child: Image.network("https://source.unsplash.com/random/"), // child widget
)

LAnimatedBox

Animated version of LBox that animate any change in box property.

LAnimatedBox(
  //duration: Duration(milliseconds: 150), //default
  //curve: Curves.linear, //default
  visibility: LBoxVisibility(
    xs: false, // will not render child in XS breakpoint
    sm: false, // will not render child in SM breakpoint
  ),
  height: LBoxDimension( // height based on active breakpoint
    xs: 250.0,
    sm: 280.0,
    md: 350.0,
    lg: 450.0,
    xl: 500.0,
  ),
  padding: LBoxEdgeInsets( // padding based on active breakpoint
    lg: EdgeInsets.all(10.0),
    xl: EdgeInsets.all(20.0),
  ),
  child: Image.network("https://source.unsplash.com/random/"), // child widget
)

1. Responisve Utilities

To know the currently active breakpoint use MediaQuery

To know if a particular breakpoint is active use

MediaQuery.of(context).isXS // true if XS is active

MediaQuery.of(context).isSM // true if SM is active

MediaQuery.of(context).isMD // true if MD is active

MediaQuery.of(context).isLG // true if LG is active

MediaQuery.of(context).isXL // true if XL is active

To get active breakpoint use

MediaQuery.of(context).activeBreakpoint // active breakpoint

Using Utilities

Example 1. Build child based on active breakpoint

final mq = MediaQuery.of(context);

Container(
  child: mq.isXS || mq.isSM ? buildWidget() : buildAnotherWidget(),
)

Example 2. Get different values based on active breakpoint

// This class will produce value based on active breakpoint
class ResponsiveValue<T> {
  final BuildContext context;
  final T xs, sm, md, lg, xl;

  const ResponsiveValue(
    this.context,{
    this.xs, 
    this.sm, 
    this.md, 
    this.lg, 
    this.xl
  });

  T getActiveValue(LBreakPoint breakPoint) {
    switch (breakPoint) {
      case LBreakPoint.xl:
        return xl;
      case LBreakPoint.lg:
        return lg;
      case LBreakPoint.md:
        return md;
      case LBreakPoint.sm:
        return sm;
      case LBreakPoint.xs:
      default:
        return xs;
    }
  }

  T get value => getActiveValue(MediaQuery.of(context).activeBreakpoint);
}

...

final String forSmallDevices = "This message is for \l.bold{small} devices";
final String forLargeDevices = "This message is for \l.bold{larger} devices";

@override
Widget build(BuildContext context) {
  return LText(
    ResponsiveValue<String>(
      context,
      // for smaller devices
      xs: forSmallDevices,
      sm: forSmallDevices,
      md: forSmallDevices,

      // for larger devices
      lg: forLargeDevices,
      xl: forLargeDevices,
    ).value,
  );
}

3. LText

Visit Liquid Expo or download Android App for more details and tutorials.

Liquid's text processor helps to use css like style classes to style your inline text elements.

LText(
  "This message is \l.bold.underline{Important}."
)

4. Liquid Components

Visit Liquid Expo or download Android App for live demo and tutorials.

5. Liquid Forms

Forms in liquid is highly inspired by html form also they are much effecient than normal flutter forms.

Visit Liquid Expo or download Android App for form tutorials and documentation

Read complete documnetation HERE

For live demo visit Liquid Expo or download Liquid Expo App