首页 > 编程语言 >手机直播源码,Flutter 中的弹簧按钮效果

手机直播源码,Flutter 中的弹簧按钮效果

时间:2023-11-20 14:12:44浏览次数:35  
标签:animationController child scaleAnimation 按钮 源码 onTap Flutter

手机直播源码,Flutter 中的弹簧按钮效果

import 'package:flutter/material.dart';
 
class ScaleAnimation extends StatefulWidget     {
 
  final Widget child;
 
  final Function()? onTap;
 
  ScaleAnimation({required this.child,required this.onTap,Key? key}):super(key: key);
 
 
 
 
  @override
  State<ScaleAnimation> createState() => _ScaleAnimationState();
 
}
 
 
class _ScaleAnimationState extends State<ScaleAnimation> with SingleTickerProviderStateMixin {
 
  late AnimationController _animationController;
 
  late Animation<double> _scaleAnimation;
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
 
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
    );
 
    _scaleAnimation = Tween<double>(
      begin: 1.0,
      end: 0.8,
    ).animate(_animationController);
 
  }
 
 
  void _playAnimation() {
    _animationController.forward();
    Future.delayed(Duration(milliseconds: 200), () {
      _animationController.reverse();
    });
  }
 
  @override
  Widget build(BuildContext context) {
      return   GestureDetector(
 
        onTap: (){
          _playAnimation();
          widget.onTap?.call();
        },
        child: AnimatedBuilder (
          animation: _scaleAnimation,
          builder:(BuildContext context, Widget? child){
            return Transform.scale(
              scale: _scaleAnimation.value,
              child: child,
 
            );
          },
          child: widget.child,
 
        ),
      );
  }
 
}

​以上就是 手机直播源码,Flutter 中的弹簧按钮效果,更多内容欢迎关注之后的文章

 

标签:animationController,child,scaleAnimation,按钮,源码,onTap,Flutter
From: https://www.cnblogs.com/yunbaomengnan/p/17843809.html

相关文章

  • 视频直播源码,图片选择器ImagePicker
    视频直播源码,图片选择器ImagePicker引入 gradleallprojects{  repositories{    maven{url'https://jitpack.io'}  }}implementation'com.github.DL-ZhangTeng:ImagePicker:1.5.0'//使用的三方implementation'com.github.bumptech.glide:glide:4.1......
  • 直播平台源码,隐藏app图标并不在最近运行中显示
    直播平台源码,隐藏app图标并不在最近运行中显示 <activity      android:name=".MainActivity"      android:excludeFromRecents="true"      android:noHistory="true">      <intent-filter>        <actio......
  • promise源码加分析
    classPromise{queue1=[]//queue1为了容纳成功之后的函数们queue2=[]//queue2为了容纳失败之后的函数们constructor(fn){//newPromise(fn)constresolve=(data)=>{//fn接受resolve并在成功的时候调用setTimeout(()=>{//要等一会,否则......
  • 14、Flutter Card组件
    Card是卡片组件块,内容可以由大多数类型的Widget构成,Card具有圆角和阴影,这让它看起来有立体感。Card实现一个通讯录的卡片classMyApp2extendsStatelessWidget{constMyApp2({super.key});@overrideWidgetbuild(BuildContextcontext){returnListView(......
  • Avalonia 实现跨平台的IM即时通讯、语音视频通话(源码,支持信创国产OS,统信、银河麒麟)
       在Avalonia如火如荼的现在,之前使用CPF实现的简单IM,非常有必要基于Avalonia来实现了。Avalonia在跨平台上的表现非常出色,对信创国产操作系统(像银河麒麟、统信UOS、Deepin等)也很不错。   现在,我们就来使用Avalonia实现一个跨平台的简单IM,除了文字聊天外,还可......
  • Netty源码学习4——服务端是处理新连接的&netty的reactor模式
    系列文章目录和关于我零丶引入在前面的源码学习中,梳理了服务端的启动,以及NioEventLoop事件循环的工作流程,并了解了Netty处理网络io重要的Channel,ChannelHandler,ChannelPipeline。这一篇将学习服务端是如何构建新的连接。一丶网络包接收流程当客户端发送的网络数据帧通过网......
  • Flutter实现文字的跑马灯滚动显示
    如果你想实现自动滚动,显示完毕后等待1秒钟再次开始自动滚动,可以使用Marquee这个库,它专门用于实现文本的滚动效果。首先,你需要在pubspec.yaml文件中添加marquee依赖:dependencies:marquee:^1.0.3然后运行flutterpackagesget命令以安装依赖项。接下来,使用Marquee组......
  • 拼多多订单生成器手机版,支持淘宝京东截图生成,E4A源码,仅供娱乐学习
    闲着用E4A对接了JAVA类库制作了一个订单生成器,当然我叫了水印,这个软件或者里面的截图做不了啥坏事,仅仅用来学习娱乐装逼用的,下面是框架和代码。框架图1:  框架图2:  JAVa代码库:======================================================//商品类classProduct{St......
  • FlutterApp实战·第01天:Flutter安装和配置
    Flutter安装文档:官方文档:https://docs.flutter.dev/get-started/install中文文档:https://flutter.cn/docs/get-started/installDart升级Dart安装参考前面文章(Dart安装和初体验):https://ntopic.cn/p/2023092301后续学习我们采用最新Flutter版本,因此建议升级Dart最新版本(当前......
  • 前端学习笔记202308学习笔记第七十六天-webpack源码分析2
       ......