Flutter의 Navigator.pushNamed

국정무·2025년 1월 17일

Flutter에서 Navigator.pushNamed이름이 지정된 경로(named route)를 사용하여 새 화면으로 이동하는 데 사용됩니다. 이 방식은 경로 이름을 기반으로 화면을 탐색하기 때문에 앱의 라우트를 더 구조적으로 관리할 수 있게 해줍니다.

사용법

  1. 라우트 정의: MaterialApp 위젯에서 routes 속성을 사용해 이름과 위젯을 연결합니다.
  2. 화면 전환: Navigator.pushNamed를 호출하여 정의된 이름을 기반으로 화면을 전환합니다.

1. 기본 구조

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second')),
      body: Center(child: Text('This is the second screen')),
    );
  }
}

2. 주요 파라미터

Future<T?> pushNamed<T extends Object?>(
  BuildContext context,
  String routeName, {
  Object? arguments,
})
  • context: 현재 위젯의 빌드 컨텍스트.
  • routeName: 이동할 경로 이름 (e.g., '/second').
  • arguments: 화면 간 데이터를 전달할 때 사용 (선택 사항).

3. 데이터 전달

화면 간 데이터를 전달하려면 arguments를 활용합니다.

데이터 전달

Navigator.pushNamed(
  context,
  '/second',
  arguments: 'Hello from Home Screen!',
);

데이터 수신

class SecondScreen extends StatelessWidget {
  
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(child: Text(args)),
    );
  }
}

4. 장점

  • 중앙 집중식 관리: 모든 경로를 한 곳에서 정의하므로 유지보수가 용이.
  • 데이터 전달: 화면 간 데이터 전달이 간편.
  • 코드 간소화: 화면 전환 로직을 단순화.

5. 주의점

  • 경로 이름을 잘못 입력하면 오류가 발생하므로 정확하게 관리해야 합니다.
  • 대규모 프로젝트에서는 onGenerateRouteonUnknownRoute를 함께 사용하여 동적 경로나 에러 처리를 구현하는 것이 좋습니다.
profile
악바리 개발자

0개의 댓글