搜索插件、代码仓与 APP 分类

GitHub 代码仓melvspace/expandable-bottom-bar

可扩展的底部栏

适用于 Flutter SDK 的可展开底部应用栏小部件

可扩展的底部栏 项目封面
星标
108
复刻
29
最近推送(UTC)
2024年8月13日
项目状态
已归档

原始 README

以下为英文项目原文快照,最新内容请访问 GitHub。

ExpandableBottomAppBar

pub package

Animatable bottom app bar with expandable sheet

Preview

preview

Getting Started

Add the plugin:

dependencies:
  ...
  expandable_bottom_bar: any

Basic Usage

Adding the widget

bottomNavigationBar: BottomExpandableAppBar(
        // Provide the bar controller in build method or default controller as ancestor in a tree 
        controller: bbc,
        expandedHeight: expandedHeight.value,
        horizontalMargin: 16,
        expandedBackColor: Theme.of(context).backgroundColor,
        // Your bottom sheet code here
        expandedBody: Center(
          child: Text("Hello world!"),
        ),
        // Your bottom app bar code here
        bottomAppBarBody: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Expanded(
                child: Text(
                  "Hello",
                  textAlign: TextAlign.center,
                ),
              ),
              Spacer(
                flex: 2,
              ),
              Expanded(
                child: Text(
                  "World",
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      )

Customization (Optional)

BottomExpandableAppBar

horizontalMargin - distance of sheet's sides from edge
bottomOffset - distance of top sheet's edge from top appbar's edge in closed state
shape - notch shape for FAB
appBarHeight - if you need change app bar height

bottomAppBarColor - background color of appbar container
or appBarDecoration - decoration of appbar container

expandedBackColor - background color of sheet container
or expandedDecoration - decoration of sheet container

Controls

BottomAppBarController
Settings

snap - if true sheet will snap to opened and closed state
dragLength - distance that pointer should travel for fully open/close the sheet

Callbacks

Should have dragLength defined
onDrag - use that with GestureDetector for swipe control
onDragEnd - use that with GestureDetector for swipe control

open - switch the sheet to closed state
close - switch the sheet to opened state
swap - if sheet is opened closes the sheet and vice versa

melvspace GitHub avatar
GitHub 作者

melvspace ↗

Flutter Mobile Developer and Game Developer Hobbyist. See my projects with links below

Art for IntrovertAlpha Centauri
语言DartJavaScriptSwiftKotlinObjective-C

使用的依赖

依赖清单 3 项

  • flutter{"sdk":"flutter"}
  • flutter_test开发依赖{"sdk":"flutter"}
  • mockito开发依赖^5.0.8

如何选择适合项目的代码仓?

先按使用场景筛选,再比较项目活跃情况,最后到原始仓库核对使用要求。

  1. 通过仓库名、作者或描述搜索,再按技术分类缩小范围。
  2. 结合星标、复刻与最近推送比较项目;星标反映社区关注,不代表质量保证。
  3. 使用前在 GitHub 核对 README、许可证与 Issues。

来源与维护

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