[Flutter] Navigation

Navigation

앱은 보통 여러개의 앱화면(screen)으로 구성된다.

플러터에서 각 screen 또는 page 를 route 라고 부르며, 각 route 를 이동할 수 있는 기능을 제공한다.

앱을 구성하는 routes 가 간단한 경우는 Navigator 를 사용하고 복잡한 경우는 Router 를 사용한다.

우선 Navigator 의 주요 기능은 아래와 같다. (Router 는 나중에..)

• Navigator.push: 새로운 route 로 이동한다.
• Navigator.pop: 이전 route 로 이동한다.

각 route 를 이동할때 안드로이드 스타일(MaterialPageRoute) 또는 iOS 스타일(CupertinoPageRoute) 을 지정할 수 있다.

이때는 아래의 위젯들도 같이 맞춰줘야 한다.

• MaterialApp -> CupertinoApp
• Scaffold -> CupertinoScaffold
• ElevatedButton -> CupertinoButton

안드로이드 또는 iOS 에 따라 이렇게 구분을 해줘야 하는게 불편할것 같다. 

다른 고급스러운 방법이 있을것 같긴 한데 나중에 알아보자.

 

 

Code Template

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
      ),
    );
  }
}

 

 

실행 결과

 

 

 

참고

https://docs.flutter.dev/cookbook/navigation/navigation-basics