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

animated_segment 封面
插件详情v0.0.4

animated_segment

该包为您提供一种现代的、带有动画效果的精美分段。使用弹性动画方式展示选项卡的选择。

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

安装插件

flutter pub add animated_segment

插件介绍

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

animated_segment 包提供了一种现代且视觉上吸引人的分段控件,具有弹性动画效果,用于标签选择。它通过在各个分段之间提供流畅、动态的过渡来增强用户体验,非常适合交互式界面。该包轻量级,并兼容多个平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。通过 Flutter pub add 进行最少的设置,开发者可以轻松地将优雅、响应式的分段控件集成到他们的应用中。

适合场景

  • 交互式标签导航
  • 动态表单筛选
  • 可自定义的仪表板标签
  • 用户偏好选择器
  • 增强的用户界面反馈
  • 以移动设备为先的界面设计

主要特点

  • 标签选择时的弹性动画
  • 跨平台兼容性
  • 与 Flutter 的简单集成
  • 可自定义外观
  • 平滑的过渡效果
  • 轻量且高效

适合对象

  • 寻求现代 UI 组件的 Flutter 开发人员
  • 需要引人入胜的标签交互的应用程序
  • 注重设计的应用程序
  • 响应式移动和Web界面
  • 希望使用最少代码实现丰富动画的开发者

使用建议

  • 可能需要额外的样式设置以实现复杂设计
  • 在低端设备上,当有大量分段时的性能影响
  • 仅限基本段落功能,不支持高级自定义选项
  • 不适用于非标签页导航模式

原始 README

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

animated_segment

animated_segment version MIT License MIT License

This package will animates a segment. Package provides you a modern animated fancy segment. Show selection of tab using elastic way animation.

Animated Segment

Animated Segment

Usage

Example
AnimatedSegment(
  segmentNames: [Strings.tab_1, Strings.tab_2, Strings.tab_3],
  onSegmentChanged: (index) {
    print('Selected Segment Index is: $index');
  },
  backgroundColor: AppColors.bgColor,
  segmentTextColor: AppColors.white,
  rippleEffectColor: AppColors.primary,
  selectedSegmentColor: AppColors.primary,
);
Required parameters
segmentNames:

This property takes List as a parameter and segmentNames is useful to display items in segment.

onSegmentChanged:

Call back called when the user select the new segment and return the selected segment index. Index for the initial selected segment is 0.

Optional parameters
initialSegment:

This property takes int value as a parameter. This is use to set the initial segment from [segmentNames].

backgroundColor:

This property takes Color value as a parameter. You can change the background color of animated segment. default value is Color(0xff8AADFB)

segmentTextColor:

This property takes Color value as a parameter. You can change the text color of segmented text color. default value is Color(0xff0217FD)

rippleEffectColor:

This property takes Color value as a parameter. You can change the ripple color of segment. default value is Colors.white

selectedSegmentColor:

This property takes Color value as a parameter. You can change the selected segment color of animated segment. default value is Colors.white

Guideline for contributors

Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.

Guideline to report an issue/feature request

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

  • Library version
  • Code snippet
  • Logs if applicable
  • Device specification like (Manufacturer, OS version, etc)
  • Screenshot/video with steps to reproduce the issue

LICENSE!

Animated Segment is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to sales@mindinventory.com And do let us know if you have any questions or suggestion regarding our work.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。