Flutter - 메인페이지, 네비게이터, 새로운 페이지

* 새 패키지 생성이 안될 시 File - Project Structure - Modules - lib 폴더 선택 후 상단의 Sources 선택하면 폴더가 Packages로 변경되고 생성도 할 수 있음

---

1. 메인 페이지 분리

lib 폴더에서 New Packages로 pages를 생성 후 my_home.dart 생성

home.dart에 MyHomePage 와 _MyHomePageState의 class 를 변경 해준 후 빨간 줄이 표시된 부분에 Alt + Enter로 import 'package:flutter/material.dart'; 해당 부분을 import 해주면 됨

main.dart에서도 MyhomePage의 빨간 밑줄에서 Alt + Enter 후 import 'pages/my_home.dart'; 을 import 해주면 페이지 분리 완료

---

2. 네비게이터

navigator1 은 프로젝트가 커질수록 에러가 심해짐

navigator2 는 조금 더 어렵지만 뒤로 갈수록 쉬워짐

main.dart 에서 home 의 MyHomePage에 Alt + Enter 후 widget로 wrap 해준 후 Navigator로 바꿔 준다.

my_home.dart에 static final String pageName = 'MyHomePage'; 를 MyHomePage class 상단에 넣어주고

main.dart에서는

home: Navigator( pages: [ MaterialPage( key: ValueKey(MyHomePage.pageName), child: MyHomePage(title: 'Flutter Demo Home Page')) ], ),

의 형태로 바꿔 주면 된다.

현재 시점의 버전에서는 onPopPage가 없어도 에러가 없지만 에러가 나온다면(뒤로가기 버튼을 누를때 돌아가는 페이지)

onPopPage: (route, result){ if(!route.didPop(result)){ return false; } return true; },

를 작성해서 기본적으로 실행 해 볼 수 있다.

---

3. 새로운 페이지

pages에 auth_page.dart 생성

class AuthPage extends Page{} 후 Page 에서 Alt + Enter 후 material.dart 를 import 후 AuthPage 에서 missing overide 해주면 override 생성

createRoute 의 내용을 지우고 return MaterialPageRoute(builder: null);로 변경

class 밑 하단에 stf로 statefulWidget 생성 후 AuthWidget로 클래스명 생성

_AuthWidgetState 의 Container 안에 color에 Colors.amberAccent로 해당 페이지에 컨테이너를 주고 페이지 색을 줘서 해당 페이지로 이동했다는것을 확인 하면됨

createRoute 의 return의 builder도 (context)=>AuthWidget()로 변경

AuthPage 클래스 안에 static final pageName = 'AuthPage'; 를 생성해서 페이지 네임으로 알 수 있게 해둠

main.dart에서 가장 하단의 MaterialPage를 AuthPage()로 변경 해주고 실행 (여기서 에러가남)

에러 발생시 auth_page.dart 에서 MaterialPageRoute에 settings:this, 를 추가해 주면 됨

---

main.dart에는

MaterialPage( key: ValueKey(MyHomePage.pageName), child: MyHomePage(title: 'Flutter Demo Home Page') ),

를 세개를 연속해서 만들어주면 됨, 맨 윗줄의 페이지가 가장 하단의 레이어 부터 위로 차례대로 쌓음

원하는 페이지로 변경 하면됨

---

4. 페이지간 이동

main.dart 의 MyApp 에 상단에 String currentPage = MyHomePage.pageName; 를 입력하여 현재 페이지 확인

Navigator 안에 AuthPage() 앞에 if(currentPage == AuthPage.pageName)를 삽입 하여 현재 페이지가 AuthPage가 아닐 시 바로 위 페이지가 실행 되도록 변경

pub.dev에서 provider를 검색 한 후 installing 에서 

dependencies:

   provider: ^6.0.0

provider 부분을 복사하여 프로젝트에 pubspec.yaml 에 dependencies 부분에 들여쓰기를 맞춰서 붙여넣기 하면 됨

