패스트캠퍼스 환급챌린지 13일차 미션(2월 13일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 Flutter에서 화면 전환(페이지 또는 뷰의 전환)이 어떻게 이루어질 수 있는지 알아보려 한다.

Flutter에서는 크게 3가지 방식을 활용할 수 있다.

- 상태를 활용

- Navigator 객체 활용

- 외부 라이브러리 GoRouter 활용

 

일단 첫 번째부터 알아보자. Scaffold에는 appBar, body 말고도 bottomNavigationBar라는 것이 있다.

items, currentIndex, onTap 3개의 인자를 가지며, 각 인자의 역할에 대한 설명은 아래와 같다.

- items: BottomNavigationBarItem 생성자를 통해 만들어지는 인스턴스를 요소로하는 배열이다.

  - BottomNavigationBarItem 생성자는 icon과 label을 인자로 요구한다.

- currentIndex: 현재 탐색중인 인덱스를 결정하는 기준

- onTap: 각 요소를 탭했을 때 인덱스 갱신에 관한 액션 지정

 

Scaffold의 Body는 현재 경로 상태를 표시하기 위한 간단한 위젯으로 구성하였다.

전체 코드는 다음과 같다.

void main() {
  runApp(MaterialApp(
    home: HomeWidget(),
  ));
}

class HomeWidget extends StatefulWidget {
  const HomeWidget({super.key});

  @override
  State<HomeWidget> createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  late int index;

  @override
  void initState() {
    super.initState();
    index = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter에서 화면 이동하기'),
      ),
      body: HomeBody(),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: "Search"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "User"),
        ],
        currentIndex: index,
        onTap: (newIndex) => setState(() {
          index = newIndex;
        }),
      ),
    );
  }
  Widget HomeBody() {
    switch(index) {
      case 0:
        return const Center(child: Icon(Icons.home, size: 100,));
      case 1:
        return const Center(child: Icon(Icons.search, size: 100,));
      case 2:
        return const Center(child: Icon(Icons.person, size: 100,));
      default:
        return const Center(child: Icon(Icons.home, size: 100,));
    }
  }
}

 

그리고 실행 결과는 다음과 같다.

하단 내비게이션 바를 선택함에 따라 Body의 모습이 변하는 것을 확인할 수 있다.

그런데 엄밀히 말하면 이건 화면이 아니라 View가 바뀌는 것으로, TabBar와 같은 UI 구현 시 적합한 방식이라고 할 수 있다.

중첩된 경로 등을 구현하기 위한 탐색 방식으로는 적합하지 않으니, 다음 방식에 대해 알아보자.

 

다음 방식은 Navigator 객체를 활용하는 것인데, 일단 중앙에 Go라는 버튼을 만든 다음, 별도의 화면을 구성하기 위해 아래와 같이 lib/screen 디렉토리 하위에 new_page라는 파일을 만들어주자.

new_page는 아래와 같이 간단한 화면을 가진 Stateless 위젯으로 만들어준다.

import 'package:flutter/material.dart';

class NewPage extends StatelessWidget {
  const NewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Welcome New Page!"),
      ),
      body: Center(
        child: TextButton(
          child: Text('Go to New Page!'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return const NewPage();
            }));
          },
        ),
      ),
    );
  }
}

위와 같이 Navigator.push() 메서드를 활용하면 내비게이션을 수행할 수 있다. 위 경우는 MaterialPageRoute의 생성자로 새로운 페이지를 빌드해서 계속 이동하는 방식이다.

 

메인 페이지도 같은 방식으로 만들어주면 아래와 같이 새로운 방식의 네비게이션을 수행하는 앱을 볼 수 있다.

 

이외에도 라우트 이동을 돌릴 때 쓰는 Navigator.pop(), .popUntil() 등의 기능이 있다.

 

마지막 방식은 외부 라이브러리인 go_router를 사용하는 방식이다.

go_router는 Flutter 팀에서 개발하고 있어서 공신력이 높은 라이브러리이다. pubdev에서 go_router를 찾아서 설치해주자.

 

강의 상에서는 9버전이 최신이었는데 지금은 13버전이 깔린다 ㄷㄷ 무시무시한 업뎃 속도...

라이브러리를 설치했으니 앱을 완전히 종료했다가 재실행해주자.

 

go_router를 사용할 때 첫번째로 유의할 사항은 앱 빌드 시 MaterialApp을 그대로 사용하면 안되고, MaterialApp.router()를 사용해야한다는 것이다.

그리고 라우트에 대한 정보를 routerConfig 프로퍼티에 아래와 같이 정의해준다.

runApp(MaterialApp.router(
    routerConfig: GoRouter(
      initialLocation: '/',
      routes: [
        GoRoute(path: '/', name: 'home', builder: (context, _) => const HomeWidget()),
        GoRoute(path: '/new', name: 'new', builder: (context, _) => const NewPage()),
      ]
    ),
  ));

 

그러면 아까 onPressed 콜백에 Navigator 객체 메서드를 활용하는 코드를 아래와 같이 간단하게 바꿀 수 있다.

onPressed: () {
  context.pushNamed('new'); // context.push('/new')도 가능
},

 

실행 결과도 Navigator 객체를 활용했을때와 똑같이 나온다.

 

go_router를 활용하면 라우트 정보를 runApp단에서 한번에 확인할 수 있어서 좋은 것 같다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N