如何在Flutter中构建

Question

如何为正方形内容添加边框动画。

- Rifa'a

---

图片缺失，可以包含详细信息。 - Yeasin Sheikh

完成任务后，我会尝试一下。 - Yeasin Sheikh

我昨晚尝试过不使用任何软件包，如果我使用涂鸦软件包来制作动画，可以吗？ - Yeasin Sheikh

Answer 1

这个答案可能对于像这样简单的情况有点复杂。希望能使用 paint 来回答。我正在使用 Rive 进行操作。 这个 Rive 文件 包含了两种状态：

• 无限循环
• 进度值为 0-100

下载并添加到资源中。

查看 pub.dev 以了解基础知识。要使用此功能，我们需要 StateMachineController。

要了解基础知识，您可以查看 rives-statemachine-with-textfiled 和完整的项目在 GitHub 上。 Rive 控制器小部件 在 Gist 上。

class RiveBorder extends StatefulWidget {
  const RiveBorder({Key? key}) : super(key: key);

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

class _RiveBorderState extends State<RiveBorder> {
  StateMachineController? controller;

  //progress value
  SMIInput<double>? valueController;

  // infinite loop
  SMIInput<bool>? loopController;

  Artboard? _riveArtboard;

  _initRive() {
    rootBundle.load("assets/new_file.riv").then((value) async {
      final file = RiveFile.import(value);

      final artboard = file.mainArtboard;

      controller =
          StateMachineController.fromArtboard(artboard, "State Machine 1");

      if (controller != null) {
        debugPrint("got state");
        setState(() {
          artboard.addController(controller!);
          valueController = controller!.findInput('value');
          loopController = controller!.findInput('loop');
          // ignore: avoid_function_literals_in_foreach_calls
          controller!.inputs.forEach((element) {
            debugPrint(element.name);
          });
        });
      }

      _riveArtboard = artboard;
    });
  }

  @override
  void initState() {
    _initRive();
    super.initState();
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text("loop"),
                const SizedBox(
                  width: 10,
                ),
                Switch(
                  value: loopController == null ? false : loopController!.value,
                  onChanged: (value) {
                    setState(() {
                      if (loopController != null) loopController!.value = value;
                    });
                  },
                ),
              ],
            ),
            Slider(
              value: valueController == null ? 0 : valueController!.value,
              min: 0,
              max: 100,
              onChanged: (value) {
                setState(() {
                  valueController != null ? valueController!.value = value : 0;
                });
              },
            ),
            SizedBox(
              height: 100,
              width: 100,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  _riveArtboard == null
                      ? const CircularProgressIndicator()
                      : Rive(
                          artboard: _riveArtboard!,
                        ),
                  const Icon(
                    Icons.umbrella,
                    size: 77,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

- Yeasin Sheikh