I want it to look like the image, but I couldn't find a way, please help? i am try to using carousel_slider, pub.dev/packages/flutter_tindercard,flutter_multi_carousel,FlutterCardSwipe plugin for this and try to modify this plugins but it not implement exactly look like video.

CodePudding user response：

Consider using AnimatedPositioned inside a Stack. You can the play with the values of their position (top, bottom, left, right) and sizes (height, width).

Here is a video the flutter team made: https://www.youtube.com/watch?v=hC3s2YdtWt8

Consider this as just one way to do it, there are many ways.

CodePudding user response：

A simple of doing this using AnimatedContainer and changing active container with Timer.

Run on dartPad

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

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

class _AnimC3State extends State<AnimC3> {
  final duration = const Duration(seconds: 1);

  int _currentIndex = 0;

  late Timer _timer;

  @override
  void initState() {
    _timer = Timer.periodic(duration, (timer) {
      setState(() {
        _currentIndex  ;
        if (_currentIndex > 2) _currentIndex = 0;
      });
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200,
          child: Row(
            children: [
              AnimatedContainer(
                duration: duration,
                width: _currentIndex == 0 ? 100 : 50,
                color: Colors.purpleAccent,
              ),
              AnimatedContainer(
                duration: duration,
                color: Colors.cyanAccent,
                width: _currentIndex == 1 ? 100 : 50,
              ),
              AnimatedContainer(
                duration: duration,
                color: Colors.red,
                width: _currentIndex == 2 ? 100 : 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}