출첵 App 실습 리뷰 2 - futurebuilder

1. FutureBuilder 초기화하기

   body: FutureBuilder(
     future: checkPermission(),
     builder: (BuildContext context, AsyncSnapshot snapshot) {
       ...
     },
   )

   • FutureBuilder는 future라는 매개변수에 checkPermission()을 설정해서 시작해요. 이 함수는 위치 권한을 확인하는 역할을 해요.

2. checkPermission() 실행하기

   checkPermission() async {
     final isLocationEnabled = await Geolocator.isLocationServiceEnabled();
     ...
   }

   • checkPermission() 함수는 위치 서비스가 켜져 있는지와 권한이 있는지 확인해요. 이 함수는 시간이 걸리기 때문에 비동기 함수로 작성되었어요.

3. FutureBuilder가 결과를 기다림

   • checkPermission() 함수가 실행되는 동안 FutureBuilder는 결과를 기다려요. 이때 builder 함수가 UI를 그리는 데 사용돼요.

4. 결과가 준비될 때까지 로딩 상태 표시

   builder: (BuildContext context, AsyncSnapshot snapshot) {
     if (snapshot.hasError) {
       return Center(
         child: Text(snapshot.error.toString()),
       );
     }
   }

   • builder 함수는 snapshot이라는 데이터를 통해 UI를 만들어요.
   • 처음에는 데이터가 준비되지 않았기 때문에 로딩 화면이나 빈 화면을 보여줄 수 있어요.

5. Future 완료 후 결과 처리

   • checkPermission() 함수가 끝나면 FutureBuilder는 결과를 받아요. 결과가 오류일 수도 있고, 정상일 수도 있어요.
   • 오류가 있으면 오류 메시지를 화면에 표시해요.

   if (snapshot.hasError) {
     return Center(
       child: Text(snapshot.error.toString()),
     );
   }

6. 권한이 정상일 때 메인 UI 표시

   • 오류가 없고 권한이 잘 설정된 경우, 메인 UI를 화면에 보여줘요.

   return Column(
     children: [
       Expanded(
         flex: 2,
         child: GoogleMap(
           initialCameraPosition: initialPosition,
           mapType: MapType.normal,
           myLocationEnabled: true,
           myLocationButtonEnabled: false,
           zoomControlsEnabled: false,
           onMapCreated: (GoogleMapController controller) {
             this.controller = controller;
           },
           markers: {...},
           circles: {...},
         ),
       ),
       Expanded(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [...],
         ),
       )
     ],
   );

   • 이 UI는 권한 확인이 성공적으로 끝난 후에만 보여져요.

FutureBuilder 흐름 요약

1. 초기화: FutureBuilder는 future: checkPermission()과 함께 시작해요.
2. 비동기 함수 호출: checkPermission()을 실행하고 결과를 기다려요.
3. 로딩 화면 표시: 결과가 준비될 때까지 로딩 화면이나 빈 화면을 보여줄 수 있어요.
4. 결과 처리: Future가 완료되면 오류 메시지를 보여주거나, 정상적인 경우 메인 UI를 보여줘요.