FLUTTER ECOSYSTEM

boeledi/flutter_bootstrap

Flutter Bootstrap 網格系統

flutter_bootstrap 專案封面
Stars
86
Forks
20
最近推送(UTC)
2022年4月28日
專案狀態
未封存
Didier Boelens GitHub avatar
GITHUB User

Didier Boelens ↗

AI & Flutter enthusiast - Exploring the potential and future of Artificial Intelligence

語言Dart

此儲存庫發佈的套件

使用的依賴

依賴清單 1 項
  • flutter{"sdk":"flutter"}

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 README

flutter_bootstrap

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

https://raw.githubusercontent.com/boeledi/flutter_bootstrap/HEAD/flutter_bootstrap.gif


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.