slider

.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:spot/constant.dart';
import 'package:google_fonts/google_fonts.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: kprimarycolor,
        title: Text(
          "SPOT-Me",
          style: GoogleFonts.merriweather(
            fontWeight: FontWeight.w700,
            fontSize: 23.r,
            color: kDefaultWhite,
          ),
        ),
        centerTitle: true,
        leading: Image.asset(
          'assets/images/backk.png',
          width: 5.r,
          height: 13.r,
        ),
        actions: [],
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            height: 99.r,
          ),
          Text(
            "SPOT-Me",
            textAlign: TextAlign.center,
            style: GoogleFonts.merriweather(
              fontWeight: FontWeight.w700,
              fontSize: 25.0.r,
              height: 32 / 24.0,
              color: kDefaultWhite,
            ),
          ),
          SizedBox(
            height: 9.r,
          ),
          Padding(
            padding: EdgeInsets.only(left: 51.r, right: 51.r),
            child: Text(
              "Podcasts helps to train the mind, similar to the way that fitness is an approach to training the body. ",
              textAlign: TextAlign.center,
              style: GoogleFonts.merriweather(
                  fontWeight: FontWeight.w300,
                  fontSize: 14.0.r,
                  height: 23 / 12.0,
                  color: kDefaultWhite,
                  letterSpacing: -0.3),
            ),
          ),
          Spacer(),
          PrimaryButton(text: "Get started"),
          SizedBox(
            height: 14.4,
          )
        ],
      ),
    );
  }
}

class PrimaryButton extends StatelessWidget {
  PrimaryButton({
    Key? key,
    required this.text,
    Function? onPressed,
  }) : super(key: key);
  Function? onPressed;
  String text;
  @override
  Widget build(BuildContext context) {
    return TextButton(
        onPressed: () => onPressed?.call(),
        child: Container(
            width: 212.r,
            height: 45.r,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(18), color: Colors.black),
            child: Center(
              child: Text(
                text,
                style: GoogleFonts.merriweather(
                  fontWeight: FontWeight.w400,
                  fontSize: 14.r,
                  color: kDefaultWhite,
                ),
              ),
            )));
  }
}

class OnboardView extends StatefulWidget {
  const OnboardView({Key? key}) : super(key: key);

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

class _OnboardViewState extends State<OnboardView> {
  Position? currentPosition;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        title: Text(
          "SPOT-Me",
          style: GoogleFonts.merriweather(
            fontWeight: FontWeight.w700,
            fontSize: 23.r,
            color: kDefaultWhite,
          ),
        ),
        centerTitle: true,
        leading: Image.asset(
          'assets/images/back.png',
          width: 5.r,
          height: 13.r,
        ),
        actions: [],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 19.r,
            ),
            SelectViews(
              onChanged: (value) {
                setState(() {
                  currentPosition = value;
                });
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                selectedChangeContainer(
                  isSelected: currentPosition == Position.first ? true : false,
                ),
                SizedBox(
                  width: 10,
                ),
                selectedChangeContainer(
                  isSelected: currentPosition == Position.second ? true : false,
                ),
                SizedBox(
                  width: 10,
                ),
                selectedChangeContainer(
                  isSelected: currentPosition == Position.third ? true : false,
                ),
              ],
            ),
            SizedBox(
              height: 99.r,
            ),
            Text(
              "SPOT-Me",
              textAlign: TextAlign.center,
              style: GoogleFonts.merriweather(
                fontWeight: FontWeight.w700,
                fontSize: 25.0.r,
                height: 32 / 24.0,
                color: kDefaultWhite,
              ),
            ),
            SizedBox(
              height: 9.r,
            ),
            Padding(
              padding: EdgeInsets.only(left: 51.r, right: 51.r),
              child: Text(
                "Podcasts helps to train the mind, similar to the way that fitness is an approach to training the body. ",
                textAlign: TextAlign.center,
                style: GoogleFonts.merriweather(
                    fontWeight: FontWeight.w300,
                    fontSize: 14.0.r,
                    height: 23 / 12.0,
                    color: kDefaultWhite,
                    letterSpacing: -0.3),
              ),
            ),
            Spacer(),
            PrimaryButton(text: "Get started"),
            SizedBox(
              height: 14.4,
            )
          ],
        ),
      ),
    );
  }

  Widget selectedChangeContainer({isSelected = false}) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),
      height: 15,
      width: 30,
      decoration: BoxDecoration(
        color: isSelected ? Colors.white : Colors.black26,
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }
    Widget selectedChangeContainer2({isSelected = false}) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 500),

      decoration: BoxDecoration(
        color: isSelected ? Colors.white : Colors.black26,
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
    );
  }
}



Widget showContainer({bool isSelected = false}) {
  return AnimatedContainer(
    duration: Duration(milliseconds: 500),
    height: isSelected ? 398.r : 289.r,
    width: isSelected ? 258.r : 150.r,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(23),
    ),
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Image.asset(
        "assets/images/Mask.png",
        width: isSelected ? 258.r : 150.r,
        height: isSelected ? 398.r : 289.r,
        fit: BoxFit.contain,
      ),
    ),
  );
}

enum Position { first, second, third }

class SelectViews extends StatefulWidget {
  const SelectViews({Key? key, required this.onChanged}) : super(key: key);
  final ValueChanged<Position> onChanged;

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

class _SelectViewsState extends State<SelectViews> {
  late ScrollController _scrollController;
  bool first = false;
  bool second = false;
  bool third = false;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();

    _scrollController.addListener(() {
      if (_scrollController.offset ==
          _scrollController.position.maxScrollExtent) {
        setState(() {
          first = false;
          second = false;
          third = true;
        });
        widget.onChanged(Position.third);
      } else if (_scrollController.offset ==
          _scrollController.position.minScrollExtent) {
        setState(() {
          first = true;
          second = false;
          third = false;
        });
        widget.onChanged(Position.first);
      } else {
        setState(() {
          first = false;
          second = true;
          third = false;
        });
        widget.onChanged(Position.second);
      }

      print(_scrollController.offset);
    });

    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      _scrollController.animateTo(
        (_scrollController.position.maxScrollExtent / 2) + 50.0,
        duration: Duration(microseconds: 100),
        curve: Curves.easeIn,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 420,
      width: double.infinity,
      child: SingleChildScrollView(
        controller: _scrollController,
        scrollDirection: Axis.horizontal,
        child: Row(
          children: [
            SizedBox(
              width: 30,
            ),
            showContainer(isSelected: first),
            SizedBox(
              width: 50,
            ),
            showContainer(isSelected: second),
            SizedBox(
              width: 50,
            ),
            showContainer(isSelected: third),
            SizedBox(
              width: 30,
            ),
          ],
        ),
      ),
    );
  }
}