flutter_bootstrap5

FlutterBootstrap5 🚀

This package is used to support the creation of responsive web applications with Flutter. It is based on the well-known CSS framework Bootstrap 5 and offers many features that can also be found in Bootstrap.

If you like this package it would be nice if you would give a Like ❤️ and a Star ⭐ to support the project!

If you want to have a quick overview of the most important functions and test them directly, you can do so here

FLUTTER BOOTSTRAP 5 EXAMPLE WEBSITE

Small Example

Getting Started

Configure Flutter Bootstrap5

To use Flutter Bootstrap5 anywhere in your app, you don't have to do anything but wrap your MaterialApp with the [FlutterBootstrap5] widget.

        FlutterBootstrap5(
            builder: (ctx) => MaterialApp(...),
        );

App Theming

You have various possibilities to customize Flutter Bootstrap5 for your needs. You can also leave it at the default values to get the default behavior of a Bootstrap5 app.

Currently the following customization options are supported:

BreakPoints

To set your own BreakPoints, you can simply pass the BreakPoints class to the [FlutterBootstrap5] widget. By default the current BreakPoints of Bootstrap5 CSS are used

        class _BootstrapBreakPoints {
          static const BreakPoint xs = BreakPoint(minWidth: 0, maxWidth: 576);
          static const BreakPoint sm = BreakPoint(minWidth: 576, maxWidth: 768);
          static const BreakPoint md = BreakPoint(minWidth: 768, maxWidth: 992);
          static const BreakPoint lg = BreakPoint(minWidth: 992, maxWidth: 1200);
          static const BreakPoint xl = BreakPoint(minWidth: 1200, maxWidth: 1400);
          static const BreakPoint xxl =
          BreakPoint(minWidth: 1400, maxWidth: double.infinity);
        }

Container BreakPoints

Beside the normal BreakPoints you can also define your own BreakPoints for the [FB5Container]. These determine which width a [FB5Container] should have at a certain BreakPoint.

By default the current Container BreakPoints of Bootstrap5 CSS are used

      class _BootstrapContainerBreakPoints {
        static const double xs = double.infinity;
        static const double sm = 540;
        static const double md = 720;
        static const double lg = 960;
        static const double xl = 1140;
        static const double xxl = 1320;
      }

Default Fontsize

With the parameter defaultFontSize you can specify the default font size to be used for the calculation of "rem" values. Bootstrap CSS uses rem to calculate margins, paddings and also font size. Similarly, these values are also calculated in Flutter Bootstrap5 depending on the defaultFontSize.

The default value is 16.0

Typography

Flutter Bootstrap5 uses a font size calculation mechanism based on Bootstrap CSS. So font sizes change dynamically depending on the screen size.

To customize this behavior you can pass the [FB5Typography] class to FlutterBootstrap5.

Use the theme in your MaterialApp

After configuring [FlutterBootstrap5] to your liking, you can now pass the theme to your MaterialApp to take full advantage of Flutter Bootstrap 5.

        MaterialApp(
            title: 'Flutter Bootstrap5 Demo',
            theme: BootstrapTheme.of(ctx).toTheme( [PASS YOUR THEME TO OVERRIDE BOOTSTRAP THEME IF YOU WANT TO] ),
            home: const Home(),
        ),

So now let's talk about the features

Currently supported Bootstrap classes

NOTE! Responsive support indicates whether the use of -xs, -sm, -md, -lg, -xl, and-xxl is supported

Description	Base class	Variations	Responsive Support
Width of a column	col	col-{1-12},	✓
Columns per row	row-cols	row-cols-{1-*},	✓
Padding	p	p-{1-5},p{t,b,s,e,x,y}-{1-5},p{t,b,s,e,x,y}-custom-{0.0-*}	✓
Margin	m	m-{1-5},p{t,b,s,e,x,y}-{1-5},m{t,b,s,e,x,y}-custom-{0.0-*}	✓
Gutter	g	g-{1-5},g{x,y}-{1-5},g{x,y}-custom-{0.0-*}	✓
Order	order	order-{0-*}	✓
Display	d	d-none, d-block,	✓
Align Items	align-items	align-items-{start, center, end}	✓
Align Self	align-self	align-self-{start, center, end}	✓
Justify Content	justify-content	justify-content-{start, around, between, evenly, center, end}	✓

Widgets

FB5Container

FB5 containers are the Flutter implementation of Bootstrap Container. You can test the resize behavior of the containers on the FLUTTER BOOTSTRAP 5 EXAMPLE WEBSITE.

The following container types are supported:

    FB5Container(child: child);
    FB5Container.sm(child: child);
    FB5Container.md(child: child);
    FB5Container.lg(child: child);
    FB5Container.xl(child: child);
    FB5Container.xxl(child: child);
    FB5Container.fluid(child: child);

FB5Row

FB5Row are the Flutter implementation of Bootstrap Row. They get a list of FB5Col which are then arranged and displayed according to the classNames.

    FB5Row(
        classNames: 'mt-5 px-xs-3 px-lg-0 gx-4',
        children: [
            FB5Col(
                classNames: 'col-12',
                child: const GettingStarted(),
            ),
            FB5Col(
                classNames: 'col-12 mt-5',
                child: const Containers(),
            ),
            FB5Col(
                classNames: 'mt-5',
                child: const TestingArea(),
            ),
            FB5Col(
                classNames: 'my-5',
                child: const GridArea(),
            ),
       ],
  ),

FB5Col

FB5Col are the flutter implementation of the Bootstrap Col. They should be used inside a FB5Row and change their representation according to the classNames.

        FB5Col(
            classNames: 'col-12 col-lg-6 col-xl-4 m-3 m-xl-2 d-none d-sm-block',
            child: child,
        ),

FB5Grid

FB5Grid are used to represent a grid system of your children. They should not contain FB5Cols. FB5Grid automatically adjusts the size of the children so that a row of children always has the same height.

    FB5Grid(
      classNames: 'row-cols-3',
      children: [
          ...
      ],
    ),

Helper

BootstrapTheme

Information about the current screen size and breakpoint is returned by the BootstrapTheme. For this, nothing more is necessary than to execute the following function.

    final screenData = BootstrapTheme.of(context);

It also offers useful functions. For example, the query whether the current breakpoint is larger or smaller than a certain breakpoint.

    final screenData = BootstrapTheme.of(context);
    screenData.currentBreakPoint.isBreakPointOrSmaller(screenData.breakPoints.xl);

    screenData.currentBreakPoint.isBreakPointOrLarger(screenData.breakPoints.xl);

Functions

There are some helper functions to add bootstrap functionality to Flutter widgets:

    // e.g. add a 4rem margin-top to a Container
    Container(
      margin: margin(context, 'mt-4'),
    );

    // e.g. add a 2rem padding to a Container
    Container(
      margin: padding(context, 'p-2'),
    );
    
    // add a borderRadius to a Container
    Container(
      decoration: BoxDecoration(
        borderRadius: rounded(context), // rounded1 rounded2 rounded3 rounded4 rounded5 roundedPill
      ),
    );

    // add a border to a Container
    Container(
      decoration: BoxDecoration(
        border: borderPrimary(context), // borderSecondary, borderSuccess, borderDanger, etc...
      ),
    );


    // responsiveValue & responsiveValueOrNull
    // if you need different values for different breakPoints
    final width = responsiveValue<double>(context, defaultValue: 300.0, md: 350.0, xl: 400.0);