flutter로 앱을 열심히 개발하다 보니 iphone에 직접 실행시켜서 개발 과정을 확인하고 싶었다.

실제 앱에서는 padding이나, 이미지 크기 등이 어색하게 보일 수 있기 때문에 iphone 연동이 시급했다.

하지만 flutter 초보인 내게 xcode를 다루는 일은 너무 어려웠다😭

여러 reference들을 참고했는데, 오히려 그것이 내게는 독이 되었던 것 같다.

여러 번의 실패 끝에 프로젝트를 다시 시작하기를 반복했다.

다시는 같은 실수를 하지 않기 위해 하나씩 정리하며 기록하려 한다.

1. iphone을 맥에 연결한다.

맥에 연결하면, finder에서 연결된 iphone을 확인할 수 있다.

해당 기기를 선택하면, 신뢰에 대한 부분이 나오는데 신뢰를 선택하면 된다. 

2. 실행하고자 하는 폴더를 찾는다.

나같은 경우, 실행하고자 하는 폴더 명이 "my_work_plz" 였다. (폴더명에서도 간절함을...)

해당 폴더에 들어가서 ios > Runner.xcworkspace 로 이동해서 파일을 연다. 파일을 열고 상단에 있는 Runner > 김하람의 iphone이 되도록 한다.

Runner > 이 부분에 ios Device가 선택되면 된다.

3. Runner > Targets에 Runner를 선택하고, Signing & Capabilities의 Signing

여기에서 add account를 선택해서 apple id로 로그인을 한다. 

* 전제조건은, apple developer.com 에서 개발자 등록을 해야 한다는 것!

Bundle Identifier는 다른 사람이 사용하지 않을만한 것으로 지정해야 한다. 그래서 나는,

com.example.firstwork -> com.example.firstworksesd 로 바꿔줬다. 

4. 이렇게 Bundle Identifier 가 통과되면, 이 실행 버튼을 눌러주면 된다.

5. keychain password

이렇게 실행을 하다 보면, keychain password를 입력하라는 창이 나오는데, 이 부분은 미처 캡쳐하지 못했다..😭

사실 나는 keychain password에서도 꽤나 많은 시간을 쏟았다.. keychain이 뭔지도 잘 모르겠는데, 갑자기 비밀번호를 입력하라고 하니 매우 당황스러웠다. 비밀번호를 설정한 적이 없어 굉장히 당황했으나, 대부분 컴퓨터 잠금 비밀번호라고 한다. 

물론 나는 되지 않아서, keychain password를 초기화하고, 재설정했다. 기회가 된다면 이 부분도 포스팅 해봐야겠다.

Always Allow를 선택하면 나중에 훨씬 편하다!

그렇게 실행을 하다 보면, Could not launch "Runner" 라는 다이얼로그가 뜬다. 이는 연결하려는 기기가 당신을 개발자로 신뢰하지 않기 때문이다. 일단 OK를 선택하고, 연결하려는 기기로 가보자.

6. 기기에서 설정 > 일반 > VPN 및 기기 관리

기기에서 설정 > 일반 > VPN 및 기기 관리로 이동해서 Apple Development~~ 부분을 선택하고, 신뢰하겠다는 버튼을 누르면 된다.

여기까지만 했다면 벌써 80%이상 끝났다!!

이렇게 기기에서 신뢰하겠다는 것까지 선택한 뒤, 다시 xcode에서 실행 버튼을 누르면....!!

기기에서 또 어떤 창이 나온다. 이 모든 부분을 캡쳐 했어야 했는데.. 너무 아쉽다..😢

어쨌든, xcode를 실행했을 때 기기에서 어떤 창이 나온다면 OK 또는 확인을 선택하면 된다.

아마 로컬 네트워크에 기기를 연결할 것이느냐에 대한 창이 나올 것이다.

7. vscode 빌드

이제 xcode를 잠시 뒤로 두고, 다시 vscode로 넘어와보자.

vscode에서 빌드를 하기 전에, vscode 우측 하단에 원하는 기기가 잘 연결 됐는지 확인해보자.

