Overview
이번에는 로딩과 같은 또는 상세 퍼센트를 나타내게 해주는 CircularProgressIndicator 를 활용해보자
다만 로딩만 할게요
- CircularProgressIndicator 란
0. 문서
https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html
CircularProgressIndicator class - material library - Dart API
A Material Design circular progress indicator, which spins to indicate that the application is busy. A widget that shows progress along a circle. There are two kinds of circular progress indicators: Determinate. Determinate progress indicators have a speci
api.flutter.dev
https://api.flutter.dev/flutter/widgets/State/initState.html
initState method - State class - widgets library - Dart API
void initState() Called when this object is inserted into the tree. The framework will call this method exactly once for each State object it creates. Override this method to perform initialization that depends on the location at which this object was inse
api.flutter.dev
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 |