flutter_bootstrap

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Flutter Bootstrap provides a partial implementation of the Bootstrap Grid system within Flutter, enabling developers to create responsive layouts with ease. It offers a familiar grid structure inspired by Bootstrap, supporting flexible column and row arrangements across different screen sizes. This package simplifies responsive design without requiring custom layout logic, making it ideal for projects needing consistent, scalable UIs. Built with Flutter's widget system, it integrates smoothly into existing apps on Android, iOS, Web, macOS, Windows, and Linux.

Use cases

Building responsive dashboards
Creating mobile-first layouts
Designing cross-platform web interfaces
Implementing grid-based forms
Simplifying responsive navigation bars

Key features

Bootstrap-inspired grid system
Flexible column and row alignment
Responsive breakpoints
Cross-platform compatibility
Easy integration with Flutter widgets

Suitable for

Developers familiar with Bootstrap
Projects requiring responsive layouts
Cross-platform app development
Rapid UI prototyping
Teams prioritizing consistency across devices

Considerations

Partial implementation (not full Bootstrap)
Limited to grid system only
May require additional styling for complex designs
No built-in components beyond grid
Depends on manual handling of non-grid elements

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

A partial implementation of Bootstrap Grid system in Flutter for Responsive Layout.

Getting Started

You should ensure that you add the following dependency in your Flutter project.

dependencies:
 flutter_bootstrap: "^2.0.0"

You should then run flutter packages upgrade or update your packages in IntelliJ.

In your Dart code, to use it:

import 'package:flutter_bootstrap/flutter_bootstrap.dart';

Documentation

This package exposes 4 new Widgets:

BootstrapContainer
BootstrapRow
BootstrapCol
BootstrapVisibility

...and a series of helper methods:

bootstrapGridParameters
bootstrapPrefixBasedOnWidth
bootstrapMaxWidthNonFluid
bootStrapValueBasedOnSize

It implements the following Bootstrap4 features:

.container
.container-fluid
.row
.col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-*
.offset-*, .offset-sm-*, .offset-md-*, .offset-lg-*, .offset-xl-*
.order-*, .order-sm-*, .order-md-*, .order-lg-*, .order-xl-*
conditional visibility based on device width and column definition

Full documentation and examples can be found on my website.

Example

An example can be found in the example folder. Check it out.

Search packages, repositories and app categories