flutter - 如何在 flutter 中构建

Question

<分区>

Answer 1

对于像这样的简单情况，这个答案可能有点复杂。希望使用 paint 得到答案。我正在使用 Rive为此。

This rive file包含两个状态，

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

下载并添加 Assets 。

检查 pub.dev to learn basic .要使用它，我们需要 StateMachineController

精益基础，可以查看rives-statemachine-with-textfiled以及 GitHub 上的完整项目

Rive Controller 小部件 on 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,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}