如何实现List的gridview水平滚动（轮播）<widget> function 在 flutter 中？</widget>

Question

I have a list of menu and it's overpopulate inside one page because the list of menu is more than expected, I want to change this listview into gridview with horizontally scrolling or carousell swipe, so other menu (card) will be shown when I swipe it to left, previously I use List<Widget> function and ListView() to create a list of card. I want three stack of horizontal card and when I swipe it to the left, it will showing other three stack horizontal card, just like this:

this is my previous code:

      Padding(
        padding: const EdgeInsetsDirectional.all(Dimensions.paddingSizeDefault),
        child: Obx(() => ListView(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              addSemanticIndexes: false,
              children: buildMainMenu(),
            )));

buildMainMenu() is the name of List<Widget> function

Answer 1

To create a swipeable stack widget use flutter_card_swiper package ( https://pub.dev/packages/flutter_card_swiper ).

There are plenty of swipeable packages: -

https://pub.dev/packages?q=swipe+card

Sample Code: -

class Example extends StatelessWidget {
  List<Container> cards = [
    Container(
      alignment: Alignment.center,
      child: const Text('1'),
      color: Colors.blue,
    ),
    2nd Widget,
    3nd Widget,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Flexible(
        child: CardSwiper(
          cards: cards,
        ),
      ),
    );
  }
} 

Complete Code: -

import 'package:flutter/material.dart';
import 'package:appinio_swiper/appinio_swiper.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(const Example());

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  List<Container> cards = [
    Container(
      alignment: Alignment.center,
      color: CupertinoColors.activeBlue,
      child: const Text('1'),
    ),
    Container(
      alignment: Alignment.center,
      color: CupertinoColors.activeGreen,
      child: const Text('2'),
    ),
    Container(
      alignment: Alignment.center,
      color: CupertinoColors.activeOrange,
      child: const Text('3'),
    ),
    Container(
      alignment: Alignment.center,
      color: CupertinoColors.systemPink,
      child: const Text('4'),
    )
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CupertinoPageScaffold(
          child: Center(
            child: SizedBox(
              height: 500,
              width: 400,
              child: AppinioSwiper(
                allowUnswipe: false,
                maxAngle: 2,
                direction: AppinioSwiperDirection.left,
                cards: cards,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output: -