CircularProgressIndicator का रंग कैसे बदलें


105

मैं का रंग कैसे बदल सकता हूँ CircularProgressIndicator?

रंग का मूल्य एक उदाहरण है Animation<Color>, लेकिन मैं उम्मीद कर रहा हूं कि एनीमेशन की परेशानी के बिना रंग बदलने का एक सरल तरीका है।

जवाबों:


219

यह मेरे लिए काम किया:

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

इसने रैखिक प्रगति के लिए मदद की बहुत बहुत धन्यवाद
राजेश जूनियर

धन्यवाद! कब से हमेशा मौजूद है?
रीबार

स्पंदन में 1.20.0.7.2.pre मैं मिलता हैThe argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
ज़ैन कैंपबेल

50

अपनी समस्या को हल करने के लिए तीन तरीके

1) valueColorसंपत्ति का उपयोग करना

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

2) accentColorअपने मुख्य MaterialAppविजेट में सेट करें । यह सबसे अच्छा तरीका है क्योंकि आप CircularProgressIndicatorविजेट का उपयोग करते समय हर समय रंग सेट नहीं करना चाहते हैं

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

3) Themeविजेट का उपयोग करना

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

15

accentColorविजेट्स के अग्रभूमि रंग के लिए इस्तेमाल किया जा सकता है। यह किसी भी अग्रभूमि विगेट्स सहित रंग बदलता है circularprogressbarआप इस तरह का उपयोग कर सकते हैं:

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

9

एक थीम एक विजेट है जिसे आप अपने विजेट ट्री में कहीं भी सम्मिलित कर सकते हैं। यह कस्टम मानों के साथ वर्तमान विषय को ओवरराइड करता है यह कोशिश करें:

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

संदर्भ: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51a2d


2

में main.dartविषय की स्थापना की accentColor, CircularProgressIndicatorकि रंग का उपयोग करेगा

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

यह अन्य सिस्टम रंगों को भी प्रभावित करेगा, जो स्पष्ट रूप से नहीं पूछा गया था।
एलेक्स सेमीनेक

1

डिफ़ॉल्ट रूप से, यह थीमाडिट से एक्सेंटकोलर विरासत में मिला है

  void main() => runApp(new MaterialApp(
  theme: ThemeData(
                 primaryColor: Colors.blue,
                 accentColor:  Colors.blueAccent,
                 //This will be the color for CircularProgressIndicator color
               ),
  home: Homepage()
    ));

आप इस लहजे की संपत्ति को अपने नए रंग के साथ बदल सकते हैं। अन्य तरीका इस तरह से पूर्वनिर्धारित थीमडाटा के साथ उपयोग कर रहा है

void main() => runApp(new MaterialApp(
  theme: ThemeData.light().copyWith(
                 accentColor:  Colors.blueAccent,
                 //change the color for CircularProgressIndicator color here
               ),
  home: Homepage()
    ));

या फिर आप नीचे दिखाए गए अनुसार इस रंग संपत्ति को सीधे CircularProgressIndicator में बदल सकते हैं

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

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.