import 'package:flutter/material.dart';

void main() {
  runApp(const SampleCode());
}

class SampleCode extends StatelessWidget {
  const SampleCode({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
          appBar: AppBar(title: const Text('Issue')),
          body: Padding(
            padding: const EdgeInsets.symmetric(vertical: 30),
            child: Column(
              children: [
                NumberSeclectBar(
                  title: "ScrollTest",
                  value: 1,
                  onChanged: (_) {},
                ),
                const SizedBox(height: 10),
                NumberSeclectBar(
                  title: "ScrollTest",
                  value: 1,
                  onChanged: (_) {},
                ),
                const SizedBox(height: 10),
                NumberSeclectBar(
                  title: "ScrollTest",
                  value: 1,
                  onChanged: (_) {},
                ),
                const SizedBox(height: 10),
                NumberSeclectBar(
                  title: "ScrollTest",
                  value: 1,
                  onChanged: (_) {},
                ),
                const SizedBox(height: 10),
                NumberSeclectBar(
                  title: "ScrollTest",
                  value: 1,
                  onChanged: (_) {},
                ),
              ],
            ),
          ),
      ),
    );
  }
}

class NumberSeclectBar extends StatelessWidget {
  const NumberSeclectBar({
    Key? key,
    required this.title,
    required this.value,
    required this.onChanged,
    this.required = true,
    this.subtitle,
  }) : super(key: key);

  final String title;
  final String? subtitle;
  final int value;
  final ValueChanged<int> onChanged;
  final bool required;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return SizedBox(
      height: 45,
      child: Row(
        children: [
          SizedBox(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(title),
                if (subtitle != null)
                  Text(
                    subtitle!,
                    style: theme.textTheme.bodySmall,
                  ),
              ],
            ),
            width: 100,
          ),
          const SizedBox(width: 10),
          Expanded(
            child: ClipPath(
              clipper: CustomClip(),
              child: ListView.builder(
                padding: EdgeInsets.zero,
                scrollDirection: Axis.horizontal,
                clipBehavior: Clip.none,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.only(right: 10),
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: InkWell(
                        onTap: () {
                          if (required) {
                            onChanged(index + 1);
                            return;
                          }
                          onChanged(index);
                        },
                        borderRadius: BorderRadius.circular(10),
                        child: AnimatedContainer(
                          duration: const Duration(milliseconds: 300),
                          curve: Curves.ease,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color:
                                (required ? value == index + 1 : value == index)
                                    ? theme.colorScheme.primary
                                    : theme.colorScheme.surface,
                            boxShadow: [
                              BoxShadow(
                                blurRadius: 12,
                                color: theme.colorScheme.primary.withOpacity(1),
                              ),
                            ],
                          ),
                          child: Center(
                            child: Text(
                              required
                                  ? (index + 1).toString()
                                  : index.toString(),
                              style: theme.textTheme.bodyMedium!.copyWith(
                                color: (required
                                        ? value == index + 1
                                        : value == index)
                                    ? theme.colorScheme.onPrimary
                                    : theme.colorScheme.onSurface,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class CustomClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.addRect(
      Rect.fromCenter(
        center: size.center(Offset.zero),
        width: size.width + 20,
        height: size.height + 30,
      ),
    );
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}