搜尋套件、儲存庫與 APP 分類

flutter_bootstrap 封面
套件詳情v2.0.0

flutter_bootstrap

Flutter 中用於響應式佈局的 Bootstrap 網格系統的部分實作。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
888
喜歡數
185
Pub 分數
150

安裝套件

flutter pub add flutter_bootstrap

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Flutter Bootstrap 在 Flutter 中提供了 Bootstrap 網格系統的部分實作,讓開發者能輕鬆建立響應式佈局。它提供了一種受 Bootstrap 啟發的熟悉網格結構,支援在不同螢幕尺寸上靈活排列欄位與列。此套件無需自訂佈局邏輯即可簡化響應式設計,非常適合需要一致且可擴展 UI 的專案。基於 Flutter 的元件系統建構,可順暢整合至 Android、iOS、Web、macOS、Windows 與 Linux 上的現有應用中。

適用情境

  • 構建響應式儀表板
  • 建立行動裝置優先的版面
  • 設計跨平台網路介面
  • 實現基於網格的表單
  • 簡化響應式導航欄

主要特色

  • 受Bootstrap啟發的網格系統
  • 靈活的欄和列對齊
  • 響應式斷点
  • 跨平台相容性
  • 與 Flutter 小部件輕鬆整合

適合對象

  • 熟悉 Bootstrap 的開發人員
  • 需要響應式佈局的專案
  • 跨平台應用程式開發
  • 快速UI原型設計
  • 優先考慮跨裝置的一致性

使用建議

  • 部分實現(非完整 Bootstrap)
  • 僅限網格系統
  • 可能需要額外的樣式才能實現複雜的設計
  • 除了網格外,沒有內建元件
  • 依賴於對非網格元素的手動處理

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

flutter_bootstrap

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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。