[TAVE/Study]Do it! Flutter 8장 내비게이션 활용하기①

211005 화

백신 맞고 코딩하기...

 

페이지 이동하기

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

👉🏻 플로팅 버튼을 눌렀을 때 두 번째 페이지로 가도록 한다.
✍🏻 Navigator: 스택을 이용해 페이지를 관리할 때 사용하는 클래스
✍🏻 push: 스택에 페이지를 쌓는 함수
✍🏻 MaterialPageRoute 함수: 머티리얼 스타일로 페이지를 이동하게 한다. 기본적인 뒤로가기 버튼이 나와서 이전 페이지로 갈 수 있다.

 

          child: ElevatedButton(
            onPressed: () {
              Navigator.of(context).pop();//지금 페이지 종료
            },
            child: Text('돌아가기'),

👉🏻 '돌아가기' 버튼 기능을 만든다.
✍🏻 pop(): 맨 위에 있는 페이지를 제거 한다.

 

라우트로 페이지 이동하기

 

📌 라우트: 통신에서 이동 경로를 의미한다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SubPage Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {'/': (context) => FirstPage(),
               '/second': (context) => SecondPage()},
    );
  }
}

(...생략...)

      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).pushNamed('/second');
        },
        child: Icon(Icons.add),
      ),

👉🏻 home 대신 initialRoute와 routes를 사용한다. routes에는 <String : Widget> 형태로 경로를 선언한다.
👉🏻 push() 대신 pushNamed()로 변경해서 페이지 이동할 때 routes에 선언한 경로를 이용한다.
✍🏻 initialRoute에 처음 앱을 시작했을 때 보여줄 경로이다.
✍🏻 routes에는 어떤 문자열을 쓰면 어떤 페이지로 갈 지 지정한다.