Question 75556 in Flutter Question posted in
The official Flutter documentation can be found here.

show percentage indicator in flutter?

Maximum dates that show in that percentage indicator was 20

If my current pending day is 10 then it will be show like half of the progress bar.

how can I show like this?

Sample code here:

    class _ApplyLeaveState extends State<ApplyLeave> {
  double percent = 20.0;
Widget build(BuildContext context) {
    double height = MediaQuery
        .of(context)
        .size
        .height;
    double width = MediaQuery
        .of(context)
        .size
        .width;

    return WillPopScope(
      onWillPop: () async {
        return false;
      },
      child: Scaffold(
        backgroundColor: Colors.white,
        drawer: SideBar(),
        appBar: AppBar(
          title: Text(app_leave),
        ),
        body: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 15.0),
                  child: Align(
                    alignment: Alignment.center,
                    child: CircularPercentIndicator(
                      radius: 100.0,
                      lineWidth: 15.0,
                      percent: 0.6,
                        center:  Text(
                          leave_pending,
                          style: TextStyle(
                              fontSize: 20.0,
                              fontWeight: FontWeight.w600,
                              color: Colors.black),
                        ),
                      backgroundColor: Colors.grey,
                      circularStrokeCap: CircularStrokeCap.round,
                      progressColor: Colors.blue,
                    ),
                  ),
                ),

I have tried this code?

Tags:

2

Answers


  1. 0

    The logic will be

    CircularProgressIndicator(
  value: currentDay / maxDay,
),
Text("${maxDay - currentDay}d"),

    You can play with widget.

    class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int currentDay = 10;
  int maxDay = 20;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GestureDetector(
        onTap: () {
          setState(() {
            currentDay++;
          });
        },
        child: Scaffold(
          body: Center(
            child: SizedBox(
              height: 200,
              width: 200,
              child: Stack(
                fit: StackFit.expand,
                children: [
                  CircularProgressIndicator(
                    value: currentDay / maxDay,
                  ),
                  Align(
                    child: Text("${maxDay - currentDay}d"),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0 
     `    static const EventChannel _channel = EventChannel('video_editor_progress');    `    


late StreamSubscription _streamSubscription;
 int processPercentage = 0; 




  void initState() {
_enableEventReceiver();
super.initState();}   


 void _enableEventReceiver() {
_streamSubscription =
    _channel.receiveBroadcastStream().listen((dynamic event) {
  setState(() {
    processPercentage = (event.toDouble() * 100).round();
  });
}, onError: (dynamic error) {
  log('Received error: ${error.message}');
}, cancelOnError: true);};




void loadingStart(){
setState(() => processPercentage = 0);};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search