flutter_advanced_segment

An advanced segment widget, that can be fully customized with bunch of properties, just try it and enjoy!

State 1State 2
Flutter Advanced Segment State 1Flutter Advanced Segment State 2

Examples

Regular Segment

// Create a controller
final _controller = AdvancedSegmentController('all');
//...
AdvancedSegment(
  controller: _controller, // AdvancedSegmentController
  segments: { // Map<String, String>
    'all': 'All',
    'starred': 'Starred',
  },
),
//...

Customized Segment

// Create a controller
final _controller = AdvancedSegmentController('all');
//...
AdvancedSegment(
  controller: _controller, // AdvancedSegmentController
  segments: { // Map<String, String>
    'all': 'All',
    'primary': 'Primary',
    'secondary': 'Secondary',
    'tertiary': 'Tertiary',
  },
  activeStyle: TextStyle( // TextStyle
    color: Colors.white,
    fontWeight: FontWeight.w600,
  ),
  inactiveStyle: TextStyle( // TextStyle
    color: Colors.white54,
  ),
  backgroundColor: Colors.black26, // Color
  sliderColor: Colors.white, // Color
  sliderOffset: 2.0, // Double
  borderRadius: const BorderRadius.all(Radius.circular(8.0)), // BorderRadius
  itemPadding: const EdgeInsets.symmetric( // EdgeInsets
    horizontal: 15,
    vertical: 10,
  ),
  animationDuration: Duration(milliseconds: 250), // Duration
  sliderShadow: const <BoxShadow>[
    BoxShadow(
      color: Colors.black26,
      blurRadius: 8.0,
    ),
  ],
),
//...

AdvancedSegment Parameters

ParameterDescriptionTypeDefault
controllerManage AdvancedSegment stateAdvancedSegmentController
segmentsMap of presented segmentsMap<String, String>required
activeStyleTextStylefontWeight: FontWeight.w600
inactiveStyleTextStyle
backgroundColorColorColors.black26
sliderColorColorColors.white
sliderOffsetdouble2.0
borderRadiusBorderRadiusRadius.circular(8.0)
itemPaddingEdgeInsetsEdgeInsets.symmetric(h: 15, v: 10)
animationDurationDurationDuration(milliseconds: 250)
sliderShadowBoxShadowShadow

Demo

Flutter Advanced Segment Demo

Libraries

flutter_advanced_segment