플러터(Flutter) 페이지 이동하기 : Navigator

Navigator

 

Navigator 는 앱상의 페이지를 관리하며, 자료구조로 Stack 을 사용합니다. (push, pop)

 

스마트폰의 어플을 사용하다보면 뒤로가기 기능을 흔히 볼 수 있습니다.

어떠한 페이지에 이동할 때는 현재 보고 있는 페이지 위에 쌓이게 되는 것이며(push)

뒤로가기는 쌓여진 페이지를 빼는 것(pop) 이라고 생각하면 됩니다.

 

https://api.flutter.dev/flutter/widgets/Navigator-class.html

 

 

예제

 

Navigator.push 를 사용해서 현재 페이지(context) 위에 새로운 페이지(PageView2)를 올립니다.

ListTile(
  leading: Icon(
    Icons.image,
    color: Colors.grey[850],
  ),                
  title: Text('페이지 2'),
  onTap: () {
    Navigator.push(
      context, 
      MaterialPageRoute(
        builder: (context) => PageView2()
      )
    );
  },
  trailing: Icon(Icons.arrow_forward_ios),
)

 

뒤로가기는 다음과 같이 Navigator.pop 을 사용하면 됩니다.

Navigator.pop(context);

 

이동한 페이지에 AppBar 가 있다면, 자동으로 뒤로가기 버튼이 생기니 구현하지 않으셔도 됩니다.

class PageView1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'), 
      )
    );
  }
}

 

 

전체 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '플러터 예제',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MainPage(title: '메인 페이지'),
    );
  }
}

class MainPage extends StatelessWidget {
  MainPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('메인 페이지'),
        centerTitle: true,
        elevation: 0.0,
      ),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(
                Icons.image,
                color: Colors.grey[850],
              ),                
              title: Text('페이지 1'),
              onTap: () {
                Navigator.push(
                  context, 
                  MaterialPageRoute(
                    builder: (context) => PageView1()
                  )
                );
              },
              trailing: Icon(Icons.arrow_forward_ios),
            ),
            ListTile(
              leading: Icon(
                Icons.image,
                color: Colors.grey[850],
              ),                
              title: Text('페이지 2'),
              onTap: () {
                Navigator.push(
                  context, 
                  MaterialPageRoute(
                    builder: (context) => PageView2()
                  )
                );
              },
              trailing: Icon(Icons.arrow_forward_ios),
            ),
          ],
        ),
      ),
    );
  }
}

class PageView1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'), 
      )
    );
  }
}

class PageView2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'), 
      )
    );
  }
}