[플러터] Navigation Bar

ho's·2022년 8월 21일

위 글은
https://www.youtube.com/watch?v=BWG9XS5ecig&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=23
의 강의를 바탕으로 쓰여진 글 입니다.

🎨 이 포스팅의 목표

Route의 개념
Navigator의 정의와 push,pop함수, stack자료 구조
MaterialPageRoute위젯과 context
페이지 이동 기능 구현 완성

공식 문서를 보자!

번역기를 돌려보고 해봤지만, 와닿지 않는다. 강의를 내용을 정리해보자.

스마트폰에서 라우트는 하나의 페이지라고 생각하면 된다.

navigator manages a stack of Rotue objects and provides methods for managing the stack, like Navigator.push and Navigator.pop.

네비게이션은 모든 라우트를 관리한다. 관리하기 위해 스택과 Navigator.push, Navigator.pop을 사용하기도 한다.

⚾ 페이지를 이동하는 코드를 작성해 보자.

1. MyApp클래스

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

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

2. FirstPage

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to the Second page'),
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(
              builder: (BuildContext context){
                return SecondPage();
              }
            ));
          
          }),
        ),
      );
  }
}

RaisedButton을 누를때

Navigator.push(context, MaterialPageRoute(
    builder: (BuildContext context) {
   	return SecondPage();
}));

위의 코드를 이용해 Navigator를 사용할 수 있다. 스택을 이용하여 현재 context에서 MaterialPageRoute함수가 반환하는 SecondPage로 이동하게 한다.

3. SecondPage

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second page'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('Go to the First page'),
            onPressed: (){
              Navigator.pop(ctx);
            }),
      ),
    );
  }
}

Navigator.pop(ctx) 를 통해 현재 페이지를 Stack영역에서 제거해 FirstPage의 화면으로 이동하게 해준다.

결과

여러 페이지를 이동하는 앱만들기

1. main클래스 작성하기

main클래스는 ScreenA를 호출한다.

2. ScreenA클래스 작성하기

import 'package:flutter/material.dart';

class ScreenA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenA'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                color: Colors.red,
                child: Text('Go to Screen B'),
                onPressed: (){}),
                
            Padding(padding: EdgeInsets.all(30)),
            
            RaisedButton(
                color: Colors.red,
                child : Text('Go to Screen C'),
                onPressed: (){}),
          ],
        )
      )
    );
  }
}

3. ScreenB,C 클래스 작성하기

import 'package:flutter/material.dart';

class ScreenB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScreenB'),
      ),

      body: Center(

        child: Text('ScreenB',
          style: TextStyle(
              fontSize: 24.0
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class ScreenC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ScreenC'),
        ),

        body: Center(

          child: Text('ScreenC',
          style: TextStyle(
            fontSize: 24.0
          ),
          ),
        ),
    );
  }
}

4. main.dart에서 MaterialApp을 확인해 보자.

위 두개의 routes는 멀티페이지 이동 기능을 구현할때 반드시 필요한 구성 요소이다.
initialRoute 는 Home대신에 사용한다.
Map<String, WidgetBuilder> this.routes = const <String, WidgetBuilder>{} 이동할 페이지의 이름을 지정하고, 생성하는 역할을 한다.