indicatorWidget Not Working

[SalsabeelaHasan]

Describe the bug There is no explanation that gives an example of how to use the indicatorWidget, in addition to my experience using the flutter widget does not work. Please Help !

[github-actions[bot]]

Thanks for taking the time to open an issue. I will have a look and answer as soon as possible.

[sleewok]

You use it with EasyLoading.instance when setting the configuration. Just copy one of the existing indicator widget code and customize. Then set it.

[sleewok]

Hope this helps. Copied the SpinKitRing widget code and added an image asset to the build.

/// EASY LOADING CONFIGURATION
void configEasyLoading() {
  EasyLoading.instance
    ..backgroundColor = Colors.transparent
    ..progressColor = Colors.white
    ..indicatorWidget = MySpinKitRing(color: Colors.blue)
    ..boxShadow = <BoxShadow>[] // removes black background
    ..loadingStyle = EasyLoadingStyle.light
    ..textColor = Colors.black
    ..indicatorColor = Colors.blue // color of animated loader
    ..maskColor = Colors.white.withOpacity(0.75)
    ..maskType = EasyLoadingMaskType.custom
    ..radius = 180
    ..loadingStyle = EasyLoadingStyle.custom
    ..userInteractions = true
    ..dismissOnTap = true;
}

/// Copied SpinKitRing Widget from EasyLoading
/// Added a column with asset above the loading indicator
class MySpinKitRing extends StatefulWidget {
  const MySpinKitRing({
    Key? key,
    required this.color,
    this.lineWidth = 7.0,
    this.size = 50.0,
    this.duration = const Duration(milliseconds: 1200),
    this.controller,
  }) : super(key: key);

  final Color color;
  final double size;
  final double lineWidth;
  final Duration duration;
  final AnimationController? controller;

  @override
  _MySpinKitRingState createState() => _MySpinKitRingState();
}

class _MySpinKitRingState extends State<MySpinKitRing> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation1;
  late Animation<double> _animation2;
  late Animation<double> _animation3;

  @override
  void initState() {
    super.initState();

    _controller = (widget.controller ?? AnimationController(vsync: this, duration: widget.duration))
      ..addListener(() => setState(() {}))
      ..repeat();
    _animation1 = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(parent: _controller, curve: const Interval(0.0, 1.0, curve: Curves.linear)));
    _animation2 = Tween(begin: -2 / 3, end: 1 / 2).animate(CurvedAnimation(parent: _controller, curve: const Interval(0.5, 1.0, curve: Curves.linear)));
    _animation3 = Tween(begin: 0.25, end: 5 / 6).animate(CurvedAnimation(parent: _controller, curve: const Interval(0.0, 1.0, curve: SpinKitRingCurve())));
  }

  @override
  void dispose() {
    if (widget.controller == null) {
      _controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          /// ADD LOGO ABOVE LOADER
          ///
          ///
          Image.asset(
            'assets/images/Logo-Color.png',
            width: 100,
          ),
          Transform(
            transform: Matrix4.identity()..rotateZ((_animation1.value) * 5 * pi / 6),
            alignment: FractionalOffset.center,
            child: SizedBox.fromSize(
              size: Size.square(widget.size),
              child: CustomPaint(
                foregroundPainter: RingPainter(
                  paintWidth: widget.lineWidth,
                  trackColor: widget.color,
                  progressPercent: _animation3.value,
                  startAngle: pi * _animation2.value,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class RingPainter extends CustomPainter {
  RingPainter({
    required this.paintWidth,
    this.progressPercent,
    this.startAngle,
    required this.trackColor,
  }) : trackPaint = Paint()
          ..color = trackColor
          ..style = PaintingStyle.stroke
          ..strokeWidth = paintWidth
          ..strokeCap = StrokeCap.square;

  final double paintWidth;
  final Paint trackPaint;
  final Color trackColor;
  final double? progressPercent;
  final double? startAngle;

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = (min(size.width, size.height) - paintWidth) / 2;
    canvas.drawArc(
      Rect.fromCircle(center: center, radius: radius),
      startAngle!,
      2 * pi * progressPercent!,
      false,
      trackPaint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

class SpinKitRingCurve extends Curve {
  const SpinKitRingCurve();

  @override
  double transform(double t) => (t <= 0.5) ? 2 * t : 2 * (1 - t);
}

Lee

[SalsabeelaHasan]

@sleewok, Many thanks! Can I use any widget like a Circular Progress Indicator from flutter?