CircularProgressIndicator의 색상을 변경하는 방법


110

의 색상을 CircularProgressIndicator어떻게 변경할 수 있습니까?

색상 값은의 인스턴스 Animation<Color>이지만 애니메이션 문제없이 색상을 변경하는 더 간단한 방법이 있기를 바랍니다.

답변:


229

이것은 나를 위해 일했습니다.

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

이것은 선형 진행
Rajesh Jr.

고마워! AlwaysStoppedAnimation이 언제부터 존재합니까?
철근

Flutter 1.20.0.7.2.pre에서The argument type 'AlwaysStoppedAnimation<Color>' can't be assigned to the parameter type 'Animation<Color>'
Zane Campbell

54

문제를 해결하는 세 가지 방법

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


2

기본적으로 Themedata에서 AccentColor를 상속합니다.

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

새 색상으로이 AccentColor 속성을 변경할 수 있습니다. 다른 방법은 이와 같이 미리 정의 된 ThemeData와 함께 사용하는 것입니다.

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

2

에서 main.dart설정 한 테마 accentColor의는 CircularProgressIndicator해당 색상을 사용합니다

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

이것은 또한 다른 시스템 색상에도 영향을 미치며, 이는 요청 된 내용이 아닙니다.
Alex Semeniuk

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.