制作环绕按钮的最佳方法是什么

Question

我想做这样的事情： https://youtu.be/W3O0077GMlo 我想让旋转的圆圈（本视频中的月亮）充当按钮。

实现此性能的最佳方法是什么？

Answer 1

可以使用RotationTransition inside a Stack widget to create the rotating animation. Inside the Stackset the alignment to center, and wrap your rotating widget inside an Align。将 Align 小部件的对齐属性设置为 Alignment.topCenter 或任何外部对齐方式。

记得在 release 上部署到您的 phone 以确保动画运行流畅。

快速独立代码示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(width: 300.0, height: 300.0, child: OrbitingButton()),
        ),
      ),
    );
  }
}

class OrbitingButton extends StatefulWidget {
  @override
  _OrbitingButtonState createState() => _OrbitingButtonState();
}

class _OrbitingButtonState extends State<OrbitingButton>
    with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);

    controller.repeat(min: 0.0, max: 1.0, period: Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        RotationTransition(
          turns: controller,
          child: Align(
            alignment: Alignment.topCenter,
            child: Container(
              color: Colors.green,
              height: 30.0,
              width: 30.0,
            ),
          ),
        ),
        RaisedButton(
          child: Text('Button'),
        )
      ],
    );
  }
}

制作环绕按钮的最佳方法是什么

What is the best way to make an orbiting button

flutter

flutter-animation