flutterstrap_ui

Description:

flutterstrap ui

Flutterstrap #
Flutterstrap is a package to create responsive layouts in flutter projects.
Designed to handle responsive layouts in Flutter web projects, it works for any platform.
Inspired to Bootstrap framework
Try at demo on DartPad
Getting Started #
Follow these steps to use this package
Add dependency #
flutterstrap_ui: ^1.0.0
copied to clipboard
Add import package #
import 'package:flutterstrap_ui/flutterstrap.dart';
copied to clipboard
Easy to use #
Simple example of use Flutterstrap
Put this code in your project and learn how it works 😊
@override
Widget build(BuildContext context) {
return ResponsiveContainer(children: [
ResponsiveColumn(
child: const Card(child: Center(child: Text('box 1'))),
),
ResponsiveColumn(
child: const Card(child: Center(child: Text('box 2'))),
),
ResponsiveColumn(
child: const Card(child: Center(child: Text('box 3'))),
),
ResponsiveColumn(
child: const Card(child: Center(child: Text('box 4'))),
),
]);
}
copied to clipboard
ResponsiveContainer
ResponsiveContainer is the basic layout element.
Default grid system is setted to 12 columns but you can override cols number using layoutColumns parameter.
You can also modify mode parameter to choose container width:

Use ContainerMode.container to set max-width at each responsive breakpoint;
Use ContainerMode.containerFluid set width at 100% at each breakpoints.

ContainerMode.container breakpoint width size



xs
sm
md
lg
xl
xxl




100%
540px
720px
960px
1140px
1320px



Default breakpoint sizes for every ResponsiveColumn are:



breakpoint
identifier
columns




Extra Small
xs
12


Small
sm
12


Medium
md
6


Large
lg
6


Extra Large
xl
3


Extra extra Large
xxl
3



Following describing breakpoints:



breakpoint
dimensions




xs
<576px


sm
≥576px


md
≥768px


lg
≥992px


xl
≥1200px


xxl
≥1400px



Contributions #
All contributions are welcome!
Contributions are what make the open source community such an amazing place to be learned, inspire, and create. Any contributions you make are greatly appreciated.