Как анимировать границу контейнера во флаттере

Question

Я хочу нарисовать анимированную границу вокруг квадратного контейнера с бесконечным циклом (никогда не останавливаться), как на этой фотографии, я пытаюсь перебрать анимированный контейнер, не помогает мне

так что кто-нибудь может сказать мне, как реализовать линейную анимацию

Редактировать **

Я использую этот код для рисования квадрата, но не могу создать его с помощью анимации

      class RadialPainter extends CustomPainter {
  final double progressRemoval;
  final Color color;
  final StrokeCap strokeCap;
  final PaintingStyle paintingStyle;
  final double strokeWidth;
  final double progress;
  RadialPainter(
      {this.progressRemoval,
      this.color,
      this.strokeWidth,
      this.strokeCap,
      this.paintingStyle,
      this.progress});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..strokeWidth = strokeWidth
      ..color = color
      ..style = paintingStyle
      ..strokeCap = strokeCap;

    var progressRemoval = 0.50;

    var path = Path();

    //LINEA SUPERIOR DEL CUADRADO
    path.moveTo((size.width * 0.30), 0);
    path.quadraticBezierTo((size.width * 0.30), 0, size.width, 0);

    //LATERAL DERECHO
    path.moveTo(size.width, 0);
    path.quadraticBezierTo(size.width, 0, size.width, size.height);

    //LINEA INFERIOR DEL CUADRADO
    path.moveTo(size.width, size.height);
    path.quadraticBezierTo(size.width, size.height, 0, size.height);

    //LINEA IZQUIERDA
    path.moveTo(0, size.height);
    path.quadraticBezierTo(0, (size.height * 0.75), 0, ((size.height * 0.75)));

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(RadialPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

Answer 1

Этот ответ может быть немного сложным для таких простых случаев, как этот. Хотите получить ответ, используя paint. Я используюдля этого.

Этот файл riv содержит два состояния:

• бесконечная петля
• значение прогресса 0-100

скачать и добавить активы.

Проверьте Rivepub.dev, чтобы узнать основы . Чтобы использовать это, нам нужно StateMachineController

Чтобы ознакомиться с основами, вы можете проверить rives-statemachine-with-textfiled и весь проект на GitHub .

Виджет Rive Controller на 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,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}