main.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool showButton = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AnimatedPadding(
            duration: const Duration(milliseconds: 500),
            curve: Curves.easeOutCubic,
            padding: EdgeInsets.only(
                left: showButton ? 0 : 25,
                right: showButton ? 56 : 25),
            child: ButtonField(
              showNextButton: showButton,
              onClick: () {
                setState(() {});
                showButton = !showButton;
              },
            )),
      ),
    );
  }
}


class ButtonField extends StatefulWidget {
  final bool showNextButton;
  final VoidCallback onClick;

  const ButtonField(
      {super.key,
        required this.onClick, required this.showNextButton,
  });

  @override
  State<ButtonField> createState() => _ButtonFieldState();
}

class _ButtonFieldState extends State<ButtonField>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    _animation = Tween<Offset>(
      begin: const Offset(-1.0, 0.0),
      end: const Offset(0.0, 0.0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeOutCubic,
    ));

    if (widget.showNextButton) {
      _controller.forward();
    }
  }

  @override
  void didUpdateWidget(covariant ButtonField oldWidget) {
    super.didUpdateWidget(oldWidget);

    if (widget.showNextButton != oldWidget.showNextButton) {
      if (widget.showNextButton) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Positioned(
          right: -56,
          child: SlideTransition(
            position: _animation,
            child: GestureDetector(
              onTap: () {
                print('Clicked');
              },
              behavior: HitTestBehavior.translucent,
              child: Container(
                padding: const EdgeInsets.only(right: 20),
                alignment: Alignment.centerRight,
                width: 80,
                height: 50,
                decoration: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(14),
                    bottomRight: Radius.circular(14),
                  ),
                  color: Colors.green,
                ),
                child: const Icon(Icons.arrow_forward,
                    size: 20),
              ),
            ),
          ),
        ),
        Container(
          padding: const EdgeInsets.all(8),
          height: 50,
          decoration: BoxDecoration(
              border: Border.all(width: 0.5, color: Colors.black),
              borderRadius: BorderRadius.circular(14),
              color: Colors.white),
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(200, 40)
            ),
            onPressed: widget.onClick,
            child: const Text('Click'),
          )
        ),
      ],
    );
  }
}