half_circle_scroll 0.0.2

A customizable half-circle scroll widget for Flutter.

Half Circle Scroll

A customizable Flutter widget that displays items in a scrollable half-circle layout with smooth animations and multiple orientation options.

Features

• ✨ Multiple Orientations: Vertical, horizontal, and inverted variants
• 🎨 Customizable Appearance: Colors, shapes, shadows, and text styles
• 📱 Responsive Design: Automatically adapts to different screen sizes
• 🔄 Smooth Animations: Configurable animation curves and durations
• 🎯 Selection Callbacks: Get notified when items are selected
• 🛠 Custom Item Builder: Build your own item widgets
• 🌈 Multiple Item Shapes: Rectangle, circle, rounded rectangle, or custom

Screenshots

Vertical	Horizontal	Inverted Vertical	Inverted Horizontal

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  half_circle_scroll: ^1.0.0

Then run:

flutter pub get

Usage

Basic Usage

import 'package:half_circle_scroll/half_circle_scroll.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HalfCircleScroll(
      items: [
        HalfCircleScrollItem(text: 'Item 1'),
        HalfCircleScrollItem(text: 'Item 2'),
        HalfCircleScrollItem(text: 'Item 3'),
        HalfCircleScrollItem(text: 'Item 4'),
        HalfCircleScrollItem(text: 'Item 5'),
      ],
      onSelectionChanged: (index) {
        print('Selected item at index: $index');
      },
    );
  }
}

Advanced Configuration

HalfCircleScroll(
  items: items,
  config: HalfCircleScrollConfig(
    radius: 200.0,
    orientation: HalfCircleOrientation.horizontal,
    itemShape: HalfCircleItemShape.circle,
    selectedColor: Colors.orange,
    unselectedColor: Colors.blue,
    itemWidth: 100.0,
    itemHeight: 100.0,
    animationDuration: Duration(milliseconds: 500),
    animationCurve: Curves.bounceOut,
  ),
  onSelectionChanged: (index) {
    // Handle selection
  },
)

Custom Item Builder

HalfCircleScroll(
  items: items,
  itemBuilder: (context, index, item, isSelected, scale, opacity) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: isSelected 
            ? [Colors.orange, Colors.red] 
            : [Colors.blue, Colors.purple],
        ),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Center(
        child: Text(
          item.text ?? '',
          style: TextStyle(
            color: Colors.white,
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ),
    );
  },
)

Configuration Options

HalfCircleScrollConfig

Property	Type	Default	Description
radius	double	150.0	Radius of the circular path
scrollSensitivity	double	0.01	Sensitivity of scroll gestures
maxAngle	double	pi / 2	Maximum angle for visible items
itemWidth	double	120.0	Width of each item
itemHeight	double	60.0	Height of each item
orientation	HalfCircleOrientation	vertical	Orientation of the half circle
itemShape	HalfCircleItemShape	roundedRectangle	Shape of the items
selectedColor	Color	Colors.orange	Color of selected items
unselectedColor	Color	Colors.blue	Color of unselected items
animationDuration	Duration	300ms	Animation duration for transitions

Orientations

• HalfCircleOrientation.vertical - Items scroll up/down in a right-facing arc
• HalfCircleOrientation.horizontal - Items scroll left/right in an upward-facing arc
• HalfCircleOrientation.invertedVertical - Items scroll up/down in a left-facing arc
• HalfCircleOrientation.invertedHorizontal - Items scroll left/right in a downward-facing arc

Item Shapes

• HalfCircleItemShape.rectangle - Rectangular items
• HalfCircleItemShape.circle - Circular items
• HalfCircleItemShape.roundedRectangle - Rounded rectangular items
• HalfCircleItemShape.custom - Custom shaped items

Example App

Check out the example folder for a complete demo application showcasing all features.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

See CHANGELOG.md for a list of changes in each version.