androidiosflutterdart

Flutter horizontal scroll gridview with snap effect


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


Solution

  • 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
    // example:
    // MaterialApp(scrollBehavior: AppScrollBehavior(), ......)
    class AppScrollBehavior extends MaterialScrollBehavior {
      @override
      Set<PointerDeviceKind> get dragDevices => {
            PointerDeviceKind.touch,
            PointerDeviceKind.mouse,
          };
    }
    

    enter image description here