flexi 0.3.0 copy "flexi: ^0.3.0" to clipboard
flexi: ^0.3.0 copied to clipboard

outdated

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

Flexi

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 #

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 #

4
likes
0
points
44
downloads

Publisher

verified publisherzenonine.com

Weekly Downloads

2024.08.31 - 2025.03.15

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

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

collection, flutter, meta

More

Packages that depend on flexi