bootstrap_like_grid 0.0.2

An grid system similar to bootstrap

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:bootstrap_typography2/bootstrap_typography2.dart';
import 'package:bootstrap_like_grid/bootstrap_like_grid.dart';

void main() {
  runApp(
    MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: SingleChildScrollView(
            child: Column(
              children: [
                BSContainer(
                  children: [
                    BSRow(
                      children: [
                        BSColumn(
                          // default breakpoint trigger = col-12
                          children: [
                            H1(
                              BSTextParams(
                                "Default Container",
                                weight: FontWeight.bold,
                                textAlignment: TextAlign.start,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
                BSContainer(
                  maxBreakPoint: "",
                  children: [
                    BSRow(
                      children: [
                        BSColumn(
                          // default breakpoint trigger = col-12
                          children: [
                            H1(
                              BSTextParams(
                                "Max Breakpoint ''",
                                weight: FontWeight.bold,
                                textAlignment: TextAlign.start,
                                color: Colors.blue,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
                BSContainer(
                  maxBreakPoint: "sm",
                  children: [
                    BSRow(
                      children: [
                        BSColumn(
                          // default breakpoint trigger = col-12
                          children: [
                            H1(
                              BSTextParams(
                                "Max Breakpoint sm",
                                weight: FontWeight.bold,
                                textAlignment: TextAlign.start,
                                color: Colors.blue,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
                BSContainer(
                  maxBreakPoint: "md",
                  children: [
                    BSRow(
                      children: [
                        BSColumn(
                          // default breakpoint trigger = col-12
                          children: [
                            H1(
                              BSTextParams(
                                "Max Breakpoint md",
                                weight: FontWeight.bold,
                                textAlignment: TextAlign.start,
                                color: Colors.blue,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
                BSContainer(
                  maxBreakPoint: "lg",
                  children: [
                    BSRow(
                      children: <BSColumn>[
                        BSColumn(
                          // default breakpoint trigger = col-12
                          children: [
                            H1(
                              BSTextParams(
                                "Max Breakpoint lg",
                                weight: FontWeight.bold,
                                textAlignment: TextAlign.start,
                                color: Colors.blue,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
                BSContainer(
                  maxBreakPoint: "xl",
                  children: [
                    BSRow(
                      children: [
                        BSColumn(
                          // default breakpoint trigger = col-12
                          children: [
                            H1(
                              BSTextParams(
                                "Max Breakpoint xl",
                                weight: FontWeight.bold,
                                textAlignment: TextAlign.start,
                                color: Colors.blue,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
                BSContainer(
                  maxBreakPoint: "xxl",
                  children: [
                    BSRow(
                      children: [
                        BSColumn(
                          // default breakpoint trigger = col-12
                          children: [
                            H1(
                              BSTextParams(
                                "Max Breakpoint xxl",
                                weight: FontWeight.bold,
                                textAlignment: TextAlign.start,
                                color: Colors.blue,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
                BSContainer(
                  fluid: true,
                  children: [
                    BSRow(
                      children: [
                        BSColumn(
                          // default breakpoint trigger = col-12
                          children: [
                            H1(
                              BSTextParams(
                                "Fluid Container",
                                weight: FontWeight.bold,
                                textAlignment: TextAlign.start,
                                color: Colors.amber,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
                BSContainer(
                  children: [
                    Builder(
                      builder: (context) {
                        return BSRow(
                          children: [
                            BSColumn(
                              breakPointTriggers: [
                                "col-12",
                                "col-md-6",
                              ],
                              crossAxisAlignment: BSBreakPoints.valueBasedOnBreakPoint(
                                context: context,
                                map: <String, CrossAxisAlignment>{
                                  "": CrossAxisAlignment.start,
                                  "sm": CrossAxisAlignment.center,
                                  "md": CrossAxisAlignment.end,
                                  "lg": CrossAxisAlignment.end,
                                  "xl": CrossAxisAlignment.start,
                                  "xxl": CrossAxisAlignment.start,
                                },
                              ),
                              children: [
                                H1(
                                  BSTextParams(
                                    "Columns and ",
                                    weight: FontWeight.bold,
                                    textDecoration: TextDecoration.underline,
                                    color: Colors.red,
                                  ),
                                ),
                              ],
                            ),
                            BSColumn(
                              breakPointTriggers: [
                                "col-12",
                                "col-md-6",
                              ],
                              crossAxisAlignment: BSBreakPoints.valueBasedOnBreakPoint(
                                context: context,
                                map: <String, CrossAxisAlignment>{
                                  "": CrossAxisAlignment.start,
                                  "sm": CrossAxisAlignment.center,
                                  "md": CrossAxisAlignment.start,
                                  "lg": CrossAxisAlignment.start,
                                  "xl": CrossAxisAlignment.end,
                                  "xxl": CrossAxisAlignment.end,
                                },
                              ),
                              children: [
                                H1(
                                  BSTextParams(
                                    "Rows Demo",
                                    weight: FontWeight.bold,
                                    textDecoration: TextDecoration.underline,
                                    color: Colors.deepPurple,
                                  ),
                                ),
                              ],
                            ),
                          ],
                        );
                      },
                    ),
                  ],
                ),
                BSContainer(
                  children: <Widget>[
                    BSRow(
                      children: <BSColumn>[
                        BSColumn(
                          children: <Widget>[
                            Builder(
                              builder: (context) {
                                return BSBreakPoints.valueBasedOnBreakPoint(
                                  context: context,
                                  map: const <String, Text>{
                                    "": Text("Smallest"),
                                    "sm": Text("SM"),
                                    "md": Text("MD"),
                                    "lg": Text("LG"),
                                    "xl": Text("XL"),
                                    "xxl": Text("XXL"),
                                  },
                                );
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}