使用Flutter 提供程序包加载状态应用程序时，在自定义按钮中显示CircularProgressIndicator

您正面临这个问题，因为您正在TrustyButton中创建OrderService的新实例.相反，您必须举起ChangeNotifierProvider<TrustyButton>，并通过TrustyButton内的Consumer使用它. 下面是一个最小的例子:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: ChangeNotifierProvider(
            create: (context) => OrderService(),
            builder: (context, _) {
              return TrustyButton(
                onTap: () => context.read<OrderService>().deleteOrderWithId(),
              );
            },
          ),
        ),
      ),
    );
  }
}

class OrderService with ChangeNotifier {
  bool _isLoading = false;

  bool get isLoading => _isLoading;

  void _toggleLoading() {
    _isLoading = !_isLoading;
    notifyListeners();
  }

  Future<void> deleteOrderWithId() async {
    try {
      _toggleLoading();
      await Future.delayed(const Duration(seconds: 5));
    } catch (err) {
      print(err);
    } finally {
      _toggleLoading();
    }
  }
}

class TrustyButton extends StatelessWidget {
  final void Function() onTap;

  TrustyButton({
    super.key,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Consumer<OrderService>(
        builder: (context, orderService, _) => GestureDetector(
          onTap: onTap,
          child: Opacity(
            opacity: orderService.isLoading ? 0.5 : 1,
            child: Container(
              height: 56,
              decoration: BoxDecoration(
                color: Colors.amberAccent,
                borderRadius: const BorderRadius.all(
                  Radius.circular(20),
                ),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0x15000000),
                    blurRadius: 10,
                    spreadRadius: 0,
                    offset: Offset.fromDirection(2, 2),
                  ),
                ],
              ),
              child: Center(
                child: orderService.isLoading
                    ? const CircularProgressIndicator(
                        color: Colors.white,
                      )
                    : Text('Delete'),
              ),
            ),
          ),
        ),
      );
  }
}