안녕하세요 지난 글에서는 커스텀 위젯에 대해서 알아보고 메모장 앱을 만들기 위해 입력 페이지도 만들어보았습니다. 이번 글에서는 텍스트 입력 페이지에서 입력된 내용을 메인 페이지로 전달하는 기능을 개발하면서 플러터 화면 전환과 데이터 전달 방법 대해서 알아보겠습니다.
플러터 화면 전환 방법
플러터(flutter) 화면 전환(Navigator)
Navigator는 플러터에서 화면을 전환하는 클래스로 스택 구조를 사용하여 화면을 푸시하고 팝합니다. 새로운 화면을 추가할 때마다 스택에 쌓이며 화면을 닫을 때마다 스택에서 제거됩니다. 이를 통해 사용자가 뒤로가기 버튼을 누를때 이전 화면으로 자연스럽게 이동할 수 있습니다.
스택
스택은 데이터를 저장하고 검색하는 자료 구조로 후입선출(LIFO, Last In, First Out) 원칙을 따릅니다. 가장 최근에 추가된 항목이 스택의 맨 위에 위치하며 이를 top이라고 합니다. 새로운 항목이 추가되면 스택의 top에 쌓이게 되고 항목이 제거되면 top에서 제거됩니다.
메모 입력 페이지로 이동
메인페이지의 앱바 버튼에서 Navigator.push 메서드를 사용하여 새로운 화면으로 이동합니다. 아래 코드에 대한 설명입니다.
- context: BuildContext 객체로, 현재 위젯의 빌드 메서드에서 제공되는 매개변수입니다. 이를 통해 현재 위젯이 속한 트리의 위치 및 상태에 액세스할 수 있습니다.
- MaterialPageRoute: Navigator를 통해 새로운 화면으로 이동할 때 사용되는 라우터(경로)를 정의하는 클래스입니다. 여기서는 MemoInputPage로 이동하기 위한 MaterialPageRoute를 생성합니다.
- builder: MaterialPageRoute의 인자로, 새로운 화면을 어떻게 생성할지를 정의하는 콜백 함수입니다. 여기서는 MemoInputPage 위젯을 생성합니다.
appBar: AppBar(
title: const Text('Memo', style: TextStyle(color: Colors.white)),
backgroundColor: Colors.black,
actions: [
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MemoInputPage()),
);
},
style: IconButton.styleFrom(foregroundColor: Colors.white),
icon: Icon(Icons.create),
),
],
),
메인페이지 앱바의 상단 create버튼을 눌러서 화면이동을 합니다.
텍스트 입력 후 메인 페이지로 이동
사용자가 텍스트를 입력 후 Add Memo 버튼을 누를 때 현재 입력된 텍스트가 Navigator.pop을 통해 이전 화면으로 반환됩니다.
- Navigator.pop: 현재 화면을 스택에서 제거하고 이전 화면으로 돌아가도록 하는 메서드입니다.
- context: 현재 위젯이 속한 빌드 트리의 위치와 상태에 대한 정보를 가지고 있는 BuildContext 객체입니다.
- _textController.text: _textController는 TextField 위젯에 연결된 TextEditingController입니다. TextField에 사용자가 입력한 텍스트를 _textController.text를 통해 가져옵니다.
ElevatedButton(
onPressed: () {
Navigator.pop(context, _textController.text);
},
child: Text('Add Memo'),
),
입력 페이지에서 텍스트 입력 후 Add memo 버튼을 누릅니다.
데이터 처리
입력 페이지에서 사용자의 작업이 완료되면 Navigator.pop을 통해 이전 화면으로 되돌아가고자 할때 사용자의 입력을 기다립니다.
- then 메서드는 Navigator.push의 비동기 작업이 완료되면 실행되는 코드 블록을 정의합니다.
- value: MemoInputPage에서 Navigator.pop을 통해 반환된 값입니다. 여기서는 새로운 메모나 데이터가 입력되었을 경우 해당 값을 받아옵니다.
- if (value != null): 새로운 값이 넘어왔을 때만 아래 코드를 실행합니다. 이는 사용자가 입력을 완료하고 ‘Add Memo’ 버튼을 누르면, Navigator.pop(context, _textController.text)를 통해 반환된 값이 여기로 전달되기 때문입니다.
- setState: Flutter에서 상태를 변경할 때 사용하는 메서드로, UI 업데이트를 트리거합니다. 여기서는 items.add(value)를 통해 리스트에 새로운 항목을 추가하고, 이로 인해 화면이 다시 그려집니다.
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MemoInputPage()),
).then((value) {
if (value != null) {
setState(() {
items.add(value); // Add the new item
});
}
});
},
입력한 텍스트를 메인페이지 리스트뷰에 보여줍니다.
마무리
지금까지 플러터(flutter)에서 화면 간 데이터 전달을 구현하여 입력한 정보를 표시하는 기능을 추가했습니다. 그러나 앱을 종료하면 데이터가 사라지게 되고 이때에는 데이터베이스를 사용해야 됩니다. 다음 글에서는 메모장 앱을 다시 실행해도 데이터가 유지되도록 내장 데이터베이스 사용방법에 대해서 작성하겠습니다. 읽어주셔서 감사합니다.