Flutter: How to show CircularprogressIndicator? - flutter

Question

void refresh() async {
await get.getFromFirestore(id);
await get.showData(get.data(), context);
setState(() {
markerList = get.getList();
})
}
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: GoogleMap(
mapType: MapType.normal,
mapToolbarEnabled: false,
initialCameraPosition: _currentlo,
onMapCreated: _onMapCreated,
markers: markerList
),
),
floatingActionButton: SpeedDial(
animatedIcon: AnimatedIcons.menu_close,
animatedIconTheme: IconThemeData(size: 22, color: Colors.black),
closeManually: false,
curve: Curves.bounceIn,
overlayColor: Colors.black,
children: [
SpeedDialChild(
backgroundColor: Colors.white,
child: Icon(Icons.refresh, color: Colors.black,),
onTap: (){
refresh();
}
),
],
),
);
}
This is my code. I programmed refresh method. I want to show CircularprogressIndicator when I tap the SpeedDialChild. My data comes from Firestore. So it takes long time when data size is big. How can I do this?

Answer 1

This is radial progressbar code which you can use to update UI
import 'dart:math';
import 'dart:ui';
import 'package:flutter/material.dart';
class RadialPainter extends CustomPainter {
final Color bgColor;
final Color lineColor;
final double width;
final double percent;
RadialPainter({this.bgColor, this.lineColor, this.width, this.percent});
#override
void paint(Canvas canvas, Size size) {
Paint bgLine = new Paint()
..color = bgColor
..strokeCap = StrokeCap.round
..style=PaintingStyle.stroke
..strokeWidth=width;
Paint completedLine = new Paint()
..color = lineColor
..strokeCap = StrokeCap.round
..style=PaintingStyle.stroke
..strokeWidth=width;
Offset center= Offset(size.width/2, size.height/2);
double radius= min(size.width/2, size.height/2);
double sweepAngle=2*pi*percent;
canvas.drawCircle(center, radius, bgLine);
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
pi,
sweepAngle,
false,
completedLine
);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}
To call this function
child: CustomPaint(
foregroundPainter: RadialPainter(
bgColor: Colors.grey[200],
lineColor: getColor(context, percent),
percent: percent,
width: 15.0),
child: Center(
child: Text(
'\$${amountLeft.toStringAsFixed(2)} / \$${widget.category.maxAmount}',
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
),
keep updating the percent value
double sweepAngle=2*pi*percent
on button click

Answer 2

change your code to this
void refresh() async {
setState(() {
isLoading = true;
});
await get.getFromFirestore(id);
await get.showData(data, context);
setState(() {
isLoading = false;
markerList = get.getList();
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: isLoading ? Center(child: CircularProgressIndicator()) : ListView(here your list),
);
}