flexi 0.3.0
flexi: ^0.3.0 copied to clipboard
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 #
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 #
Example 1 - Predefined Layouts #
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 #
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 #
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