How to Adjust crossAxisCount(in gridview) based on gesturedetector

Question

Like in the gallery app that it comes in our phones, when we zoom in we see less items, when we zoom out we see more items Is there a way to achieve this in Flutter ?

Answer 1

  double _scale=1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: GestureDetector(
        onScaleUpdate: (ScaleUpdateDetails scaleDetails) {
          setState(() {
            _scale = scaleDetails.horizontalScale;
          });
        },
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: GridView.builder(
            shrinkWrap:true,
            gridDelegate:   SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: max(1, (16 / _scale).floor())),
            itemCount: 100 * 17,
            itemBuilder: (BuildContext context, int index) {
              return GridTile(
                  child: Container(color:Colors.red,height:100,width:100 ,child: FlutterLogo(),));
            },

          ),
        ),
      ),
    );
  }

i have update some changes in exiting code of WarDoctor113 user according to you

  double _scale = 1;
  int dynamicTotalCount =5;
  int maxCount =5;
  int minCount=2;

 @override
  Widget build(BuildContext context) {

    return Scaffold(
        body: GestureDetector(
      onScaleUpdate: (ScaleUpdateDetails scaleDetails) {
        setState(() {

          _scale = scaleDetails.horizontalScale;
          dynamicTotalCount=(16 / _scale).floor();

        });
      },
onScaleEnd:(ScaleEndDetails scaleDetails) {
  setState(() {

    _scale = scaleDetails.;
    dynamicTotalCount=(16 / _scale).floor();

  });
},
      child: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: GridView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: max(minCount, dynamicTotalCount>=maxCount?maxCount:dynamicTotalCount)),
          itemCount: 100 * 17,
          itemBuilder: (BuildContext context, int index) {
            return GridTile(
                child: Container(
              color: Colors.red,
              height: 100,
              width: 100,
              child: FlutterLogo(),
            ));
          },
        ),
      ),
    ));
  }