Rengini nasıl değiştirebilirim CircularProgressIndicator
?
Rengin değeri bir örneğidir Animation<Color>
, ancak animasyonun sıkıntısı olmadan rengi değiştirmenin daha basit bir yolu olduğunu umuyorum.
Yanıtlar:
Bu benim için çalıştı:
valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
1) valueColor
Mülkiyet kullanma
CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
),
2) accentColor
Ana MaterialApp
widget'ınızda ayarlayın .
Bu en iyi yoldur çünkü CircularProgressIndicator
widget'ı kullandığınızda her zaman renk ayarlamak istemezsiniz
MaterialApp(
title: 'My App',
home: MainPAge(),
theme: ThemeData(accentColor: Colors.blue),
),
3) Theme
Widget'ı Kullanma
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.red),
child: new CircularProgressIndicator(),
)
Tema, pencere öğesi ağacınızın herhangi bir yerine ekleyebileceğiniz bir pencere öğesidir. Mevcut temayı özel değerlerle geçersiz kılar Şunu deneyin:
new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: new CircularProgressIndicator(),
);
referans: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d
valueColor:new AlwaysStoppedAnimation<Color>(Colors.yellow),
tek bir renk seti için,
CircularProgressIndicator(
valueColor:AlwaysStoppedAnimation<Color>(Colors.red),
);
çoklu renk değişimi / seti için.
class MyApp extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyApp> with TickerProviderStateMixin {
AnimationController animationController;
@override
void dispose() {
// TODO: implement dispose
super.dispose();
animationController.dispose();
}
@override
void initState() {
super.initState();
animationController =
AnimationController(duration: new Duration(seconds: 2), vsync: this);
animationController.repeat();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Color Change CircularProgressIndicator"),
),
body: Center(
child: CircularProgressIndicator(
valueColor: animationController
.drive(ColorTween(begin: Colors.blueAccent, end: Colors.red)),
),
),
);
}
}
Varsayılan olarak, accentColor'ı Themedata'dan devralır.
void main() => runApp(new MaterialApp(
theme: ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.blueAccent,
//This will be the color for CircularProgressIndicator color
),
home: Homepage()
));
Bu accentColor özelliğini yeni renginizle değiştirebilirsiniz. Diğer bir yol, bunun gibi önceden tanımlanmış ThemeData ile kullanmaktır
void main() => runApp(new MaterialApp(
theme: ThemeData.light().copyWith(
accentColor: Colors.blueAccent,
//change the color for CircularProgressIndicator color here
),
home: Homepage()
));
Ya da bu renk özelliğini doğrudan aşağıda gösterildiği gibi CircularProgressIndicator'da değiştirebilirsiniz.
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),
In main.dart
set tema accentColor
, CircularProgressIndicator
bu rengi kullanır
void main() => runApp(new MaterialApp(
theme: ThemeData(primaryColor: Colors.red, **accentColor: Colors.yellowAccent**),
debugShowCheckedModeBanner: false,
home: SplashPage()
));
Bunun gibi kullanın --->
CircularProgressIndicator (valueColor: AlwaysStoppedAnimation (Colors.grey [500]),)),