Flutter Navigator 간단 정리

Flutter Navigator 간단 정리

 

네비게이터 간단하게 정리

 

 

목차

• Route의 개념
  • 스마트폰에서 보여지는 하나의 페이지 화면 !
• Navigator의 정의와 push, pop 함수, stack 자료구조
  • stack ( FILO ) 
  • push 데이터를 넣기
  • pop 데이터를 빼기
  • Route(페이지)는 Navigator라는 위젯이 담당하고 그 구조는 스택 구조
• MaterialPageRoute위젯과 context
  • 화면전환할 때, 바로 class 입력해서 이동하는 것이 아니라 화면을 지정해주면서 이동
• 페이지 이동 기능 구현 완성

 

코드 샘플

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme:
          ThemeData(primarySwatch: Colors.blue // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
              ),
      home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

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

      body: Center(
        child: ElevatedButton(
          child: Text('Go to the Second page'),
          onPressed:  () {
            Navigator.push(context,MaterialPageRoute( // 페이지 이동은 기본적으로 안드로이드 페이지 이동 사용
                builder: (BuildContext context) {
                  return SecondPage();
                }

            ));
        },
        ),

      ),
    );
  }
}

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

  @override
  Widget build(BuildContext ctx) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second page'),
      ),

      body: Center(
        child: ElevatedButton(
          child: Text('Go to the First page'),
          onPressed: () {
            Navigator.pop(ctx);// 자신이 사라지면 자신 아래의 네비게이터 스택으로 이동

          },
        ),

      ),
    );
  }
}

 

완성한 화면

 

onPressed 정의해서 사용할 수 있음.