An advance flutter UI Kit for developing responsive, cross platform applications.

Overview

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

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

You might also like...

✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. 🎖 Installing dependencies:

Dec 30, 2022

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

Dec 27, 2022

Flutter package for creating awesome animations.

Flutter package for creating awesome animations.

đŸŽŦ Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. đŸ’Ē fully tested 📝 well documented đŸ’ŧ e

Dec 31, 2022

Fun canvas animations in Flutter based on time and math functions.

Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

Jan 9, 2023

A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Apr 26, 2022

Flutter UI Challenges

Flutter UI Challenges

Introduction đŸŧ Zoo is a small, simple and beautiful app that lists 3d model of animals. Before we start, you can take a look at the app: Usage 🎨 To

Dec 22, 2022

A Flutter app with flip animation to view profiles of friends. 🌟

A Flutter app with flip animation to view profiles of friends. 🌟

Flip View Made with đŸ”Ĩ in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Sep 23, 2022

Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Nov 14, 2022

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023
Comments
  • Fixing ui

    Fixing ui

    fixed buttons fixed LListItem and LListGroup refactored code cleaned directories new alert design new button designs

    added size to alert, buttons, button group, badges

    opened by raj457036 0
Owner
StackOrient Pvt. Ltd.
We are a team of developers working on making the tech amazing
StackOrient Pvt. Ltd.
Multi directional infinite list with Sticky headers for Flutter applications

Sticky Infinite List Infinite list with sticky headers. This package was made in order to make possible render infinite list in both directions with s

Denis Beketsky 291 Dec 20, 2022
A collection of Screens and attractive UIs built with Flutter ready to be used in your applications. No external libraries are used. Just download, add to your project and use.

Flutter Screens A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs, built with Flutter, ready to be used in your applicat

Samarth Agarwal 5k Dec 31, 2022
A small splashscreen used as intro for flutter applications easily with a lot of customizations ❤ī¸đŸĨŗ

Splash Screen A splashscreen package to be used for an intro for any flutter application easily with a lot of customization Currently Supported by awe

DPLYR 283 Dec 30, 2022
On-boarding page for flutter applications

onboarding This is a sample flutter onboarding plugin you use to attract first-time users when they land on your page, hence the name onboarding. You

Eyoel Defare 9 Nov 2, 2022
High-level interfaces to Google Cloud Platform APIs

Google Cloud Platform support package (gcloud) The gcloud package provides a high level "idiomatic Dart" interface to some of the most widely used Goo

Dart 89 Dec 13, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Subir Chakraborty 132 Nov 13, 2022
This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文įŽ€äŊ“ Special feature Use multi-processing to

yung 67 Nov 2, 2022
Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Jahongir Anvarov 6 Dec 1, 2022
A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

Debjeet Das 1 Apr 9, 2022