Flutter 加载小部件 class 颜色

Question

我又一次回到这里，因为我使用 flutter 进行了新的编码，并且我在实验中学习。我想做的是制作一个全局加载小部件，可以调用它来显示具有指定颜色的加载小部件，想知道是否有人可以帮助我完成这个。

例如...

我希望如何调用加载小部件：

LoadingWidget(Orange);

global_widgets.dart

import 'package:flutter/material.dart';
import 'package:myapp/res/colors.dart';

class LoadingWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation<Color>(
        // Replace following with specified Color like, CustomColors.'specifield_color'??
        // CustomColors.[replace with specified color]
        CustomColors.Orange,
      ),
    );
  }
}

class AppBarTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Image.asset(
          'assets/logo.png',
          height: 20,
        ),
        SizedBox(width: 8),
        Text(
          'My',
          style: TextStyle(
            color: CustomColors.Navy,
            fontSize: 18,
          ),
        ),
        Text(
          'App',
          style: TextStyle(
            color: CustomColors.Orange,
            fontSize: 18,
          ),
        ),
      ],
    );
  }
}

colors.dart

import 'package:flutter/material.dart';

class CustomColors {
  static final Color Navy = Color(0xFF2C384A);
  static final Color Orange = Color(0xFFF57C00);
}

Answer 1

将Color类型的变量customColor添加到LoadingWidget

class LoadingWidget extends StatelessWidget {

  final Color customColor;
  LoadingWidget(this.customColor);

  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation<Color>(
        customColor, // <--- // your specified color
      ),
    );
  }
}

现在您可以像这样调用小部件：LoadingWidget(CustomColors.Orange)

此 gist 包含工作代码，如果需要，您可以运行在 DartPad 上使用它。

Flutter 加载小部件 class 颜色

Flutter Loading Widget class Color

widget

dart

flutter