Hi I`m looking for an example Transform.scale with Duration(milliseconds: 300..)

can I see an example please?

I have searched there is not example

CodePudding user response：

you can use like that

class TransformWithDuration extends StatefulWidget {
  final Widget child;
  final void Function()? onTap;
  final void Function()? onLongTap;
  const TransformWithDuration({Key? key, required this.child, this.onTap, this.onLongTap}) : super(key: key);

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

class _TransformWithDurationState extends State<TransformWithDuration>
    with TickerProviderStateMixin {
  double squareScaleA = 1;
  late AnimationController _controllerA;

  @override
  void initState() {
    _controllerA = AnimationController(
      vsync: this,
      lowerBound: 0.94,
      upperBound: 1.0,
      value: 1,
      duration: Duration(milliseconds: 200),
    );
    _controllerA.addListener(() {
      setState(() {
        squareScaleA = _controllerA.value;
      });
    });

    _controllerA.drive(CurveTween(curve: Curves.fastOutSlowIn));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        _controllerA.reverse();
        if (widget.onTap != null) widget.onTap!();
      },
      onTapDown: (dp) {
        _controllerA.reverse();
      },
      onTapUp: (dp) {
        Timer(Duration(milliseconds: 150), () {
          _controllerA.fling();
        });
      },
      onTapCancel: () {
        _controllerA.fling();
      },
      onLongPress: () {
        if (widget.onLongTap != null) widget.onLongTap!();
      },
      child: Transform.scale(
        scale: squareScaleA,
        child: widget.child,
      ),
    );
  }

  @override
  void dispose() {
    _controllerA.dispose();
    super.dispose();
  }
}

CodePudding user response：

There are two kinds of animations in Flutter: Implicit and Explicit. In your case, you seem to want an implicit widget to animate the change in scale of something. Luckily, there's a pre-made widget for you, called AnimatedScale. If that suits your needs, you should prefer to use that widget. If it doesn't, for example, if you want to apply other fancier transformations, you can try to use Transform widget with TweenAnimationBuilder to stay within the "implicit animation". This way you can avoid dealing with AnimationController, and can make your code concise.

Full example, replace main.dart with the code below to run it. Clicking the button will toggle the Flutter Logo between 1.0x and 5.0x scale:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _big = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            AnimatedScale(
              duration: Duration(seconds: 1),
              scale: _big ? 5.0 : 1.0,
              child: FlutterLogo(),
            ),
            ElevatedButton(
              child: Text('change size'),
              onPressed: () => setState(() => _big = !_big),
            ),
          ],
        ),
      ),
    );
  }
}