flutter custom slider

main.dart

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: AppScrollBehavior(),
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        padding: const EdgeInsets.all(24),
        child: Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Center(
                child: CustomSlider(
                  selectedIndex: 2,
                  items: const [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                  onChange: (index, value) {
                    print("selected $index - $value");
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class AppScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

class CustomSlider extends StatelessWidget {
  final int selectedIndex;
  final List<dynamic> items;
  final Function(int index, dynamic value) onChange;

  const CustomSlider(
      {this.selectedIndex = 0,
      required this.items,
      required this.onChange,
      Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      blendMode: BlendMode.dstOut,
      shaderCallback: (Rect bounds) {
        return RadialGradient(
          center: Alignment.center,
          radius: 4,
          colors: <Color>[Colors.transparent, Colors.white.withOpacity(0.99)],
        ).createShader(bounds);
      },
      child: Column(
        mainAxisSize: MainAxisSize.min,
        
        children: [
          SizedBox(
            height: 32,
            child: PageView(
              physics: const BouncingScrollPhysics(),
              controller: PageController(
                  viewportFraction: 1 / 7, initialPage: selectedIndex),
              onPageChanged: (value) => onChange(value, items[value]),
              children: List.generate(
                items.length,
                (index) => Center(
                  child: Text(
                    items[index].toString(),
                    style: const TextStyle(
                        fontSize: 16,
                        color: Colors.white,
                        fontWeight: FontWeight.w400),
                  ),
                ),
              ),
            ),
          ),
          SizedBox(
            width: double.maxFinite,
            height: 10,
            child: Stack(
              children: [
                Align(
                  child: Container(
                    color: Colors.grey,
                    width: double.maxFinite,
                    height: 1.5,
                  ),
                ),
                Align(
                  child: Container(
                    width: 1.5,
                    height: double.maxFinite,
                    color: Colors.red,
                  ),
                  alignment: Alignment.center,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}