~114. Working with "Futures" for Handling Data from the Future

1. 모달을 닫는 방법, 한줄에 입력 칸 2개 만들기, DatePicker를 사용해보자.

 

- new_expense.dart

import 'package:expense_tracker/models/expense.dart';

import 'package:flutter/material.dart';

class NewExpense extends StatefulWidget {

  const NewExpense({super.key});

  @override

  State<NewExpense> createState() => _NewExpenseState();

}

class _NewExpenseState extends State<NewExpense> {

  final _titleController = TextEditingController();

  final _amountController = TextEditingController();

  DateTime? _selectedDate;

  void _presentDatePicker() async {

    final now = DateTime.now();

    final firstDate = DateTime(now.year - 1, now.month, now.day);

    final pickedDate = await showDatePicker(

        context: context,

        initialDate: now,

        firstDate: firstDate,

        lastDate: now);

    setState(() {

      _selectedDate = pickedDate;

    });

  }

  @override

  void dispose() {

    _titleController.dispose();

    _amountController.dispose();

    super.dispose();

  }

  @override

  Widget build(BuildContext context) {

    return Padding(

      padding: const EdgeInsets.all(16),

      child: Column(

        children: [

          TextField(

            controller: _titleController,

            maxLength: 50,

            decoration: const InputDecoration(

              label: Text("Title"),

            ),

          ),

          Row(

            children: [

              Expanded(

                child: TextField(

                  controller: _amountController,

                  keyboardType: TextInputType.number,

                  decoration: const InputDecoration(

                    prefixText: '\$ ',

                    label: Text("Amount"),

                  ),

                ),

              ),

              const SizedBox(

                width: 16,

              ),

              Expanded(

                child: Row(

                  mainAxisAlignment: MainAxisAlignment.end,

                  crossAxisAlignment: CrossAxisAlignment.center,

                  children: [

                    Text(_selectedDate == null

                        ? 'select date'

                        : formatter.format(_selectedDate!)),

                    IconButton(

                        onPressed: _presentDatePicker,

                        icon: const Icon(

                          Icons.calendar_month,

                        ))

                  ],

                ),

              )

            ],

          ),

          Row(

            children: [

              TextButton(

                  onPressed: () {

                    Navigator.pop(context);

                  },

                  child: const Text("Cancel")),

              ElevatedButton(

                  onPressed: () {

                    print(_titleController.text);

                    print(_amountController.text);

                  },

                  child: const Text('Save Expense'))

            ],

          )

        ],

      ),

    );

  }

}

1) Navigator.pop(context)로 모달창 닫음 (네비게이터 관련해서는 추 후 강의에 이어서 나옴)

2) Expanded와 Row로 2줄로 만들었음

3) DatePicker 사용법 및 해당 값은 future 값으로 async await로 설정. 해당 값이 정해지면 setState로 화면 리렌더링으로 결과 값이 화면에 나오게 세팅 / 해당 값은 DateTime? _selectedDate; 값으로 들어가게됨 (이때 ? 는 초기값이 null이기 때문에 사용)

 다른 파일에 있는 formatter를 해당 파일로 가져오고 삼항 연산자로 세팅 (이때 마지막 !는 null이 확정적으로 아니라는 말임 - 값이 있다.) 

 

 

-결과 화면