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

• Flutter/Dart compatibility
• Installing - pubspec.yaml
• Examples
  • Example 1 - Predefined Layouts
  • Example 2 - Custom Layout
  • Example 3 - Component Swapping
• Usage
• FAQs

Flutter/Dart compatibility

Installing - pubspec.yaml

dependencies:
  flexi: <latest-version>

Examples

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

  @override
  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);

  @override
  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();

  @override
  SplayTreeSet<CustomBreakpoint> get breakpoints =>
      SplayTreeSet.from(<CustomBreakpoint>{
        const CustomBreakpoint(id: CustomBreakpointId.sm, minWidth: 0),
        const CustomBreakpoint(id: CustomBreakpointId.md, minWidth: 600),
      });

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

Usage

FAQs