상단에 Get Dependencies 로 설치를 완료 해주면 됨

제대로 provider가 설치 됐다면 lib에 provider 패키지를 생성 해주고 page_notifier.dart를 생성 해준후 PageNotifier 클래스 생성

---

//provider ChangeNotifier의 값이 변할 때 해당 state 에 전달

import 'package:flutter/material.dart';

class PageNotifier extends ChangeNotifier{


}

---

PageNotifier에 String _currentPage = MyHomePage.pageName; 를 생성 해주고 main.dart 에서 String currentPage = MyHomePage.pageName;를 제거 page_notifier.dart 에 _currentPage로 현재 페이지를 알 수 있게 하면서 삭제

---

class PageNotifier extends ChangeNotifier{
//현재 페이지를 알 수 있는 부분, _는 private
String _currentPage = MyHomePage.pageName;
// private 이기 때문에 다른 페이지에서 쓸수 있게 get 을 해둠
String get currentPage=>_currentPage;
//메인 페이지로 가는 부분
void goToMain(){
_currentPage = MyHomePage.pageName;
notifyListeners();
}
//다른 페이지로 이동
void goToOtherPage(String name){
_currentPage = name;
notifyListeners();
}
}

---

main.dart theme 부분 삭제, MaterialApp을 widget로 wrap 해줌(Alt + Enter) MultiProvider로 감싸줌

MultiProvider 안에 providers: [ChangeNotifierProvider(create: (_)=>PageNotifier())],를 추가해주면 됨

Navigator 부분 전체는 잘라낸 후

---

home: Consumer<PageNotifier>(
builder: (context, pageNotifier, child){
return ;
},
),

---

위 부분 과 같이 Consumer<>을 생성 후 return 부분에 넣어 주면 됨

---

home: Consumer<PageNotifier>(
builder: (context, pageNotifier, child){
return Navigator(
pages: [
//맨 위 페이지가 맨 아레의 레이어에 들어감, 밑에서 위로 페이지가 쌓임
MaterialPage(
key: ValueKey(MyHomePage.pageName),
child: MyHomePage(title: 'Flutter Demo Home Page1')
),
MaterialPage(
key: ValueKey(MyHomePage.pageName),
child: MyHomePage(title: 'Flutter Demo Home Page2')
),
// 현재 페이지가 AuthPage 일때만 실행 되도록 아닐 시 바로 위에꺼 부터 나옴
//if(currentPage == AuthPage.pageName)AuthPage(),

if(pageNotifier.currentPage == AuthPage.pageName)AuthPage(),
],
//현재 onPopPage가 없어도 정상 작동, 정확하지 않으므로 해당 부분 작성 할 것
onPopPage: (route, result){
if(!route.didPop(result)){
return false;
}
return true;
},
);
},
),

---

my_home.dart 로 이동 후 build 위젯에서 AppBar에 actions 를 추가

---

actions: [
          IconButton(icon: Icon(Icons.logout), onPressed: (){
            Provider.of<PageNotifier>(context, listen: false).goToOtherPage(AuthPage.pageName);
          })
        ],

---

위와 같이 하면 메인에서 우측 상단에 로그아웃 아이콘이 생기고 누르면 노란 페이지가 뜨는걸 확인 할 수 있다.

auth_page에서 main으로 가기 위해서 auth_page.dart 의 _AuthWidgetState에 Container을 InkWell로 감싸주고

opTap을 추가하여 goToMain을 return 추가해준다.(InkWell로만 감쌀 시 에러가 남 InkWell은 Material로 감싸줘야함)

---

return Material(
      child: InkWell(
          onTap: (){
            Provider.of<PageNotifier>(context, listen: false).goToMain();
          },
          child: Container(
            color: Colors.amberAccent,
          )
      ),
    );

---

위와 같이 실행 시 페이지 클릭하면 메인페이지로 돌아가는것을 확인 할 수 있다.