[flutter] 화면전환 네비게이션

화면 전환 네비게이션은, 버튼이나 요소를 통해 다른 화면으로 이동해야 할때 사용하는 기능이다. 이번 실습에서는 버튼을 이용해서 실습 용도로 만들어 뒀던 다른 위젯으로 넘어가는 실습을 진행해보자.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton:
      FloatingActionButton(
        child : Icon(Icons.add),
          onPressed : _changeMessage),
      appBar: AppBar(
        title: Text(widget.title),
      ),
        body: Center(
            child : Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(_message, style: TextStyle(fontSize: 30)),
                Text('$_counter', style: TextStyle(fontSize: 30)),
                ElevatedButton(onPressed: (){
                  Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => CupertinoPage())
                  );
                }, child: Text('화면 이동')),
              ],
            )
        ));

버튼을 추가하고, 동작을 구성하기 위해 build 부분만 변경하였으므로, 여기서 변경된 부분을 구현 순서대로 하나하나 뜯어서 각자가 어떤 기능을 하는지 알아보도록 하겠다.

ElevatedButton(onPressed: (){
                  Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => CupertinoPage())
                  );
                }, child: Text('화면 이동')),

ElevatedButton?
용자가 누를 수 있는 높은 고도를 갖는 버튼 위젯이다. 이 버튼은 일반적으로 사용자에게 중요한 동작 또는 액션을 수행할 수 있는 UI 요소로 사용용된다. "ElevatedButton"은 Material Design에서 정의된 디자인 가이드라인에 따라 생성된다.

• 이 메소드는 onPressed: (){}를 통해 버튼을 눌렀을 때의 동작을 정의할 수 있다.
• Navigator.push() : 버튼을 눌렀을때 어떤 페이지로 이동할지를 정할 수 있다.
  • context : 위젯 트리에서 현재 위치를 식별하는 데 사용되는 개체이다. 모든 위젯은 BuildContext를 받아오고, 이를 통해 해당 위젯이 어디에 위치하는지, 그리고 상위 위젯과의 관계를 알 수 있다. 여기서 context는 현재 위젯의 빌드 컨텍스트를 나타낸다. MaterialPageRoute의 생성자는 새로운 페이지를 빌드할 때 이 컨텍스트를 사용하여 현재 테마, 로케일 등의 정보를 참조한다. 이렇게 함으로써, Flutter는 새로운 페이지를 올바르게 빌드하고, 이전 페이지와의 관계를 유지할 수 있다. 말하자면 self 개념과 비슷한 개념이라고 볼 수 있다.
  • MaterialPageRoute(builder: (context) => CupertinoPage()) : 이를 통해 현재 위치인 context에서 CupertinoPage()(정의해둔 다음화면 메소드)로 넘어가게 할 수 있다.
  • child: Text('화면 이동') : 버튼에 쓰여질 글귀를 의미한다.

결과적으로 이런 화면 이동이 일어나게 되며, 뒤로가기 버튼도 함께 생성되는 것을 알 수 있다.