flexi 0.3.0

Beside Material and Bootstrap breakpoint systems, Flexi allows to create your own layout easily for different grid types Manuscript, Columns, Modular and Baseline.

Beside Material and Bootstrap breakpoint systems, Flexi allows to create your own layout easily 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

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

Installing - pubspec.yaml

dependencies:
  flexi: <latest-version>

copied to clipboard

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

copied to clipboard

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

copied to clipboard

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