How to pinch zoom in/out Text using two fingers?

问题

I'm creating a text field like Text or RichText. And after that, I want to zoom in/out the size of text using pinching. For now, I tried implementing GestureDetector but it zooms in/out with one finger too. And it is really hard to aim pinching detection. Sometimes is freezing. I add video when after pinching freeze and suddenly get bigger. The second video is with the case that image zoom in only when I tap on the text with one finger and move to up left corner. The ideal implementation is to detect pinch and zoom in/out all text area. And disable zooming when I use only one finger. Could you send me some hints, link or code how to solve or where to find the solution?

      body: GestureDetector(
          onScaleUpdate: (details) {
            setState(() {
              _textSize =
                  _initTextSize + (_initTextSize * (details.scale * .35));
            });
          },
          onScaleEnd: (ScaleEndDetails details) {
            setState(() {
              _initTextSize = _textSize;
            });
          },
          child: Center(
              child: SizedBox(
            height: _textSize,
            child: FittedBox(
              child: Text("Test"),
            ),
          ))),

回答1:

In Statefull widget with these configuration

double _scaleFactor = 1.0;
double _baseScaleFactor = 1.0;

And use setState only on update, using the scaleFactor on textScaleFactor property of RichText.

Only one setState to rebuild widget and store the initial factor when scale starts

GestureDetector(
  onScaleStart: (details) {
    _baseScaleFactor = _scaleFactor;
  },
  onScaleUpdate: (details) {
    print(details.scale);
    setState(() {
      _scaleFactor = _baseScaleFactor * details.scale;
    });
  },
  child: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    color: Colors.red,
    child: Center(
      child: Text(
        'Teste',
        textScaleFactor: _scaleFactor,
      ),
    ),
  ),
);

The Height and width I put just to expand and simulate area of gesture detector.

回答2:

Solution: Two finger zoom-in and zoom-out.

  import 'package:flutter/material.dart';
  import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';

  class TransformText extends StatefulWidget {
    TransformText({Key key}) : super(key: key); // changed

    @override
    _TransformTextState createState() => _TransformTextState();
  }

  class _TransformTextState extends State<TransformText> {
    double scale = 0.0;

    @override
    Widget build(BuildContext context) {
      final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

      return Scaffold(
        appBar: AppBar(
          title: Text('Single finger Rotate text'), // changed
        ),
        body: Center(
          child: MatrixGestureDetector(
            onMatrixUpdate: (m, tm, sm, rm) {
              notifier.value = m;
            },
            child: AnimatedBuilder(
              animation: notifier,
              builder: (ctx, child) {
                return Transform(
                  transform: notifier.value,
                  child: Center(
                    child: Stack(
                      children: <Widget>[
                        Container(
                          color: Colors.red,
                          padding: EdgeInsets.all(10),
                          margin: EdgeInsets.only(top: 50),
                          child: Transform.scale(
                            scale:
                                1, // make this dynamic to change the scaling as in the basic demo
                            origin: Offset(0.0, 0.0),
                            child: Container(
                              height: 100,
                              child: Text(
                                "Two finger to zoom!!",
                                style:
                                    TextStyle(fontSize: 26, color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      );
    }
  }

来源：https://stackoverflow.com/questions/55440184/how-to-pinch-zoom-in-out-text-using-two-fingers