CODEWITHSUNDEEP
androidiosflutterdartuser-interface
1988
1988

Reputation: 329

how to achieve gridview horizontally scrolling (carousell) for List<Widget> function in flutter?

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:

enter image description here

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

Upvotes: 1

Views: 61

Answers (1)

Ramji
Ramji

Reputation: 183

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 : -

Upvotes: 1

Related Questions