CODEWITHSUNDEEP
flutterpageviews
Truong Hoang
Truong Hoang

Reputation: 332

How to create a widget can swipe up/down/left/right in flutter?

How to create a card can swipe up/down/left/right in flutter?

I see can use PageView but it is just for one orientation up-down or left-right.

So how to combine all direction to detect swipe a Wigdet in flutter?

Thanks!

Upvotes: 1

Views: 1546

Answers (1)

Saeed Fekri
Saeed Fekri

Reputation: 1135

You can use 'PageView' as child of another 'PageView':

class _TrainigState extends State<TrainingPage> {

  PageController hPagerController = PageController(keepPage: true);
  PageController vPagerController = PageController(keepPage: true);
  double mWidth;
  double mHeight;

  @override
  Widget build(BuildContext context) {

    mWidth = MediaQuery.of(context).size.width;
    mHeight = MediaQuery.of(context).size.height;
    return PageView(
      controller: hPagerController,
      children: [
        _verticalPageView([Colors.blue, Colors.purpleAccent, Colors.pinkAccent, Colors.orangeAccent]),
        _verticalPageView([Colors.yellow, Colors.orange, Colors.deepOrange, Colors.red]),
        _verticalPageView([Colors.green, Colors.lightGreenAccent, Colors.greenAccent, Colors.lightBlueAccent]),
      ],
    );
  }

  Widget _verticalPageView(List colors) {
    return PageView(
      controller: vPagerController,
      scrollDirection: Axis.vertical,
      children: [
        Container(
          width: mWidth,
          height: mHeight,
          color: colors[0],
        ),
        Container(
          width: mWidth,
          height: mHeight,
          color: colors[1],
        ),
        Container(
          width: mWidth,
          height: mHeight,
          color: colors[2],
        ),
        Container(
          width: mWidth,
          height: mHeight,
          color: colors[3],
        ),
      ],
    );
  }

}

I hope it is useful for you.

Upvotes: 2

Related Questions