Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
animated_segment cover
Package detailsv0.0.4

animated_segment

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

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
72
Likes
72
Pub points
150

Install package

flutter pub add animated_segment

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

The animated_segment package offers a modern, visually appealing segmented control with elastic animation effects for tab selection. It enhances user experience by providing smooth, dynamic transitions between segments, making it ideal for interactive interfaces. The package is lightweight and compatible across multiple platforms including Android, iOS, Web, macOS, Windows, and Linux. With minimal setup via Flutter pub add, developers can easily integrate elegant, responsive segment controls into their apps.

Use cases

  • Interactive tab navigation
  • Dynamic form filters
  • Customizable dashboard tabs
  • User preference selectors
  • Enhanced UI feedback
  • Mobile-first interface design

Key features

  • Elastic animation on tab selection
  • Cross-platform compatibility
  • Simple integration with Flutter
  • Customizable appearance
  • Smooth transition effects
  • Lightweight and performant

Suitable for

  • Flutter developers seeking modern UI components
  • Apps requiring engaging tab interactions
  • Design-focused applications
  • Responsive mobile and web interfaces
  • Developers wanting minimal code for rich animations

Considerations

  • May require additional styling for complex designs
  • Performance impact on low-end devices with many segments
  • Limited to basic segment functionality without advanced customization options
  • Not suitable for non-tab-based navigation patterns

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Animation & Transition

Source repository

Projects using this package

No data available yet.