수강 강의: https://url.kr/inflearn
진도: 72강 / 127강

①. [위치기반 출석체크 앱] 만들기

0. 미리보기

• Google Maps 지도 사용하기
• 지도에 마커 표시하기
• 지도에 동그라미 표시하기
• 현재 위치 표시하고 위도,경도 구하기
• 위치간의 거리 (내 위치와 회사 위치) 구하기

0-1. 패키지 설치

• gelocator (https://pub.dev/packages/geolocator)
• googleMaps (https://pub.dev/packages/google_maps_flutter)

1. 구현하기

1-1. 구글 맵 사용하기

1-1-1. LatLng, 위치 가져오기

class LatLng _name = LatLng (double latitude, double longtitude)

LatLng를 이용해서 위치를 가져올 수 있다.

1-1-2. CameraPosition, 카메라 줌 설정하기

CameraPosition _name1 = CameraPosition(
    target: _name2,
    zoom: 15, // 숫자가 클수록 확대되어 보임
  );

target의 zoom을 설정할 수 있다.

1-1-3. Circle, 원 표시하기

static final Circle withinDistanceCircle = Circle(
    circleId: CircleId('withinDistanceCircle'), // Circle 이름
    center: companyLatLng, // 원의 위치
    fillColor: Colors.blue.withOpacity(0.5), // 색상 채우기
    radius: 100,// 반지름
    strokeColor: Colors.blue, // 원 테두리 색
    strokeWidth: 1, // 원 테두리 굵기
  );

회사 위치를 원의 중심으로 잡아서 100미터 안 원으로 반경을 표시한다.

1-1-4. Marker, 마커 표시하기

  static final Marker marker = Marker(
    markerId: MarkerId('marker'),
    position: companyLatLng,
  );

회사 위치 바로 위에 마커를 표시한다.

1-2. 출첵 버튼

1-2-1. 현재 위치에 따라 출첵 버튼 나타내기

현재 위치가 원 반경 안에 있으면 출첵 버튼이 뜨도록, 밖에 있으면 출첵 버튼이 뜨지 않는 상태가 되도록 해보았다.
if문을 사용할 것이기 때문에 bool 변수를 선언해준다.

bool isWithinRange = false;

로 선언해준다.
그리고 현재 위치가 반경 안에 있는 것을 어떻게 표현 할 수 있을까?
이때 Geolocator 를 이용한다.

Geolocator.disctanceBetween() : start의 latitude, longtitude와 end의 latitude, longtitude를 비교한 거리를 return한다.

start를 현재 위치로 하고, end를 회사 위치로 해서 distance를 구해보았다.

final distance = Geolocator.distanceBetween(
	start.latitude,
	start.longitude,
	end.latitude,
	end.longitude,
);

이렇게 distance를 가져오고, if문으로 distance가 반경 거리인 okDistance보다 작으면 isWithinRange를 true로 바꾸도록 한다.

if (distance < okDistance) {
	isWithinRange = true;
}

1-2-2. 출첵 완료하면 출첵 버튼 없애기

위에서와 마찬가지로, if문을 사용할 것이기 때문에 bool 변수를 선언해준다.

bool choolCheckDone = false;

isWithinRange가 True이고, choolCheckDone이 False인 경우에만 출첵 버튼이 보이도록 한다.

if (!choolCheckDone && isWithinRange)
	TextButton(
		onPressed: onPressed,
		child: Text('출근하기'),
	)

2. 새로 알게된 점

• Column 아래에 바로 if 문을 쓸 수 있다!!!
• 코드가 긴 경우에는 ? : 로 표시하지 말고 if문으로 쓰는게 낫다!!!