출석체크 앱

https://mapsplatform.google.com/

Google Maps Platform - Location and Mapping Solutions

구글지도 플랫폼 가서 결제등록 해준다(유료 사용하지 않으면 청구 되지 않는다)

API Key 가져와서 안드로이드, iOS 각각 설정해준다

 

사용 플러터 패키지: geolocator: ^9.0.2, google_maps: ^6.3.0

 

 

 

home_Screen.dart

LatLng class

위도와 경도로 특정 위치 표현할 수 있는 클래스다

첫 번째 매개변수: latitude(위도)

두 번째 매개변수: longtitude(경도)

 

 

 

home_Screen.dart

 

GoogleMap 위젯에 필수로 입력해야하는 매개변수 initialCameraPosition에는 CameraPosition 클래스 입력해준다

CameraPosition의 target 매개변수에는 지도의 중심이 될 위치 LatLng으로 입력해준다

확대 정도 의미하는 zoom에는 double 형으로 입력할 수 있다

 

 

 

MapType

hybrid(왼), normal(오)

 

satellite(왼), terrain(오)

 

 

 

home_Screen.dart

기여운 내 앱바..✨

 

 

 

home_Screen.dart

flex 값 안주면 _CustomGoogleMap 부분과 _Chulcheck 부분이 딱 반반으로 나뉜다

flex:2로 해줌으로서 _CustomGoogleMap 부분이 2, _Chulcheck 부분이 1의 비율로 나뉘게 설정했다

 

 

 

 

home_Screen.dart

권한 확인하는 함수

유저가 눌러주는 값으로 작업하기 때문에 async로 한다

미래에 String 값으로 받을 것으로 지정한다

 

chkPermission()

기기 자체의 GPS 사용 권한 확인하고 앱에서 위치 서비스를 사용할 수 있는지 확인 후 허가되면 허가되었다는 String 값 반환해주고 아니면 문제 상황에 대한 메시지를 출력해준다

 

 

 

FutureBuilder에 입력한 future()가 바로 실행되면서 권한을 요청하는 팝업이 뜬다

여기서 권한을 허가해주지 않으면 화면 중심에 에러 메시지 보여준다

허가해주면 구글 지도를 볼 수 있다

 

 

 

ConnectionState.waiting일 경우 CircularProgressIndicator를 보여준다

 

 

 

 

FutureBuilder 써서 리턴되는 값과 Future의 상태에 따라 각각 다른 렌더링 해줄 수 있다

 

 

 

myLocationEnabled: true

에뮬레이터에서 현재 위치 지정해주고 잘 뜨는지 확인한다

포스코DX 요기가 맞냐며 😗

 

 

 

 

현재 위치(companyLatLng 변수) 기준으로 100m 반경까지 들어오게 원 그려주기

 

 

 

핫핑꾸 색 예뿌다

마커도 설정해주긔!

 

 

 

StreamBuilder

 

현재 위치가 바뀔 때마다 새로운 위치가 yield된다

새로운 위치가 yield되면 snapshot.data 바뀐다

위치 바뀔 때마다 Circle값 계산해서 조건에 따라 진행되게 해주기

 

 

 

반경 내(왼), 반경 외(오)

지정한 대로 잘 보여진다

 

 

 

반경 내에 있을 경우에만 OutlineButton(출근하기)이 보여지게 한다

 

 

 

출근하기 버튼 눌렀을 경우 출근하기 alert 띄우기

글자색 바꿔줬다!

 

 

 

이미 출첵된 경우 green

if (!chulCheckDone && isInRange)
  //출첵하기 전이면서 반경 내에 있을 경우에만 출근하기 버튼 띄우기
  OutlinedButton(
    onPressed: onPressed,
    child: Text(
      "출근하기",
      style: TextStyle(
        fontSize: 20.0,
        color: Colors.black54,
      ),
    ),
  ),

출첵하기 전이면서 반경 내에 있을 경우에만 출근하기 버튼 띄워준다

 

 

 

alertDialog에서 취소 누르면 뒤로가기,

승인 누르면 아래 지정한대로 green이 된다

Icon(
  Icons.timelapse_rounded,
  size: 50.0,
  color: chulCheckDone
      ? Colors.green

1) 반경 100m 외 지역에 있는 상태

2) 회사 범위에 들어온 상태

3) 출근하기 버튼 눌러 alert 뜬 상태

4) 승인 버튼 눌러 범위 초록색으로 표시됨

 

 

 

현재 위치 아이콘을 앱바에 띄웠다

지도 위치를 다른 곳으로 해도 현재 위치 아이콘을 누르면 현재 위치를 보여준다