TweenAnimationBuilder Code Sample(1)

一个使用TweenAnimationBuilder自定义封装动画控件的例子,不需要自己声明AnimationController.

来自官网例子的改造

import 'package:flutter/material.dart';

void main() => runApp(const TweenAnimationBuilderExampleApp());

class TweenAnimationBuilderExampleApp extends StatelessWidget {

  const TweenAnimationBuilderExampleApp({super.key});

  @override

  Widget build(BuildContext context) {

    return const MaterialApp(

      home: Scaffold(

        body: Center(

          child: Column(

            children: [

              MyAnimatedWidget(

                duration: Duration(seconds: 1),

                icon: Icon(Icons.lock_clock),

              ),

              MyAnimatedWidget(

                duration: Duration(seconds: 2),

                icon: Icon(Icons.leaderboard),

              ),

              MyAnimatedWidget(

                duration: Duration(seconds: 1),

                icon: Icon(Icons.offline_bolt),

              ),

            ],

          ),

        ),

      ),

    );

  }

}

// MyAnimatedWidget

class MyAnimatedWidget extends StatefulWidget {

  const MyAnimatedWidget(

      {super.key, required this.duration, required this.icon});

  final Duration duration;

  final Icon icon;

  @override

  State<MyAnimatedWidget> createState() => _MyAnimatedWidgetState();

}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {

  double target = 24.0;

  @override

  Widget build(BuildContext context) {

    return TweenAnimationBuilder(

      tween: Tween<double>(begin: 0, end: target),

      duration: widget.duration,

      builder: (context, value, child) {

        return IconButton(

          iconSize: value,

          onPressed: () {

            setState(() {

              target = target == 24.0 ? 48.0 : 24.0;

            });

          },

          icon: child!,

        );

      },

      child: widget.icon,

    );

  }

}


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AnimatedContainer 动画示例,只要是AnimatedContainer中的属性,包括width,h...
    Zz_zZz_zZ阅读 748评论 0 1
  • 一个官方的Overlay例子, overlay在很多情况下还是有很多用处的。 关键的几个地方 1. 创建Overl...
    Zz_zZz_zZ阅读 741评论 0 0
  • 该示例代码使用了3个按钮控件作为布局演示,同时添加了手势操作。以及封装。 代码来源参考:https://jueji...
    Zz_zZz_zZ阅读 721评论 0 0
  • 对于一个前端的App来说,添加适当的动画,可以给用户更好的体验和视觉效果。所以无论是原生的iOS或Android,...
    5e4c664cb3ba阅读 5,514评论 0 7
  • 改写Counter app, 有两个counter,同时有两个页面。一个页面可以修改和查看数据,另一个页面可以查看...
    Zz_zZz_zZ阅读 682评论 0 0