[플러터] 내비게이션 활용하기

ho's·2022년 8월 16일

Do it 플러터 앱 프로그래밍 책 공부하기

책의 내용을 정리하면서 공부하기 위해, 글을 작성한다.

내비게이션 활용하기

한 페이지로도 앱을 만들 수 있지만 기능이 많으면 화면을 구성하기가 어렵고 로딩이 느려지기도 한다.
네비게이션 기능은 앱이 제공하는 기능이나 메뉴별로 화면을 분리해서 개발하는 방법

페이지 이동하기만들기

1. 프로젝트 생성 및 main.dart 파일 생성

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Subpage Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  State<FirstPage> createState() => _FirstPage();
}

class _FirstPage extends State<FirstPage> {
  @override
  Widget build(BuildContext context){
    return null;
    }
  }

2. _FirstPage 클래스에 위젯으로 화면 만들기

class _FirstPage extends State<FirstPage> {
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Sub Page Main '),
      ),
      body: Container(
        child: Center(
          child: Text('첫 번째 페이지'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        child: Icon(Icons.add),
      ),
    );
    }
  }

3. 두번째 페이지 만들기

_FirstPage 아래에 StatelessWidget을 상속받아 SecondPage 클래스를 만든다.

class SecondPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Second Page'),
        ),
        body: Container(
          child: Center(
            child: RaisedButton(
              onPressed: (){},
              child: Text('돌아가기'),
            ),
          )
        )
      );
    }
  }

4. _FirstPage 클래스에 만든 플로팅 버튼을 눌렀을 때 호출되는 onPressed이벤트 처리 함수 작성

  floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.of(context)
              .push(MaterialPageRoute(builder: (context)=> SecondPage()));
        },
        child: Icon(Icons.add),
      ),

위의 코드를 해석해 보자!

Navigator는 스택을 이용해 페이지를 관리할 때 사용하는 클래스
Navigator클래스의 of(context) 함수는 현재 페이지를 나타내고 push()함수는 스택에 페이지를 쌓는 역할
따라서 위의 코드는 플로팅 버튼을 눌렀을 때, 스택 메모리에 페이지가 쌓이는 구조이다.
push()함수에 전달한 MaterialPageRoute()함수는 머터리얼 스타일로 페이지를 이동하게 해준다.

5. secondPage 클래스에 <돌아가기> 버튼을 눌렀을때 호출되는 onPressed 이벤트 처리 함수를 작성

  class SecondPage extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Second Page'),
        ),
        body: Container(
          child: Center(
            child: RaisedButton(
              onPressed: (){
                Navigator.of(context).pop();
              },
              child: Text('돌아가기'),
            ),
          )
        )
      );
    }
  }