[Flutter] Android Fragment*프래그먼트처럼 화면 대체시키기

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

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

 

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

List<Widget> container = [];

 

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

 

 

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

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

 

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

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

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

@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(),
    )
  );