[Flutter] Navigation 과 User Flows

이번에는 화면 간의 원활한 네비게이션을 가능하게 하고 Flutter 앱에서 사용자 플로우를 생성하는 방법을 탐색해 볼 것이다. Flutter는 개발자들이 복잡한 다중 화면 경험을 쉽게 구축할 수 있도록 유연한 라우팅 시스템을 제공하고 있다.

Flutter Routes

Flutter의 네비게이션 시스템의 핵심은 라우트로, 중앙 Navigator에서 푸시 및 팝할 수 있는 개별 화면을 정의한다. MaterialApp 위젯은 앱 내의 모든 네비게이션을 처리하며 최상위 네비게이터를 구성한다. 명명된 라우트는 참조될 수 있는 고유한 이름으로 화면을 연결하는 데 사용된다.

MaterialApp(
	routes: {
    '/': (context) => HomeScreen(),
    '/details': (context) => DetailsScreen(),
    },
    );

만약 특정한 화면으로 이동하고 싶다면, Navigator.pushNamed 를 호출할 수 있다.

예를 들면 이렇게 사용한다.

onTap: () {
	Navigator.pushNamed(context, '/details');
    }

Navigator 2.0

더 복잡한 플로우를 위해서는 플러터 Navigator 2.0 이 routes 와 pages 를 사용하는 API 를 제공하고 있다.

RoutesPage 는 각 화면에 대한 실제 위젯 트리를 생성해내고, 이건 네비게이션 플로우를 더 제어할 수 있게 한다.

class LoginFlow extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return Navigator(
        	pages: [
            	MaterialPage(
                	child: LoginScreen(),
                    ),
                    if (loggedIn)
                    MaterialPage(
                    	child: MainScreen(),
                        )
                        ],
                        onPopPage: (route, result) {},
                        );
                        }
                        }

System Overlays

Flutter는 개발자들이 일시적인 피드백을 위한 시스템 오버레이를 표시할 수 있게 하는 SnackBar, Dialog, Drawer와 같은 여러 패턴을 제공한다. 이러한 오버레이는 중요한 정보나 작업을 제공함으로써 사용자 경험을 향상시킬 수 있다.

Navigation 연습 꿀팁

• 딥 링크 및 공유를 위해 명명된 라우트 사용
• 라우트 인자를 통해 최소한의 데이터 전달
• 사용자에게 피드백을 제공하기 위해 전환 중 로딩 인디케이터 표시
• 더 나은 오류 처리를 위해 에지 케이스를 우아하게 처리
• 다양한 장치에서 일관된 사용자 경험을 위해 플랫폼 관례 따르기
• 앱의 시각적 매력을 높이기 위해 매끄러운 효과를 위한 커스텀 전환 사용