Flutter：如何顯示 CircularprogressIndicator？

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();
            }
          ),
        ],
      ),
    );
  }

這是我的代碼。 我編寫了刷新方法。 我想在點擊SpeedDialChild時顯示CircularprogressIndicator 。 我的數據來自 Firestore。 所以當數據量很大時需要很長時間。 我怎樣才能做到這一點？

Answer 1

這是徑向進度條代碼，可用於更新 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,
                      ),
                    ),
                  ),
                ),

不斷更新百分比值

double sweepAngle=2*pi*percent

點擊按鈕

Answer 2

將您的代碼更改為此

  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),
    );
  }