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

211005 화

내일 발표다! 할 일을 기록하는 앱 얼른 만들장!

페이지 이동 기능 만들기

    return Scaffold(
      appBar: AppBar(
        title: Text('Sub Detail Example'),
      ),
      body: Container(
        child: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushReplacementNamed('/second');
            },
            child: Text('두 번째 페이지로 이동하기'),
          ),
        ),
      ),
    );

👉🏻 페이지 이동하도록 만든다.
✍🏻 pushReplacementNamed() 함수: 스택 메모리에 있는 자료를 교체한다.

import 'package:flutter/material.dart';
import 'subDetail.dart';
import 'secondDetail.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const String _title = 'Widget Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      initialRoute: '/',
      routes: {
        '/': (context) => SubDetail(),
        '/second': (context) => SecondDetail(),
      },
    );
  }
}

✍🏻 but 스택 위젯이 하나도 없어 첫 페이지로 못 돌아가고 검은 화면이 나온다.

 

          child: ElevatedButton(
            onPressed: () {
              Navigator.of(context).pushNamed('/second');
            },
            child: Text('두 번째 페이지로 이동하기'),
          ),

✍🏻 pushNamed: 새로운 자료를 추가/ pushReplacementNamed: 스택에서 자료를 교체

-----secondDetail.dart-----
		child: ElevatedButton(
           onPressed: () {
             Navigator.of(context).pushReplacementNamed('/third');
           },
            child: Text('세 번째 페이지로 돌아가기'),
          ),
          
          
          
-----main.dart-----
                routes: {
        '/': (context) => SubDetail(),
        '/second': (context) => SecondDetail(),
        '/third': (context) => ThirdDetail()

👉🏻 스택에서 현재 위치의 자료를 세 번째 페이지로 교체하고 main에서 경로를 추가한다.

 

  할 일 보기 기능 만들기  

📌 페이지에 데이터를 전달하는 방법을 알아보자

class _SubDetail extends State<SubDetail> {
  List<String> todoList = new List.empty(growable: true);

  @override
  void initState() {
    super.initState();
    todoList.add('당근 사오기');
    todoList.add('약 사오기');
    todoList.add('청소하기');
    todoList.add('부모님께 전화드리기');
  }

👉🏻 기본적인 todo 리스트를 만든다.

      body: ListView.builder(
        itemBuilder: (context, index) {
          return Card(
            child: InkWell(
              child: Text(
                todoList[index],
                style: TextStyle(fontSize: 30),
              ),
              onTap: () {
                Navigator.of(context)
                    .pushNamed('/third', arguments: todoList[index]);
              },
            ),
          );
        },
        itemCount: todoList.length,
      ),

👉🏻 ListView로 리스트를 표현한다.
✍🏻 InkWell 위젯: 탭, 더블탭, 롱탭 등 터치 이벤트를 처리한다.

class ThirdDetail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String args = ModalRoute.of(context)!.settings.arguments.toString();
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Container(
        child: Center(
          child: Text(
            args,
            style: TextStyle(fontSize: 30),
          ),

👉🏻 데이터를 받아서 처리하는 코드를 작성한다.
✍🏻 ModalRoute.of(context)!.settings.arguments.toString();은 라우터로 전달받은 데이터를 가져온다.

  할 일 추가 기능 만들기  

      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addNavigation(context)
        },
        child: Icon(Icons.add),
        
 (...생략...)
 
  void _addNavigation(BuildContext context) async {
    final result = await Navigator.of(context).pushNamed('second');
    setState(() {
      todoList.add(result as String);
    });
  }

👉🏻 반환하는 값을 목록에 저장하는 코드를 만들고 플로팅 버튼에서 이 함수를 추가한다.
✍🏻 데이터를 받은 후에 실행해야 하므로 비동기 방식이다.

class SecondDetail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TextEditingController controller = new TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              TextField(
                controller: controller,
                keyboardType: TextInputType.text,
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop(controller.value.text);
                },
                child: Text('저장하기'),
              ),
            ],
          )));
  }
}

👉🏻 두 번째 페이지에 할 일을 등록하는 텍스트 필드와 버튼을 추가한다.