Overview
이번에는 로딩과 같은 또는 상세 퍼센트를 나타내게 해주는 CircularProgressIndicator 를 활용해보자
다만 로딩만 할게요
- CircularProgressIndicator 란
0. 문서
https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html
https://api.flutter.dev/flutter/widgets/State/initState.html
1. CircularProgressIndicator 란
원을 따라 진행 상황을 표시하는 위젯입니다.
뭐 아실테니 바로 보여드리죠
간단하죠?
이제 코드로 보죠 다운로드는 뭐 서버를 만들어야하는데 귀찮아서 Futrue.delay 를 사용했습니다.
밑을 보시면 isLoading 이 class 전역 변수로 되어있고 initState 함수안에서 Future.delay 로 해당 딜레이를 시켜 setState 로 재 빌드하는 방식입니다. 또한 build 에는 삼항 연산자를 사용하여 isLoading 이 true 이면 로딩을 보여주고 isLoading 이 false 라면 "다운로드가 완료되었습니다." 라는 메시지를 띄우게 됩니다.
initState 메서드 란
이 객체가 트리에 삽입될 때 호출됩니다.
프레임워크는 생성된 각 State 개체에 대해 이 메서드를 정확히 한 번 호출합니다.
이 객체가 트리에 삽입된 위치(예: context ) 또는 이 객체를 구성하는 데 사용된 위젯(예: 위젯 )에 따라 초기화를 수행하려면 이 메서드를 재정의합니다.
한마디로 제일 처음 실행되는 녀석이다! 이말입니다. 나머지는 크게 뭐.. 없으니 바로 패스
class _Home extends StatefulWidget {
const _Home({super.key});
@override
State<_Home> createState() => _HomeState();
}
class _HomeState extends State<_Home> {
var isLoading = true;
// CircularProgressIndicator
// 네트워크로 뭔가를 다운로드 할 때 사용
// initState 란?
// 제일 최초에 실행되는 것
@override
void initState() {
super.initState();
print("initState");
// [화면은 이미 구성됨]
// 딜레이 시키기
Future.delayed(Duration(seconds: 3), () {
// 네트워크 다운로드 시간 3초
print("다운로드 완료");
setState(() {
isLoading = false;
});
});
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: isLoading ? CircularProgressIndicator(
backgroundColor: Colors.red,
strokeWidth: 1, // 굵기
) : Text("다운로드 완료되었습니다."),
),
),
);
}
}
'flutter & dart' 카테고리의 다른 글
flutter & dart - SingleChildScrollView (0) | 2024.04.01 |
---|---|
flutter & dart - BoxConstraints (0) | 2024.04.01 |
flutter & dart - showModalBottomSheet (0) | 2024.04.01 |
flutter & dart - BottomNavigationBar , IndexedStack 위젯 (0) | 2024.04.01 |
flutter & dart - 블러 처리(모자이크)를 해보자 BackdropFilter (0) | 2024.04.01 |