সার্কুলারপ্রোগ্রেস ইন্ডিকেটরের রঙ কীভাবে পরিবর্তন করবেন


126

আমি কীভাবে এর রঙ পরিবর্তন করতে পারি CircularProgressIndicator?

রঙের মান একটি উদাহরণ Animation<Color>, তবে আমি আশা করছি যে অ্যানিমেশনটির ঝামেলা ছাড়াই রঙ পরিবর্তন করার সহজ উপায় আছে।

উত্তর:


260

এটি আমার পক্ষে কাজ করেছে:

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>'
জেন ক্যাম্পবেল

71

আপনার সমস্যা সমাধানের তিনটি উপায়

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উইজেটগুলির অগ্রভাগের রঙের জন্য ব্যবহার করা যেতে পারে t এটির সাথে কোনও ফোরগ্রাউন্ড উইজেট সহ রঙ পরিবর্তন করে circularprogressbarআপনি এটি ব্যবহার করতে পারেন:

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

9

একটি থিম এমন একটি উইজেট যা আপনি আপনার উইজেট গাছের যে কোনও জায়গায় sertোকাতে পারেন। এটি কাস্টম মানগুলির সাথে বর্তমান থিমটিকে ওভাররাইড করে এটি ব্যবহার করে দেখুন:

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

তথ্যসূত্র: https://gitter.im/flutter/flutter?at=5a84cf9218f388e626a51c2d



2

ডিফল্টরূপে, এটি থেমেডাটা থেকে অ্যাকসেন্ট কালার উত্তরাধিকার সূত্রে প্রাপ্ত

  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(
         valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
                    ),

2

ইন main.dartথিম সেট accentColor, CircularProgressIndicatorযে রঙ ব্যবহার করা হবে

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

এটি অন্যান্য সিস্টেমের রঙগুলিকেও প্রভাব ফেলবে, যা অবশ্যই জিজ্ঞাসা করা হয়নি তা নয়।
অ্যালেক্স Semeniuk

0

একটি সিগল রঙ সেট জন্য,

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

বহু রঙ পরিবর্তন / সেট জন্য।

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> 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.brown, end: Colors.red)),
        ),
      ),
    );
  }
}

0

এর মতো ব্যবহার করুন --->

সার্কুলারপ্রস্রেস ইন্ডিকেটর (ভ্যালু কালার: অলওয়েস স্টপড অ্যানিমেশন (কালারস.grey [500]),)),

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.