Flutter Loading Widget class Color



我再次回到这里,作为我的新编码,使用flutter和im学习作为我的实验。我想做的是制作一个全局加载小部件,它可以被调用以显示具有指定颜色的加载小部件。我想知道是否有人可以帮助我实现这一点。

例如。。。

我更喜欢如何调用加载小工具:

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

将类型为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)

这个要点包含工作代码,如果需要,可以在DartPad上运行它。

最新更新