How can I add Text or percentage in [![circular progress indicator][1]][1] flutter, like Loading or 78% ,, for more clear information I attached an image.
How can I add Text or percentage in [![circular progress indicator][1]][1] flutter, like Loading or 78% ,, for more clear information I attached an image.
How can I add Text or percentage in [![circular progress indicator][1]][1] flutter, like Loading or 78% ,, for more clear information I attached an image.
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'package:percent_indicator/percent_indicator.dart';
class Margalla_View_Housing_Scheme extends StatefulWidget {
@override
_Margalla_View_Housing_SchemeState createState() => _Margalla_View_Housing_SchemeState();
}
class _Margalla_View_Housing_SchemeState extends State<Margalla_View_Housing_Scheme> {
final imageList = [
'https://www.arteffectconsultants.com/maps/Islamabad/Margala%20View%20Housing.jpg',
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.deepPurple,
title: Text("Margalla View Housing Scheme"),
),
// add this body tag with container and photoview widget
body: Container(
child: Center(
child: Container(
height: 800,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation: 20,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: PhotoViewGallery.builder(
itemCount: imageList.length,
builder: (context, index) {
return PhotoViewGalleryPageOptions(
basePosition: Alignment.center,
imageProvider: NetworkImage(imageList[index]),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 5,
);
},
scrollPhysics: BouncingScrollPhysics(),
backgroundDecoration: BoxDecoration(
borderRadius:BorderRadius.all(Radius.circular(20)),
color: Theme.of(context).canvasColor,
),
enableRotation:true,
loadingBuilder: (context, event) => Center(
child: Container(
width: 90.0,
height: 90.0,
child: CircularProgressIndicator(
strokeWidth: 9.0,
backgroundColor:Colors.orange,
valueColor: AlwaysStoppedAnimation<Color>(Colors.deepPurple),
// semanticsLabel: "Downloading file abc.mp3",
// semanticsValue: "Percent " + (100).toString() + "%",
value: event == null
? 0
: event.cumulativeBytesLoaded / event.expectedTotalBytes,
),
),
),
),
),
),
),
),
),
),
);
}
}```
[1]: https://i.stack.imgur.com/XBLBV.png
I cannot understand your problem fully, however you may want to check : https://pub.dev/packages/percent_indicator
You can simply use that like
CircularPercentIndicator(
radius: 60.0,
lineWidth: 5.0,
percent: 1.0,
center: new Text("100%"),
progressColor: Colors.green,
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.