Flutter elevated button color slide in slide out transition animation on hover

Question

How to achieve Flutter elevated button color slide in slide out transition animation on hover

I tried with Slide transition position using on hover property of Inkwell but not able to achieve it

Answer 1

**Updated (09-03-23)

import 'dart:async';

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

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

  @override
  State<DummyWidget> createState() => _DummyWidgetState();
}

class _DummyWidgetState extends State<DummyWidget>
    with SingleTickerProviderStateMixin {
  StreamController<double> animationState = StreamController<double>();

  double width = 150, height = 70;

  @override
  void initState() {
    super.initState();
    animationState.add(0);
  }

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

  @override
  Widget build(BuildContext context) => SizedBox(
        height: height,
        width: width,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: InkWell(
            onTap: () {},
            child: MouseRegion(
              onEnter: (PointerEnterEvent s) {
                animationState.sink.add(width);
              },
              onExit: (PointerExitEvent s) {
                animationState.sink.add(0);
              },
              child: Stack(
                children: [
                  Card(
                    color: Colors.white,
                    elevation: 10,
                    child: SizedBox(
                      width: width,
                      height: height,
                    ),
                  ),
                  StreamBuilder<double>(
                    stream: animationState.stream,
                    builder: (
                      BuildContext context,
                      AsyncSnapshot<double> snapshot,
                    ) {
                      debugPrint('Width : ${snapshot.data}');

                      return AnimatedContainer(
                        duration: const Duration(milliseconds: 500),
                        curve: Curves.easeInOut,
                        width: snapshot.data,
                        height: height,
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(5),
                        ),
                        margin: const EdgeInsets.all(5),
                        clipBehavior: Clip.hardEdge,
                      );

                      // return AnimatedSize(
                      //   duration: const Duration(milliseconds: 500),
                      //   curve: Curves.easeInOut,
                      //   child: ColoredBox(
                      //     color: Colors.blue,
                      //     child: SizedBox(
                      //       width: snapshot.data,
                      //       height: height,
                      //     ),
                      //   ),
                      // );
                    },
                  ),
                  const Align(
                    child: Text(
                      'Something',
                      style: TextStyle(color: Colors.black),
                      textAlign: TextAlign.center,
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      );
}

enter code here