How to check if two widgets are overlapping in flutter?

Question

I wanted to know if we can check if two widgets in flutter are overlapping. I actually have two AnimatedContainer stacked using Stack. I wanted to check if the children of the two overlap. I actually am creating a game from scratch and wanted to check collisions. Though x's and y's are an option, but it depends on height and width of the two objects and as they are having different, so results are very inaccurate.

Any help would be appreciated.

Alessandro

#54291745 – Velvetvelveteen

Answer 1

You can pass a key to the widget and then use key.currentContext.findRenderObject() to get the render object.

Here is a working examlpe

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: MyPage());
}

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> with WidgetsBindingObserver {
  final containerKey1 = GlobalKey();
  final containerKey2 = GlobalKey();

  Alignment box2Align = Alignment.topRight;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            Align(
              alignment: Alignment.topLeft,
              child: Container(
                key: containerKey1,
                color: Colors.pink,
                width: 100.0,
                height: 100.0,
              ),
            ),
            Align(
              alignment: box2Align,
              child: Transform.translate(
                offset: const Offset(10.0, 10.0),
                child: Container(
                  key: containerKey2,
                  color: Colors.purple.withOpacity(0.75),
                  width: 100.0,
                  height: 100.0,
                ),
              ),
            ),
            // Buttons
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                FlatButton(
                  color: Colors.yellow,
                  child: Text('Move containers'),
                  onPressed: () => setState(() {
                    if (box2Align == Alignment.topRight)
                      box2Align = Alignment.topLeft;
                    else
                      box2Align = Alignment.topRight;
                  }),
                ),
                FlatButton(
                  color: Colors.yellow,
                  child: Text('Check if boxesCollide'),
                  onPressed: _onCheckTap,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  void _onCheckTap() {
    RenderBox box1 = containerKey1.currentContext.findRenderObject();
    RenderBox box2 = containerKey2.currentContext.findRenderObject();

    final size1 = box1.size;
    final size2 = box2.size;

    final position1 = box1.localToGlobal(Offset.zero);
    final position2 = box2.localToGlobal(Offset.zero);

    final collide = (position1.dx < position2.dx + size2.width &&
        position1.dx + size1.width > position2.dx &&
        position1.dy < position2.dy + size2.height &&
        position1.dy + size1.height > position2.dy);

    print('Containers collide: $collide');
  }
}

Normand

It is little bit outdated right now. You can still use it, just call 'as RenderBox' after findRenderObejct method – Abijah