flutterpageviews

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!


Solution

  • 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.