Flutter Navigator를 이용한 화면 이동

이전 글에서페이지 이동에 관련하여 2가지 글을 작성했다.

2023.06.24 - [단기 프로젝트] - Flutter PageView 위젯 - 프로젝트 1_2

Flutter PageView 위젯 - 프로젝트 1_2

2023.06.26 - [단기 프로젝트] - Flutter NavigationBar - 프로젝트 1_2

Flutter NavigationBar - 프로젝트 1_2

 

이번 글에서는 Navigator를 이용해 페이지 이동을 해본다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      initialRoute: '/',
      routes: {
        '/': (BuildContext context) => HomeScreen(),
        '/first': (_) => FirstScreen(),
        '/second': (_) => SecondScreen(),
        '/third': (_) => ThirdScreen(),
      },
    ),
  );
}

 

위 코드는 MaterialApp에 초기 화면(위젯)과 각 위젯이 가지는 루트 나타낸다.

routes 파라미터는 map 타입의 값을 받는다.

map 안에서 위젯은 각각의 이름과 함께 메칭된다.

나중에 화면을 호출할 때 이 이름을 이용하여 호출한다.

 

'initialRoute'는 처음 띄울 위젯의 이름을 적어준다.

여기서는 HomeScreen 위젯이 뜨도록 설정해주었다.

 

Widget pushButton(String screen, BuildContext context) {
  return OutlinedButton(onPressed: () {
    Navigator.of(context).pushNamed(screen);
  }, child: Text("Go to $screen"));
}

다음은 다른 화면으로 넘어가는 버튼을 반환하는 함수를 나타낸 것이다.

OutlinedButton을 반환하도록 설정했고, 반환한 버튼이 눌리면 변수로 받은 screnn으로 이동하도록 설정하였다.

이 버튼은 여러 위젯에서 사용해야 하기 때문에 context를 파라미터로 받는다.

 

Navigator.of(context)는 현재 위젯의 위치를 나타낸다.

현재 위체에서 다른 위젯을 push하여 위에 올린다.

이 때 사용되는 함수가 pushNamed()함수이다.

Widget popButton(BuildContext context) {
  return OutlinedButton(onPressed: () {
    Navigator.pop(context);
  }, child: const Text("Go back"));
}

 

다음 코드는 popButton을 반환하는 함수이다.

다른 코드는 위에서 설명한 pushButton과 동일하다.

다른 점은 Navigator.pop 메서드를 사용하는 것이다.

Navigator.pop 메서드는 현재 위젯에서 벗어나 이전 페이지로 이동하는 것이다.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
                "Home screen",
              style: TextStyle(
                fontSize: 30.0,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                pushButton("/first", context),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 HomeScreen 클래스 코드이다.

Center, Column, Row 위젯은 정렬을 위한 위젯이고, 실제 화면에 뜨는 위젯은 Text와 pushButton 함수에서 반환하는 버튼이다.

pushButton의 파라미터로 "/first와 context가 들어가 있는 것을 확인할 수 있다.

이는 이 버튼이 "/first"라는 이름을 가지는 위젯으로 이동하는 버튼이라는 것을 의미한다.

 

다른 화면도 HomeScreen과 같은 방식으로 짜여져있다.

 

다음은 전체 코드이다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData.dark(),
      initialRoute: '/',
      routes: {
        '/': (BuildContext context) => HomeScreen(),
        '/first': (_) => FirstScreen(),
        '/second': (_) => SecondScreen(),
        '/third': (_) => ThirdScreen(),
      },
    ),
  );
}

Widget pushButton(String screen, BuildContext context) {
  return OutlinedButton(onPressed: () {
    Navigator.of(context).pushNamed(screen);
  }, child: Text("Go to $screen"));
}

Widget popButton(BuildContext context) {
  return OutlinedButton(onPressed: () {
    Navigator.pop(context);
  }, child: const Text("Go back"));
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
                "Home screen",
              style: TextStyle(
                fontSize: 30.0,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                pushButton("/first", context),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "First screen",
              style: TextStyle(
                fontSize: 30.0,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                pushButton("/second", context),
                popButton(context),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Second screen",
              style: TextStyle(
                fontSize: 30.0,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                pushButton("/third", context),
                popButton(context),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "Third screen",
              style: TextStyle(
                fontSize: 30.0,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                popButton(context),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

완성된 앱의 화면은 다음과 같다.

'Go to X' 버튼을 누르면 그 화면으로 이동하고, 반대로 'Go back'을 누르면 이전으로 돌아간다.