搜索插件、代码仓与 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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。