flexi

Description:

flexi

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 #



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 #