CircularProgressIndicator'ın rengi nasıl değiştirilir


136

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:


276

Bu benim için çalıştı:

valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),

bu da doğrusal ilerleme göstergesi için yardımcı oldu çok teşekkürler
Rajesh Jr.

Teşekkür! AlwaysStoppedAnimation ne zamandan beri var?
İnşaat Demiri

Flutter 1.20.0.7.2. ÖncesindenThe argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Zane Campbell

79

Sorununuzu çözmenin üç yolu

1) valueColorMülkiyet kullanma

CircularProgressIndicator(
     valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue),
),

2) accentColorAna MaterialAppwidget'ınızda ayarlayın . Bu en iyi yoldur çünkü CircularProgressIndicatorwidget'ı kullandığınızda her zaman renk ayarlamak istemezsiniz

MaterialApp(
        title: 'My App',
        home: MainPAge(),
        theme: ThemeData(accentColor: Colors.blue),
),

3) ThemeWidget'ı Kullanma

Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.red),
      child: new CircularProgressIndicator(),
)

15

accentColorWidget'ların ön plan rengi için kullanılabilir. circularprogressbarBu gibi herhangi bir ön plan widget'ının rengini değiştirir.

void main() => runApp(
  MaterialApp(
    title: 'Demo App',
    home: MainClass(),
    theme: ThemeData(accentColor: Colors.black),
  ),
);



4

tek bir renk seti için,

görüntü açıklamasını buraya girin

 CircularProgressIndicator(
     valueColor:AlwaysStoppedAnimation<Color>(Colors.red),
   );

çoklu renk değişimi / seti için.

görüntü açıklamasını buraya girin

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

kullanılan animasyon denetleyicisi burada güncel değil, yeni referans için api.flutter.dev/flutter/animation/…
Achintha Isuru

2

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),
                    ),

2

In main.dartset tema accentColor, CircularProgressIndicatorbu rengi kullanır

void main() => runApp(new MaterialApp(
  theme: ThemeData(primaryColor: Colors.red, **accentColor:  Colors.yellowAccent**),
  debugShowCheckedModeBanner: false,
  home: SplashPage()
));

Bu aynı zamanda diğer sistem renklerini de etkileyecektir, ki bu açıkça sorulmamıştı.
Alex Semeniuk

0

Bunun gibi kullanın --->

CircularProgressIndicator (valueColor: AlwaysStoppedAnimation (Colors.grey [500]),)),

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.