flutter灵动岛效果

import 'package:flutter/material.dart';
import '../controllers/island_controller.dart';
import 'package:get/get.dart';

class IslandView extends GetView<IslandController> {
  const IslandView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text("灵动岛功能实现"),
      ),
      body: ListView(
        children: [
          Center(
            child: AnimatedBuilder(
              animation: controller.animation,
              builder: (context, child) {
                return Container(
                  margin:const EdgeInsets.only(top:50),
                  width: 150 * controller.animation.value,
                  height: 40,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.circular(40),
                  ),
                  child:const Center(
                    child: Text(
                      "前程出行",
                      style: TextStyle(color: Colors.white,fontSize: 16),
                    ),
                  ),
                );
              },
            ),
          ),
          Center(
            child: Container(
              margin:const EdgeInsets.only(top:50),
              width: 120,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue, // 设置背景颜色
                  onPrimary: Colors.white, // 设置字体颜色
                ),
                onPressed: () {
                  // 按钮被点击时执行的代码
                  controller.toggleWidth();
                },
                child:const Text("点击效果") ,
              ),

            ),
          )
        ],
      ),
    );
  }
}



///-----------------Controller页面------------------------

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class IslandController extends GetxController with GetTickerProviderStateMixin {
  late AnimationController animationController;
  late Animation<double> animation;
  @override
  void onInit() {
    super.onInit();
    initialization();
  }
  ///初始化
  void initialization(){
    animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    animation = Tween<double>(begin:1.2, end:0.8).animate(animationController);
    animationController.forward();//小
  }
  ///点击按钮实现效果
  void toggleWidth() {
    if (animationController.isCompleted) {
      animationController.reverse();//大
      Timer.periodic(const Duration(milliseconds:500), (Timer timer) {
        animationController.forward();//小
        timer.cancel(); // 停止计时器
      });
    } else {
      animationController.forward();//小
    }
  }
  @override
  void onReady() {
    super.onReady();
  }

  @override
  void onClose() {
    animationController.dispose();
    super.onClose();
  }

}