Basic onboard cards

onboard_cards.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: OnboardView(),
    );
  }
}

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(
      backgroundColor: Colors.indigoAccent,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            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,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  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 showContainer({bool isSelected = false}) {
  return AnimatedContainer(
    duration: Duration(milliseconds: 500),
    height: isSelected ? 400 : 300,
    width: isSelected ? 250 : 150,
    color: Colors.red,
  );
}

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,
            ),
          ],
        ),
      ),
    );
  }
}

Nice one.

Thank you for this.