How to get offset of a widget inside a GridView flutter

Question

I am trying to add an exploding effect to Inkwell Widget inside a GridView but I need to find its offset, I have tried this so far:

GridView.builder(
  itemCount: 10,
  itemBuilder: (ctx, ind) {
    return InkWell(
      onTap: () async {
        try {
          final RenderBox box = ctx.findRenderObject();
          Offset position = box.localToGlobal(Offset.zero,
            ancestor: context.findRenderObject()
          );
          double x = position.dx;
          double y = position.dy;
          double w = box.size.width;
          Future.delayed(Duration(milliseconds: 100)).then(
            (_) => _particleField.lineExplosion(x, y, w)
          );
        } catch (e) {
          print(e);
        }
      },
      child: Center(
        child: Text("${ind + 1},000,000")
      ),  
    );
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, 
    childAspectRatio: 3
  ),
)

but I get this error:

type 'RenderSliverGrid' is not a subtype of type 'RenderBox'

Answer 1

is this what you are looking for?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: GridExample(),
      ),
    );
  }
}

class GridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: 10,
      itemBuilder: (ctx, ind) {
        return _Item('${ind + 1},000,000');
      },
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, childAspectRatio: 3),
    );
  }
}

class _Item extends StatelessWidget {
  _Item(this.title);
  String title;

  final GlobalKey _globalKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return InkWell(
      key: _globalKey,
      onTap: () async {
        final RenderBox referenceBox =
            _globalKey.currentContext.findRenderObject();

        final position = referenceBox.localToGlobal(Offset.zero);
        final x = position.dx;
        final y = position.dy;
        final w = referenceBox.size.width;
        Future.delayed(Duration(milliseconds: 100))
            .then((_) => _particleFieldLineExplosion(x, y, w));
      },
      child: Center(child: Text(title)),
    );
  }

  _particleFieldLineExplosion(x, y, w) {
    print(x);
    print(y);
    print(w);
  }
}

Answer 2

Add a GlobalKey as the key of the InkWell

itemBuilder: (ctx, ind) {
    GlobalKey _key=GlobalKey();
    return InkWell(
       key:_key;
    );
}

Then you can simply replace

final RenderBox box = _key.currentContext.findRenderObject();