확인이 됐다면, vscode에서 빌드를 시작하면, 연결한 기기에서 코드가 실행되는 것을 확인하면 좋겠지만, 아쉽게도 vscode에서 또 하나의 창이 뜰 것이다...

마지막 창이다.. 이 부분도 캡쳐를 하지 못했는데, "iproxy"에 대한 부분이었다. vscode를 실행하는 중에 "iproxy"로 시작하는 창이 뜬다면, 일단 cancel을 누르자.

8. iproxy 해결하기

컴퓨터에서 flutter를 찾는다. flutter 폴더를 찾으면, flutter > bin > cache 로 이동한다.

cache에 오면, "artifacts"라는 폴더가 있을 것이다.

이 artifacts를 삭제하면 된다.

9. 다시 빌드

다시 vscode로 돌아와서 빌드하면, 파일들이 다운로드되고, 기기에서 코드가 실행되는 것을 확인할 수 있다 !!

💻 문제

flutter에서 앨범에 접근하여 사진을 업로드하려고 했더니, 앨범에서 불러오려고 할 때마다 시뮬레이터가 꺼져버렸다.

이런 에러와 함께 자꾸 꺼져버렸다.

알고보니, info.plist에 앨범에 접근하기 위한 키를 추가해줘야만 했다.

💻 해결 방법

ios > Runner > Info.plist
이 위치에 있는 info.plist 파일에 다음 키를 추가하면 된다.

<key>NSPhotoLibraryUsageDescription</key>
<string></string>
<key>NSCameraUsageDescription</key>
<string></string>
<key>NSMicrophoneUsageDescription</key>
<string></string>

이렇게 추가했다.

💻 결과

https://velog.velcdn.com/images/haram2/post/99fbf769-631f-4a70-8d0e-c8b9948e9212/image.gif

💻 문제

맥으로 과제를 하던 중 갑자기 맥이 꺼지는 현상이 발생했다.
어느 순간 렉이 발생하더니, 아예 검은 화면이 나오고 아무것도 실행되지 않았다.

너무 당황해서 일단 전원 버튼을 길게 눌러 강제 종료 후, 20분정도 기다린 뒤 다시 전원을 켰다. 그러나 여전히 검은 화면이었다.

휴대폰으로 검색한 결과, 컴퓨터 부팅이나, off되는 과정에서 프로그램이 꼬여 발생한 문제임을 알게 되었다.

💻 해결방법

1. Control + option + shift + 전원
2. option + command + p + r

이렇게 순서대로 동시에 눌러주면 갑자기 화면이 아주 살짝 번쩍 하며 재부팅 되는 것을 확인할 수 있다.

참고 사이트 : https://m.blog.naver.com/teddyjun/220333615605

Padding class

정해진 padding에 맞춰 child를 넣는 위젯이다.

위 사진은 공간이 전혀 없어 답답해 보이지 않은가?
각각의 사각형 사이에 공간을 조금 두면 어떨까?

이렇게 공간 즉 여백이 필요할 때 우리는 padding 위젯을 사용하여 해결할 수 있다.
Padding 위젯을 사용하면 공간을 만들어 배치할 수 있다.
다음은 padding 위젯을 사용하여 공간을 만든 결과이다.

그렇다면 padding은 어떻게 사용할까?

이렇게 어느 부분에 얼마나 공간을 둘 것인지 정하고, padding이 적용될 child를 넣어주면 된다.

padding을 주는 방법은 다양하다.
이는 EdgeInsets의 종류에 따라 방법이 나뉜다.

1. EdgeInsets.fromLTRB()

LTRB는 순서대로 Left, Top, Right, Bottom의 앞 문자를 따온 것이다.
EdgeInsets.fromLTRB를 사용하면 원하는 child의 왼쪽, 위, 오른쪽, 아래 각각의 여백 크기를 결정할 수 있다.

예)

2. EdgeInsets.all()

모든 부분(왼쪽, 오른쪽, 위쪽, 아래쪽)에 같은 크기의 여백을 주는 것이다.

3. EdgeInsets.only()

