Flutter에서 Android의 Fragment처럼 동작되는 위젯을 구현해보았다.

만들 예제는 하나의 기본 화면이 Container안에 있고 추가적으로 다른 위젯을 대체시키고, 뒤로가기가 가능하여 앞의 위젯이 다시 표출되도록 만들것

 

우선, Fragment처럼 사용할 위젯들을 담아내는 Container를 하나 만든다.

List<Widget> container = [];

 

(StatefulWidget으로 setState함수로 UI를 갱신시킬 것이다)

 

 

Android에서 Fragment를 보여주려면 FrameLayout라는 레이아웃안에 넣어 보여준다.

FrameLayout을 '액자'라고 생각하고 Fragment'사진'이라고 생각하면 쉽다.

 

'액자'역할을 해줄 위젯을 만든다. 뒤로가기시 Fragment화면의 동작의 유연함도 고려해야하기 때문에,

'PopScope'위젯으로 전체를 감싸준다.

그리고 FragmentIndexedStack위젯안에 위젯들을 쌓는 형식으로 표현한다.

@override
void initState() {
  super.initState();
  
  container.add(
    SomethingOneWidget()
  );
}

 

 

container리스트 안에 1개이하로 있을때는 PopScope가 정상적으로 동작하고,

2개 이상이 있다는건 Fragment처럼 사용된 위젯들이 IndexedStack안에 쌓여있기 떄문에, 직접 뒤로가기 설정을 해준다.

@override
Widget build(BuildContext context) {
  return PopScope(
    canPop: container.length <= 1,
    onPopInvokedWithResult: (didPop, result) {
      if (!didPop) {
        onBackPressed();
      }
    }
    
    child: ...
  );
}

void onBackPressed() {
  if (container.length > 1) {
    setState(() {
      container.removeLast();
    });
  }
}

 

 

PopScope의 child파라메터 설정

  PopScope(
    ...
    
    child: IndexedStack(
      index: container.length - 1,
      children: container.map((page) {
        return Navigator(
          onGenerateRoute: (settings) {
            return MaterialPageRoute(builder: (context) => page);
          }
        );
      }).toList(),
    )
  );

 

 

 

FirebaseCore패키지를 추가해준다.

flutter pub add firebase_core

 

'IPHONEOS_DEPLOYMENT_TARGET' is set to 11.0, but the range of supported deployment target versions is 12.0 to 17.5.99. 

iOS앱을 빌드하는데 계속해서 발생하였다.

일단 XCode에서 뭔가 target을 맞춰주어야 할 것 같다.

 

현재 iOS 12.0에 맞춰져 있다.

로그에서는 현재 11.0으로 맞춰져있다고 하는데 무엇이 문제일까.

 

XCode좌측창 네비게이션 맨우측 메뉴를 클릭하면 자세한 내용을 볼 수 있다.

 

그리고 오류가 알려주는 곳 위치를 들어가니 iOS Deployment Target이 iOS 11.0으로 맞춰져있다?

 

Pods의 ResourceTarget에 iOS 11.0으로 되어있다. 12.0으로 맞춰보자.

 

이제부터 무언가 빠졌는지를 제공해주는 에러로그가 표출된다.

PhaseScriptExecution FlutterFire: 라는 로그가 표출된다.

 

flutterfire: command not found: 이것은 파이어베이스 연결시 flutterfire라는 명령어를 실행할 수 없음을 나타내는 것 같다.

파이어베이스 연결부분을 다시 확인해보자

링크 : https://firebase.google.com/docs/flutter/setup?hl=ko&platform=web

 

터미널 창에 다음과 같이 명령한다.

curl -sL https://firebase.tools | bash

 

현재 내 맥에는 firebasetools가 다운로드 되어 있기 때문에 다음 명령어를 권유 받았다.

curl -sL firebase.tools | upgrade=true bash

 

 

FlutterFire설치명령어

dart pub global activate flutterfire_cli

 

FlutterFire환경변수를 설정해주어야 한다.

 

나는 현재 환경변수를 .zshenv파일로 관리하고 있다.

다음 명령을 추가하여 환경변수에 추가해준다.

sudo echo PATH=$PATH:$HOME/.pub-cache/bin > ~/.zshenv

 

그리고 다시 FlutterFire명령어를 수행한다.

 

정상적으로 잘설치되었고,

Xcode로 돌아와서 CleanBuildFolder를 한다.

 

 

다시 빌드 시도.

 

성공..!!

+ Recent posts