liquid_ui 1.0.0+8

  • Readme
  • Changelog
  • Example
  • Installing
  • 80

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 #


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 #

BreakpointWidthDevices
xs< 576pxmobile (portrait)
sm>= 576pxmobile (landscape)
md>= 768pxtablet (portrait)
lg>= 992pxtablet (landscape) laptop (small)
xl>= 1200pxDesktop laptop(large)

Layout Mechanism #

Liquid has 4 Layout Building mechanism

  1. Responsive Builder
  2. Responsive 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 #

1.0.0+8 #

Fixed docs and bugs

1.0.0+6 #

Production build ready.

Salient Features #

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

1.0.0-beta+1 #

first release

example/example.md

A complete documentation and tutorial app. All made with liquid.

Visit Liquid Expo #

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  liquid_ui: ^1.0.0+8

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:liquid_ui/liquid_ui.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
60
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
80
Learn more about scoring.

We analyzed this package on Jul 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [liquid_ui] that is in a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
meta ^1.1.8 1.1.8 1.2.1
Transitive dependencies
collection 1.14.12 1.14.13
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test