How can I create Ring Progress Bar outside Container Flutter

Here’s a minimal code that achieves something very close to what you want using CustomPaint and TweenAnimationBuilder.

Screen from dartpad:

Code:

import 'package:flutter/material.dart';
import 'dart:math';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class BorderPainter extends CustomPainter {
  final double currentState;

  BorderPainter({required this.currentState});

  @override
  void paint(Canvas canvas, Size size) {

    double strokeWidth = 5;
    Rect rect = const Offset(5,5) & Size(size.width - 10, size.height - 10);

    var paint = Paint()
      ..color = Colors.white
      ..strokeWidth = strokeWidth
      ..strokeCap = StrokeCap.round
      ..style = PaintingStyle.stroke;

      double startAngle = -pi / 2;
      double sweepAmount = currentState * pi;

      canvas.drawArc(rect, startAngle, sweepAmount, false, paint);
  }


  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: TweenAnimationBuilder(
        tween: Tween(begin: 0.0, end: 2.0),
        duration: const Duration(seconds: 10),
        builder: (context, value, child) {
          return Container(
            width: 100,
            height: 100,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.orange
            ),
            child: CustomPaint(
              painter: BorderPainter(currentState: value),
              child: Center(
                child: Text(
                  '${value * 100 ~/ 2.0}%',
                ),
              ),
            ),
          );
        }
      ),
    );
  }
}

Credits to this great article: https://medium.com/@callumdixon941/creating-awesome-animated-custom-borders-in-flutter-with-canvas-90cf755cc29f