[Flutter #14] 새로운 페이지 추가

새로운 페이지 추가

onTap을 통해서 리스트 중에서 _saved에 저장된 것들이 있습니다. 저장된 리스트들을 보여주기 위한 새로운 페이지를 만들어 보려고 합니다. 플러터에서는  페이지 혹은 앱의 스크린을 Route라고 부릅니다. 그래서 여기서는 현재의 Route에서 _saved에 저장된 리스트를 보여주는 새로운 Route를 만듭니다.

 

새로운 Route를 만들기 위해서는 우선 해야할 작업이 있습니다. 새로운 Route를 불러주는 아이콘이 필요합니다. 통상적으로 이런 아이콘은 AppBar에 들어갑니다. 

 

class _RandomWordsState extends State<RandomWords> {

  final List<WordPair> _suggestions = <WordPair>[];

  final _saved = Set<WordPair>();

  final TextStyle _biggerFont = const TextStyle(fontSize: 18);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Startup Name Generator'),

        actions: [

          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),

        ],

      ),

      body: _buildSuggestions(),

    );

  }

 

AppBar에 actions라는 속성이 생기고 속성에 IconButton이라는 위젯을 추가했습니다. 그리고 icon 속성을 이용해서 list 아이콘을 보여줬습니다. 다음은 onPressed라는 action 속성입니다. 아이콘을 클릭했을 때, 어떻게 동작을 할 것인가를 지정합니다. 여기서는 _pushSaved라는 것이 action 속성 입니다. _pushSaved는 동작을 지정하는 함수 입니다. 따라서 _pushSaved()라는 함수를 _RandomWordsState 클래스 안에 만들어 줘야 합니다. 

 

  void _pushSaved() {

  }

 

실행을 해서 appBar에

아이콘이 나타나는지 확인해봅니다. 그리고 클릭해 봅니다. 아쉽지만 _pushSaved() 함수가 구현이 되어 있지 않기 때문에 아직 동작을 하지는 않습니다.

 

Route간의 이동을 담당하는 모듈은 Navigator입니다. 이를 이용해서 다른 화면으로 전환을 할 때에는 Navigator.push()를 이용합니다. 호출을 할 때는 Class를 같이 넘깁니다. 돌아올 때에는 Navigator.pop()을 이용합니다.

 

  void _pushSaved() {

    Navigator.of(context).push(

      MaterialPageRoute<void>(

.

.

.

      ),

    );

  }

 

앞의 코드는 우리가 만들어야 할 코드 중에서 Navigator와 MaterialPageRoute라는 것을 보여줍니다. 앞에서 설명에서 한 바와 같이 Navigator.push()를 이용해서 새로운 페이지로 전환한다고 했습니다. 

그 다음에는 materialPageRoute라는 클래스를 호출을 합니다. 이 클래스는 현재 화면에 보여지고 있는 Route를 다른 것으로 변경을 합니다. 그리고 기존의 Route(라우트)는 메모리에 그대로 남겨둡니다. builder 속성이 반드시 필요하며 여기에 Route에서 그려질 사항을 구현하게 됩니다.

 

다음은 _pushSaved()의 전체 코드입니다.

  void _pushSaved() {

    Navigator.of(context).push(

      MaterialPageRoute<void>(

        builder: (BuildContext context) {

          final tiles = _saved.map( /* 1 */

            (WordPair pair) {

              return ListTile(

                title: Text(

                  pair.asPascalCase,

                  style: _biggerFont,

                ),

              );

            },

          );

          final divided = ListTile.divideTiles( /* 2 */

            context: context,

            tiles: tiles,

          ).toList();

 

          return Scaffold( /* 3 */

            appBar: AppBar(

              title: Text('Saved Suggestions'),

            ),

            body: ListView(children: divided),

          );

        }, 

      ),

    );

  }

 

세 부분으로 나누어서 설명을 하도록 하겠습니다. 

/* 1 */은 ListTile에서 선택이 된 항목 _saved를 tile에 저장을 하는데 map은 _saved에 저장되어 있는 각각의 데이터들을 처음부터 끝까지 하나씩 훑어갑니다.

그리고 다음에 있는 anonymous 함수((WordPair pair))에서 pair를 받아와 ListTile에 각각의 Text를 넣습니다.

 

/* 2 */는 divided에 dividedTiles라는 함수를 이용해서 Tile 사이에 1 픽셀짜리 divider를 추가해 주고 toList를 이용해서 리스트에 넣어 줍니다. 여기서는 /* 1 */에서 만든 tiles에 divider를 추가해서 divided에 넣는 과정입니다.

 

/* 3 */은 지금까지 만든 선택된 리스트와 리스트 사이에 divider를 넣습니다. 그리고  divided라는 변수를 Scaffold에 넣어 화면을 그리는 부분입니다. 

 

이로서 플러터에서 사용자의 입력을 받아 동작을 하는 앱을 직접 만들어 봤습니다. 처음 플러터에 입문을 해서 코드 만드는 과정을 따라하면서 프로그램을 만들면서 이해를 해 봤습니다. 이해를 했다고 해도 손에 익어야 프로그램을 만들 수 있으니 익숙해질 수 있도록 책을 보지 않고도 어느 정도 프로그램을 완성할 수 있을 때까지 반복이 필요합니다.