magnifier.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

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

void main() => runApp(Magnifier(child:MyApp()));

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}



class Magnifier extends StatefulWidget {
  final Widget child;

  const Magnifier({@required this.child, Key key}) : super(key: key);

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

class _MagnifierState extends State<Magnifier> {
  Offset position = Offset(0, 0);
  Size magnfierSize = Size(80, 80);
  // Matrix4 matrix = Matrix4.diagonal3Values(1.5, 1, 2)..rotateX(45)..rotateZ(45);

  @override
  Widget build(BuildContext context) {
    // Matrix4 matrix = Matrix4(
    //   1.0, 0.0, 0.0, 0.0, //
    //   0.0, 1.0, 0.0, 0.0, //
    //   0.0, 0.0, 1.0, 1.0, //
    //   0.0, 0.0, 0.0, 1.0, //
    // )
    // Matrix4 matrix =
    //     MatrixUtils.createCylindricalProjectionTransform(radius: 80, angle: 3.14/8,perspective: 0.003);
    Matrix4 matrix = Matrix4.identity()
      ..translate(-magnfierSize.width / 2, -magnfierSize.height / 2)
      ..scale(1.2, 1.2)
      ..translate((magnfierSize.width) / 2, -(magnfierSize.height) / 2);
    return Stack(
      alignment: Alignment.center,
      children: [
        widget.child,
        Positioned(
          left: position.dx,
          top: position.dy,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(magnfierSize.longestSide),
            child: GestureDetector(
              onPanUpdate: (a) {
                setState(() {
                  position = a.globalPosition -
                      a.delta -
                      magnfierSize.center(Offset.zero) / 2;
                });
              },
              child: BackdropFilter(
                filter: ImageFilter.matrix(
                    matrix.storage

                    ),
                child: Container(
                  height: magnfierSize.height,
                  width: magnfierSize.width,
                  alignment: FractionalOffset.center,
                  decoration: BoxDecoration(
                      // color: Colors.redAccent.withOpacity(0.3),
                      borderRadius:
                          BorderRadius.circular(magnfierSize.longestSide),
                      border: Border.all(color: Colors.black, width: 2)),
                ),
              ),
            ),
          ),
        )
      ],
    );
  }
}