Flutter horizontal scroll gridview with snap effect

Question

Is it possible to create snap effect in horizontally scroll gridview?

return SafeArea(
      child: SizedBox(
        width: double.infinity,
        height: 420,
        child: GridView(
            scrollDirection: Axis.horizontal,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, childAspectRatio: 0.36),
            children: buildMainMenu()),
      ),
    );

Let me know if there is a way for gridview to having snap effect

Is [this](https://stackoverflow.com/questions/51607440/horizontally-scrollable-cards-with-snap-effect-in-flutter) your question? — Ravindra S. Patil, Jan 25 '23 at 04:45
@Shanu , Ravindra had answered your question about snap effect, but the one that I meant is for gridview cause gridview is having crossAxisCount that limit the column on grid, currently I have horizontally scrolled gridview that consists 3 card inside one column, my grid is populated by List and my gridview will change everytime I add new widget into it. What I expect for my grid is everytime I scroll it horizontally it will had snap effect, like transition over every column in my gridview — 1988, Jan 25 '23 at 04:57

Esmaeil Ahmadipour · Accepted Answer · 2023-01-25T08:50:45.020

GridView by Snap Effect :)

import 'dart:ui';

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(home: MyHomePage()));

class MyHomePage extends StatelessWidget {
  List<int> listItem = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('GridView'),
        ),
        body: SafeArea(
            child: SizedBox(
                width: double.infinity,
                height: 420,
                child: ScrollConfiguration(
                    behavior: AppScrollBehavior(),
                    child: GridView(
                        scrollDirection: Axis.horizontal,
                        physics: const PageScrollPhysics(),
                        gridDelegate:
                            const SliverGridDelegateWithFixedCrossAxisCount(
                                mainAxisSpacing: 2.0,
                                crossAxisSpacing: 2.0,
                                crossAxisCount: 3,
                                childAspectRatio: 0.36),
                        children: listItem
                            .map((title) => ItemWidget(
                                  title: "$title",
                                ))
                            .toList())))));
  }
}

class ItemWidget extends StatelessWidget {
  const ItemWidget({
    Key? key,
    required this.title,
  }) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: Colors.redAccent,
      child: Text(title),
    );
  }
}

// if this gridview used on flutter web need below class for scrolling
class AppScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

Flutter horizontal scroll gridview with snap effect

1 Answers1