Routing 2 - Add New Dog Page

Routing 2: Add New Dog Page (강아지 등록 페이지 추가)

우리가 만들 페이지는 강아지를 추가하는 페이지이다.
다음 섹션에서 사용자 입력을 처리하는 방법을 보여주겠지만, 지금 해당 경로를 추가하는 것이 좋다.

1. Add NewDogPage

lib폴더에 new_dog_form.dart라는 파일을 신규로 생성한다.

이 페이지의 UI는 간단하다:

다음은 기능이 없는 코드이다. (다음 섹션에서 사용자 입력 기능을 추가할 예정이다)

// new_dog_form.dart

import 'package:flutter/material.dart';

class AddDogFormPage extends StatefulWidget {
  @override
  _AddDogFormPageState createState() => _AddDogFormPageState();
}

class _AddDogFormPageState extends State<AddDogFormPage> {
  @override
  Widget build(BuildContext context) {
    // 새로운 페이지는 scaffolding이 필요하다.
    return Scaffold(
      appBar: AppBar(
        title: Text('Add a new Dog'),
        backgroundColor: Colors.black87,
      ),
      body: Container(
        color: Colors.black54,
        child: Padding(
          padding: const EdgeInsets.symmetric(
            vertical: 8.0,
            horizontal: 32.0,
          ),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                // Text Field는 플러터의 기본 입력 위젯이다.
                // 이것은 아래에서 볼 수 있는 labelText와 같은 훌륭한UI 및 기능이 내장되어 있다.
                child: TextField(
                    decoration: InputDecoration(
                  labelText: 'Name the Pup',
                )),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: TextField(
                    decoration: InputDecoration(
                  labelText: "Pup's location",
                )),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: TextField(
                  decoration: InputDecoration(
                    labelText: 'All about the pup',
                  ),
                ),
              ),
              // A Strange situation.
              // 이상한 현상.
              // 여러분이 다음 섹션에서 추가해야할 앱의 일부는 context를 알아야 하며,
              // context를 전달하는 가장 쉬운 방법은 builder 메서드를 사용하는 것이다.
              // 그래서 나는 이 button을 Builder에 일종의 'hack'으로 감쌌다.
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Builder(
                  builder: (context) {
                    // 기본 Material 디자인 액션 버튼
                    return RaisedButton(
                      // 만약 onPressed가 null이면 button 은 비활성화(disabled)된다.
                      // 이건 필자가 만든 임시 callback 이다.
                      onPressed: () => print('PRESSED'),
                      color: Colors.indigoAccent,
                      child: Text('Submit Pup'),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. Add the Routing

마지막 섹션과 마찬가지로 등록 페이지는 아직 액세스 할 수 없다. 버튼과 라우팅 정보를 _MyHomePageState 클래스에 추가하자.

// main.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
      backgroundColor: Colors.black87,
      // Material appBar의 오른쪽 상단에 새로운 버튼을 추가하는 방법이다.
      // 여러분이 원하는 만큼 추가 할 수 있다.
      actions: [
         IconButton(
          icon: Icon(Icons.add),
          onPressed: _showNewDogForm,
        ),
      ],
    ),
  ...

그러면 앱의 오른쪽 상단 모서리에 플러스 기호 버튼이 추가되고 새로운 경로(route) 를 빌드 하는 메서드를 추가 할 수 있다.

main.dart에 new_dog_form.dart import.

// main.dart

import 'package:flutter/material.dart';

import 'dog_list.dart';
import 'dog_model.dart';
import 'new_dog_form.dart';

아래 코드를 _MyHomePageState 클래스 아무곳에나 추가하자.

// 새로운 경로를 pushing하고 그 경로가 여러분에게 되돌아 오기를 기대할때마다 여러분은 비동기 함수(async funtion)를 사용해야 한다.
// 이 경우 함수는 사용자가 작성하고 제출 할 수 있는 양식 페이지를 만든다.
// 제출시(submission) 해당 페이지의 정보가 이 함수로 다시 전달 된다.
Future _showNewDogForm() async {
  // push a new route like you did in the last section
  Dog newDog = await Navigator.of(context).push(
    MaterialPageRoute(
      builder: (BuildContext context) {
        return AddDogFormPage();
      },
    ),
  );

  // 사용자가 양식을 입력했는지를 확인하기 위한 null 검사. 
  if (newDog != null) {
    // 새로운 강아지 정보를 강아지 목록에 추가.
    initialDoggos.add(newDog);
  }
}