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

slidable_bar 封面
插件详情v1.1.1

slidable_bar

一个用于显示侧边栏并隐藏它以及自定义点击行为的Flutter包。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
61
喜欢数
48
Pub 分数
150

安装插件

flutter pub add slidable_bar

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

SlidableBar 是一个 Flutter 包,可让开发者在多个平台上实现可自定义的滑动侧边栏导航组件。它允许用户通过流畅的动画显示或隐藏侧边栏,提供灵活的设计和交互体验。该包支持对侧边栏外观和行为的各种自定义选项,非常适合需要直观导航的应用程序。它可以无缝集成到 Flutter 项目中,并适用于 Android、iOS、Web、macOS、Windows 和 Linux。

适合场景

  • 实现可折叠的导航菜单
  • 为移动设备和网页创建响应式布局
  • 添加侧边栏控制的滑动手势
  • 设计自定义抽屉界面
  • 构建仪表板式应用程序
  • 通过动画过渡提升用户体验

主要特点

  • 平滑滑动动画
  • 可自定义侧边栏外观
  • 支持滑动手势
  • 跨平台兼容性
  • 与现有 Flutter 应用轻松集成
  • 可配置的打开/关闭行为

适合对象

  • 开发导航密集型应用的开发者
  • 寻求交互式UI组件的设计人员
  • 面向多个平台的项目
  • 需要轻量级导航解决方案的应用程序
  • 使用 Flutter 进行全栈开发的团队
  • 原型设计动态UI布局

使用建议

  • 可能需要额外的样式才能实现复杂的设计
  • 侧边栏内包含大量小部件时的性能影响
  • 与其他包相比,内置主题有限
  • 需要仔细处理手势冲突
  • 未针对非常大的导航项进行优化
  • 最适合中等规模的导航结构

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

slidable_bar

A Flutter side bar slider can be with any widget you want

review

Features

  • The SlidableBar can have four positions: top, bottom, right and left.
  • Customizable clicker, you can change the clicker widget with what you want.
  • Just like Flutter's Drawer, but with new way.

Things to note

  • The SlidableBar should have specific width and height, it works fine with scaffold's body.
  • The SlidableBar doesn't create it's own context, so it will appear under floating action button if you add one.

Usage

    final SlidableBarController controller = SlidableBarController(initialStatus: true);
    
    SlidableBar(
        size: 50, // this will be bar's height in case Side is bottom or top and width in case Side is left or right 
        children: <Widget>[], // here is the widgets inside the bar
        child: Container(), // here is your widget that will be under the bar 
        // optional
        frontColor: Colors.green, // the color of the cycle inside the default clicker
        slidableController: controller, // the contoller to change and listen to the bar status
        barRadius: const BorderRadius.circular(10.0), // the contoller to change and listen to the bar status
        side: Side.bottom, // Side.right is the default
        clickerPosition: 1.0, // the position of the clicker, 0.0 is the default
        clickerSize: 60, // the sizer of the default clicker, 55 is the default
        onChange: (int index){
            print(index); // this will print the index of the widget you clicked inside the bar
        },
        duration: Duration(milliseconds: 500), // the duration of the animation, (300 mil) is the default
        isOpenFirst: true, // the initial state of the bar, false is default
        backgroundColor: Colors.black, // primary color is default
        curve: Curves.ease, // the animation curve, linear is defualt
        clicker: Icon(Icons.arrow_forward_ios), // this will build instead of the default clicker
      )

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  slidable_bar: "^1.1.0"

Then run $ flutter pub get. In your library, add the following import:

import 'package:slidable_bar/slidable_bar.dart';

Preview Images (The positions)

right left

top bottom

Custom Clicker

custom-clicker

Author

Mahmoud Haj Ali - GitHub

所属分类

源码仓库

使用此插件的项目

暂无相关数据。