How to build in flutter [duplicate] - flutter

Question

This question already has answers here:
How can I add a border to a widget in Flutter?
(18 answers)
Closed last year.
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,
)
],
),
)
],
),
),
);
}
}