특정 부분에 지정한 값의 크기만큼 여백을 주는 것이다.

예)

EdgeInsets.only(top: 30, bottom: 20)

이런식으로 left, top, bottom, right 중 특정한 부분에 각각 다른 값을 여백으로 줄 수 있다.

4. EdgeInsets.symmetric()

세로와 가로를 기준으로 여백 값을 제시한다.

horizontal= 가로
vertical= 세로
이렇게 horizontal에 값을 지정하면 왼쪽과 오른쪽 여백이 정해지고,
vertical에 값을 지정하면 위쪽과 아래쪽 여백이 정해진다.

5. EdgeInsets.fromSTEB

STEB는 순서대로 Start, Top, End, Bottom의 앞 문자를 따온 것이다.
이를 사용하면 왼쪽이 start, 오른쪽이 end가 된다.

Expanded class

사용 가능한 공간을 채우도록 Row, Column, 또는 Flex의 child를 확장시킨다.
Expanded 위젯을 사용하면 Row, Column 또는 Flex의 child가 main axis(축)을 따라 사용 가능한 공간을 채우도록 확장된다.

• Row이면 가로
• Column이면 세로

<조건>
Expanded 위젯은 Row, Column 또는 Flex의 자손이어야 한다.
StatelessWidget 또는 StatefulWidget이어야 한다.

example)

example_Column)

위 예시는 중간 child를 세로축에 맞춰 확장시킨 결과이다.

example_Row)

위 예시는 flex를 지정하여 중간 child를 제외한 child를 가로축에 맞춰 확장시킨 결과이다.

SizedOverflowBox class

overflowBox와 비슷한 역할을 한다.
overflowBox와 다른 점은 constraint를 따로 설정하지 않고 이전에 설정된 parent의 constraint를 전달한다. SizedOverflowBox를 사용하면 parent로부터 전달된 constraint를 벗어난 box를 그릴 수 있다는 것이다.

example)

out put)

OverflowBox class

이 위젯은 parent로부터 child에게 각각 다른 constraints를 부과하여 child가 parent를 overflow(넘치게. 즉 더 크게) 할 수 있게 한다.

overflowBox를 사용하지 않으면 parent에서 제시된 constraint를 벗어날 수 없다.
하지만 overflowBox를 사용하면 parent를 벗어난 constraint를 설정할 수 있고, 이렇게 설정한 constraint 안에서 parent를 벗어난 box를 만들 수 있다.

example)

out put)

Offstage class

offstage class는 말 그대로 stage에서 off(벗어난다)한다는 것으로 이해했다.

offstage class는 navigator와 비슷하게 페이지가 바뀌는 것처럼 보인다.
하지만, 새로운 페이지를 만들지 않아도 된다는 특징이자 장점이 있다.

또 다른 특징은 우리 눈에는 보이지 않지만 offstage 상태에서도 계속 실행되고 있기 때문에 우리 눈에 보이느냐 안보이느냐의 여부에 관계 없이 배터리가 소요된다.

이제 offstage에 대해 더 자세하게 이해하기 위해 예시 코드를 가져왔다.
전체 코드는 아래 링크로 두었으니 전체 코드가 궁금하다면 들어가길 바란다.

1. offstage를 실행하기 전에 먼저 true로 값을 설정해준다.

bool _offstage = true;

1. offstage가 true이면 물리적 공간이 눈에 보이지 않는다.
   반대로, offstage가 false이면 물리적 공간이 눈에 보인다.

@override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Offstage(
          offstage: _offstage,
          child: FlutterLogo(
            key: _key,
            size: 150.0,
          ),
        ),
        Text('Flutter logo is offstage: $_offstage'),
        ElevatedButton(
          child: const Text('Toggle Offstage Value'),
          onPressed: () {
            setState(() {
              _offstage = !_offstage;//false로 초기 설정한 값이 버튼을 누를 때마다 값이 바뀐다.
            });
          },
        ),
      ],
    );
  }

<초기화면>

<버튼 누른 후 화면>

전체 코드
https://dartpad.dev/?id=2bad6eb52a25efd3df702370db842253