Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alex-melnyk/flutter_advanced_segment

https://pub.dev/packages/flutter_advanced_segment
https://github.com/alex-melnyk/flutter_advanced_segment

flutter segment

Last synced: 10 days ago
JSON representation

https://pub.dev/packages/flutter_advanced_segment

Awesome Lists containing this project

README

        

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

![APP_ICON](./APP_ICON.png)

| | |
|---|---|
| ![Flutter Advanced Segment](./PREVIEW_01.png) | ![Flutter Advanced Segment](./PREVIEW_02.png) |

## Examples

### Regular Segment

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

### Customized Segment

```dart
// Create a controller
final _controller = AdvancedSegmentController('all');
//...
AdvancedSegment(
controller: _controller, // AdvancedSegmentController
segments: { // Map
'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(
color: Colors.black26,
blurRadius: 8.0,
),
],
),
//...
```

## AdvancedSegment Parameters
|Parameter|Description|Type|Default|
|:--------|:----------|:---|:------|
|`controller`|Manage AdvancedSegment state|*AdvancedSegmentController*||
|`segments`|Map of presented segments|*Map*|required|
|`activeStyle`||*TextStyle*|fontWeight: FontWeight.w600|
|`inactiveStyle`||*TextStyle*||
|`backgroundColor`||*Color*|Colors.black26|
|`sliderColor`||*Color*|Colors.white|
|`sliderOffset`||*double*|2.0|
|`borderRadius`||*BorderRadius*|Radius.circular(8.0)|
|`itemPadding`||*EdgeInsets*|EdgeInsets.symmetric(h: 15, v: 10)|
|`animationDuration`||*Duration*|Duration(milliseconds: 250)|
|`sliderShadow`||*BoxShadow*|Shadow|

# Demo

![Flutter Advanced Segment Demo](./DEMO.gif)