CupertinoActivityIndicator class
시계 방향으로 회전하는 iOS 스타일의 활동 표시기입니다.
공식 문서 코드
앱에 로딩을 보여줄 지표가 필요한가? 또한 UI로 Cupertino 위젯을 사용하고 있는가? 그렇다면 iOS 스타일의 로딩 스피너를 표시하는 CupertinoActivityIndicator 위젯을 사용하면 된다.
이 CupertinoActivityIndicator 위젯은 iOS 스타일의 로딩 인디케이터를 보여줄 수 있는 위젯으로 쉽게 사용할 수 있다. 바로 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| color | Color? | null | 인디케이터의 색상을 지정 |
| animating | bool | true | 인디케이터가 애니메이션을 실행할지 여부 |
| radius | double | 10.0 | 인디케이터의 반지름을 설정 |
| progress | double | 1.0 | 인디케이터에 표시되는 눈금의 비율 (0.0~1.0) |
사용하는 방법은 엄청나게 간단하다.
Center(
child: CupertinoActivityIndicator(),
)바로 CupertinoActivityIndicator 위젯을 사용해 주면 되는데 기본적으로 시계방향으로 인디케이터의 애니메이션이 회전하게 된다.
근데 여기서 프로그래스바의 애니메이션(움직이는 것)을 중단시키고 싶은 경우에는 뭘 사용하면 될까?
바로 bool 타입을 가지고 있는 animating 파라미터를 false로 설정하면 된다.
CupertinoActivityIndicator(
animating: false,
)
이렇게 사용해 주면 멈춰있는 CupertinoActivityIndicator를 사용할 수 있다. 또한 여기에서 크기를 키우고 싶다면 파라미터인 radius를 사용해 주면 된다.
CupertinoActivityIndicator(
radius: 50,
)이렇게 사용하면 Transform.scale 위젯을 사용하여 크기를 조정하는 것처럼 CupertinoActivityIndicator의 크기를 직접적로 조정할 수 있다. (참고로 Transform.scale에서 scale: 5 정도가 CupertinoActivityIndicator의 radius: 50 정도이다.)
|
|
또한 color 파라미터를 사용하여 색도 바꿀 수 있다.
근데 이거 신기한 게 색상을 지정해 주면 나머지 색도 함께 바뀐다.
CupertinoActivityIndicator(
color: Colors.blue,
)
또한 partiallyRevealed 생성자를 붙여 사용해 주면 progress의 개수도 조정이 가능하다.
CupertinoActivityIndicator.partiallyRevealed(
progress: 0.7,
)단, 이 상태에서는 애니메이팅은 동작하지 않게 된다.
이 위젯은 결정되지 않은 행동을 기다리는 경우 유용하게 사용되곤 하는데 그 예시를 FutureBuilder로 사용해서 한번 봐보자.
먼저 호출하면 3초 뒤에 스트링이 반환되는 메서드를 하나 만들자. 이것을 만들어주면 간단하게 로더 동작을 구현할 수 있을 것이다.
Future<String> fetchData() async {
await Future.delayed(Duration(seconds: 3));
return "데이터 로딩 완료!";
}이제 FutureBuilder를 사용하여 구현을 해줄 건데 인자값인 snapshot을 사용해 주면 된다.
그전에 먼저 방금 만든 fetchData 메서드를 future 파라미터에 넣어준다.
FutureBuilder(
future: fetchData(),
)이제 빌더 함수를 넣어줘야 하는데 앞서 말했듯이 snapshot을 사용해 줄 건데 어떻게 사용할 것이냐 하면 상수를 사용해 줄 것이다.
인자값인 snapshot은 AsyncSnapshot 타입의 객체인데 이 객체 안에는 connectionState라는 속성이 존재한다.
이 속성은 비동기 작업의 현재 상태를 나타내준다. 즉 이 snapshot.connectionState를 가지고 판단을 해주면 되는 것이다.
그래서 먼저 if문을 사용해서 걸러줄 것이다.
if (snapshot.connectionState == ConnectionState.waiting) {}이렇게 하면 이 조건이 true일 때는 비동기 작업이 아직 완료되지 않았기 때문에 로딩 중이라는 의미가 된다. 그래서 이제 이 조건문 안에서는 아직 로딩 중이기 때문에 CupertinoActivityIndicator 등을 반환시켜 주면 되겠다.
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CupertinoActivityIndicator();
} else {
return Text('${snapshot.data}');
}
}이제 또한 snapshot.data는 반환된 데이터 값을 갖고 있기 때문에 현재 이 코드에서는 위에서 스트링을 반환시켰으므로 그대로 출력을 해줬다.
이렇게 CupertinoActivityIndicator 위젯에 대해 알아보았다. 솔직히 이 progress들을 동그랗게 만드는 방법이 젤 궁금했는데 찾아봐도 잘 나오지 않고 패키지를 사용하는 방법 밖에 없었다. 난 위의 사진 같은 것을 원했는데... 암튼 도움이 되었길 바라며 마치겠다.
