如何實現自定義或 Flutter 加載指示器

Question

我使用GestureDetector包裝了下面的代碼主體，從而使我能夠使用小部件中可用的onVerticalDragEnd方法。 當應用程序檢測到垂直拖動時，會調用_onRefreshing function，它會在延遲 2 秒后更新 Text 小部件。

我想在_onRefreshing function 運行時包含一個加載指示器。

我如何在 Flutter 中實現這個任務？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class _MyAppState extends State<MyApp> {
  dynamic balanceAvailable = 0;

  void _onRefreshing(DragEndDetails details) async {
    await Future.delayed(const Duration(seconds: 2));

    if (details.velocity.pixelsPerSecond.dy > 0) {
      setState(() {
        balanceAvailable = 1000;
      });
      print('newbalance : $balanceAvailable');
      print(details.velocity.pixelsPerSecond.dy);
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          onVerticalDragEnd: _onRefreshing,
          child: Container(
            width: double.infinity,
            color: Colors.lightBlue,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                RaisedButton(
                  onPressed: () {},
                  child: Text("Button 1"),
                ),
                SizedBox(height: 100.0),
                Text('$balanceAvailable'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以在 _onRefreshing 方法的 showdialog 中返回 CircularProgressIndicator。 2 秒延遲后，您可以使用 Navigator.pop() 將其刪除； 也許是這樣的：

void _onRefreshing(DragEndDetails details) async {
        showDialog(
        context: context,
        builder: (BuildContext context) {
          return Center(
            child: SizedBox(
              height: MediaQuery.of(context).size.height/4,
              width: MediaQuery.of(context).size.width/2,
              child: CircularProgressIndicator(
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
              ),
            ),
          );

        });
    await Future.delayed(const Duration(seconds: 2));

    if (details.velocity.pixelsPerSecond.dy > 0) {
      setState(() {
        balanceAvailable = 1000;
      });
      print('newbalance : $balanceAvailable');
      print(details.velocity.pixelsPerSecond.dy);
    }
    Navigator.pop(context);
  }