Gesture detection when transform widget is applied

user_4359492 0
Viewed 68

I can't seem get proper gesture detection when applying a Matrix to a widget. My best guess is that it has something to do with FractionallySizedBox. Here is a MCVE:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    final double scaleFactor = size.aspectRatio;
    final Matrix4 matrix = Matrix4.diagonal3Values(scaleFactor, scaleFactor, 1.0);
    return Scaffold(
      backgroundColor: Colors.red.shade100,
      body: Center(
        child: Container(
          width: size.width,
          height: size.height * scaleFactor,
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Container(
            transform: matrix,
            child: FractionallySizedBox(
              widthFactor: 1 / scaleFactor,
              heightFactor: 1 / scaleFactor,
              alignment: AlignmentDirectional.topStart,
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      width: size.width,
                      height: size.height,
                      child: const Page(
                        title: 'PageA',
                      ),
                    ),
                  ),
                  const SizedBox(width: 16.0),
                  Expanded(
                    child: Container(
                      width: size.width,
                      height: size.height,
                      child: const Page(
                        title: 'PageB',
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class Page extends StatelessWidget {
  const Page({Key key, @required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: FlatButton(
        child: const Text('Press me'),
        onPressed: () {
          print('$title onPressed');
        },
      ),
    );
  }
}

issue describing gif

flutter-layout flutter
1 Answers

Try using a FittedBox

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: Colors.red.shade100,
      body: FittedBox(
        alignment: AlignmentDirectional.center,
        child: SizedBox(
          width: size.width * 2 + 16,
          height: size.height,
          child: Row(
            children: const <Widget>[
              Expanded(
                child: Page(
                  title: 'PageA',
                ),
              ),
              SizedBox(width: 16.0),
              Expanded(
                child: Page(
                  title: 'PageB',
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
class Page extends StatelessWidget {
  const Page({Key key, @required this.title}) : super(key: key);
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: FlatButton(
        child: const Text('Press me'),
        onPressed: () {
          print('$title onPressed');
        },
      ),
    );
  }
}
user_106759750
Related