[Flutter] Navigator 위젯으로 마치 Fragment처럼 화면 일부만 이동하기

벨로그가 보기 편합니다.

<aside> 💡 우리가 화면 이동 시 늘상 쓰던 Navigator.push()와 같은 방법이 아니다.

</aside>

개요😃

프로젝트 도중 화면의 일부만 이동해야하는 화면이 있었다.

AppBar는 가만히 있고, 아래의 화면만 마치 화면이 이동하듯 움직여야 했다.특히 AppBar의 데이터는 실시간으로 유지되어야 했는데,당시 상태관리 패키지를 사용하지 않은 상태였다.

예를 들어보자.

아래 메인 클래스와 세 클래스가 있다.

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(flex: 1, child: Fix()),
            Expanded(flex: 1, child: A()),
          ],
        ),
      ),
    );
  }
}

class Fix extends StatelessWidget {
  const Fix({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red);
  }
}

class A extends StatelessWidget {
  const A({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue);
  }
}

class B extends StatelessWidget {
  const B({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.yellow);
  }
}

아래 보라색 화면 (위 파란색)만 다른 화면으로 화면을 이동시켜보자.

(누가 gif 이쁘게 올리는 법좀 알려주세요 😭)

<aside> 💡 단지 위젯을 바꾸면서 애니메이션 변화를 주어도 될 것이다. (안해봄)하지만 이미 구현되어 있는 위젯을 활용하여, UI만 만들어 사용해보고자 한다.

</aside>