How to build in flutter

Question

how to animate border around the square content.

Answer 1

This answer might be a little complicated for simple cases like this. Wish to have answer using paint. I am using Rive for this.

This rive file contains two states,

• infinite loop
• progress value 0-100

download and add on assets.

Check pub.dev to learn basic. To use this, we need StateMachineController

To lean basic, you can check rives-statemachine-with-textfiled and the complete project on GitHub

Rive Controller Widget 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,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}