Beside predefined breakpoint systems, such as Material, you can create your fixed and responsive layout for different grid types: Manuscript, Columns, Modular and Baseline.

pub package license verify flexi code coverage

Flutter/Dart compatibility

Flexi Flutter Dart
Flexi 0.1.0 - newer Flutter 2.0.0 - newer Dart 2.12.0 - newer

Installing - pubspec.yaml

  flexi: <latest-version>


Source code

Example 1 - Predefined Layouts

Source code

import 'package:flexi/flexi.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const App());

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  Widget build(BuildContext context) =>
      const MaterialApp(
        title: 'Flexi Example - Predefined Layouts',
        home: FlexContainer(
          // See also other predefined layouts:
          // BootstrapLayout, CarbonLayout, RuleOfThirdsLayout and FluidLayout
          layout: MaterialLayout(),
          child: Scaffold(body: HomePage()),

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  Widget build(BuildContext context) =>
      Center(child: Text(context.flexi.breakpoint.toString()));

Example 2 - Custom Layout

Source code

To create your custom layout, you only need to extend Layout class. Using your custom layout is similar to previous example. You can learn more from MaterialLayout , BootstrapLayout and other predefined layouts.

import 'dart:collection';

import 'package:flexi/flexi.dart';

enum CustomBreakpointId { sm, md }

class CustomBreakpoint extends Breakpoint<CustomBreakpointId> {
  const CustomBreakpoint({
    required CustomBreakpointId id,
    required double minWidth,
  }) : super(id: id, minWidth: minWidth);

class CustomLayout extends Layout<CustomBreakpointId, CustomBreakpoint> {
  const CustomLayout();

  SplayTreeSet<CustomBreakpoint> get breakpoints =>
        const CustomBreakpoint(id: CustomBreakpointId.sm, minWidth: 0),
        const CustomBreakpoint(id: CustomBreakpointId.md, minWidth: 600),

  LayoutFormat format(double containerWidth, [
    double containerHeight = double.maxFinite,
  ]) =>
      const LayoutFormat(
        columns: 4,
        gutter: 0,
        leftMargin: 0,
        topMargin: 0,
        rightMargin: 0,
        bottomMargin: 0,

Example 3 - Component Swapping

Source code

In this example, each breakpoint uses a recommended layout from material guideline.

  • xs: modal drawer (app bar) + body + bottom app bar
  • sm: rail + body
  • md: rail + body + sidebar
  • lg: visible drawer + body + sidebar