CODEWITHSUNDEEP
flutteranimationflutter-swiper
ILii
ILii

Reputation: 99

Flutter Card Swipe Animation with forward and reverse methode without a loop

can i implement my own card swip animation ?

what i want is something similar to this package here. but the slides should shown from the top like so: (and without a loop)

enter image description here

my code:

final controller = SwiperController();

  List<Widget> _pages = [
    Container(color: Colors.blue),
    Container(color: Colors.black),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Swiper(
        loop: false,
        controller: SwiperController(),
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 40.0),
            child: _pages[index],
          );
        },
        itemCount: _pages.length,
        itemWidth: 400.0,
        itemHeight: 700.0,
        layout: SwiperLayout.TINDER,
      ),
    );
  }
}

can you suggest me a way to reach that and thanks.

Upvotes: 0

Views: 1502

Answers (1)

tmaihoff
tmaihoff

Reputation: 3570

My editor warns me about this: The library 'package:flutter_swiper/flutter_swiper.dart' is legacy, and shouldn't be imported into a null safe library.

So I guess you should search for a up-to-date, null-safe package which does the same.

And for the vertical layout that you want to achieve... Can't you just rotate the whole swiper widget by 90 degrees?

Like so:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RotatedBox(
        quarterTurns: 1,
        child: Swiper(
          loop: false,
          controller: SwiperController(),
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40.0),
              child: _pages[index],
            );
          },
          itemCount: _pages.length,
          itemWidth: 400.0,
          itemHeight: 700.0,
          layout: SwiperLayout.TINDER,
        ),
      ),
    );
  }

Upvotes: 0

Related Questions