flutter 获取屏幕或控件宽高，调试布局，动画

参考:

Flutter 中获取屏幕以及 Widget 的宽高

打开布局调试：

//add import to rendering library
import 'package:flutter/rendering.dart';

void main() {
  debugPaintSizeEnabled=true;
  runApp(MyApp());
}

示例：

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



void main() {
  debugPaintSizeEnabled = true;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyStatefulWidget(title: 'animation Demo'),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  final String title;

  MyStatefulWidget({Key key, this.title}) : super(key: key);

  @override
  State createState() => _MyState();
}

class _MyState extends State<MyStatefulWidget> with TickerProviderStateMixin {
  AnimationController controller; //动画控制器
  CurvedAnimation curvedAnimation; //曲线动画，动画插值，
  bool forward = true;

  @override
  void initState() {
    super.initState();
    //vsync在屏幕外暂停动画
    controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 3));
    curvedAnimation =
//        CurvedAnimation(parent: controller, curve: Curves.bounceOut);
//        CurvedAnimation(parent: controller, curve: Curves.decelerate);
        CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  //MediaQuery要在MaterialApp内部使用
  @override
  Widget build(BuildContext context) {
    final GlobalKey globalKey1 = GlobalKey();
    final GlobalKey globalKey2 = GlobalKey();
    final GlobalKey globalKey3 = GlobalKey();

    void _getWH1() {
      final containerWidth = globalKey1.currentContext.size.width;
      final containerHeight = globalKey1.currentContext.size.height;
      //FadeTransition width is 480.0, height is 100.0
      print(
          'FadeTransition width is $containerWidth, height is $containerHeight');
    }

    void _getWH2() {
      final containerWidth = globalKey2.currentContext.size.width;
      final containerHeight = globalKey2.currentContext.size.height;
      //ScaleTransition width is 480.0, height is 200.0
      print(
          'ScaleTransition width is $containerWidth, height is $containerHeight');
    }

    void _getWH3() {
      final containerWidth = globalKey3.currentContext.size.width;
      final containerHeight = globalKey3.currentContext.size.height;
      //RotationTransition width is 480.0, height is 300.0
      print(
          'RotationTransition width is $containerWidth, height is $containerHeight');
    }

    //屏幕尺寸
    print(MediaQuery.of(context).size); //输出： Size(480.0, 853.3)
    print(MediaQuery.of(context).size.width); //输出宽度：480.0
    print(MediaQuery.of(context).size.height); //输出高度： 853.3333333333334
    print(MediaQuery.of(context).devicePixelRatio); //1.5
    print(MediaQuery.of(context).orientation); //Orientation.portrait

    return Scaffold(
      appBar: AppBar(
        title: Text('FadeTest'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          FadeTransition(
            key: globalKey1, //指定获取宽高的key
            opacity: curvedAnimation, //将动画传入不同的动画widget
            child: FlutterLogo(
              size: 100.0,
            ),
          ),
          ScaleTransition(
            key: globalKey2, //指定获取宽高的key
            scale: curvedAnimation,
            child: FlutterLogo(
              size: 200.0,
            ),
          ),
          RotationTransition(
            key: globalKey3, //指定获取宽高的key
            turns: curvedAnimation,
            child: FlutterLogo(
              size: 300.0,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _getWH1(); //获取宽高
          _getWH2(); //获取宽高
          _getWH3(); //获取宽高
          if (forward) {
            controller.forward(); //向前播放动画
          } else {
            controller.reverse(); //向后播放动画
          }
          forward = !forward;
        },
        tooltip: 'fade',
        child: Icon(Icons.track_changes),
      ),
    );
  }
}