flexi 0.1.5

Beside Material and Bootstrap breakpoint systems, Flexi allows to create your own layout easily.

Beside Material and Bootstrap breakpoint systems, Flexi allows to create your own layout easily.

---

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>

Example 1 - Material - Zero Configuration

Without any configuration, material layout by default is applied to your whole screen.

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) {
    return const MaterialApp(
      home: Scaffold(body: HomePage()),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(child: Text(context.flexi.breakpoint.id.toString()));
  }
}

Example 2 - Material - Standard Layout

For each breakpoint, use recommended layout from material guideline.

• xs: modal drawer + body + bottom app bar
• sm: rail + body
• md: rail + body + sidebar
• lg: visible drawer + body + sidebar