~111. Exercise Solution

1. Textinput을 만들어보자.

 

- new_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();

  @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"),

            ),

          ),

          TextField(

            controller: _amountController,

            keyboardType: TextInputType.number,

            decoration: const InputDecoration(

              prefixText: '\$ ',

              label: Text("Amount"),

            ),

          ),

          Row(

            children: [

              TextButton(onPressed: () {}, child: const Text("Cancel")),

              ElevatedButton(

                  onPressed: () {

                    print(_titleController.text);

                    print(_amountController.text);

                  },

                  child: const Text('Save Expense'))

            ],

          )

        ],

      ),

    );

  }

}

1) TextFiel에 controller를 추가해준다.

2) controller는 TextEditingContoller()를 사용하는데, 이는 계속 사용하게 되면 메모리를 잡아 먹기 때문에, 해당 위젯이 사라지면 dispose 될 수 있도록, dispose 부분을 추가해준다. (stateful 에서만 작동함, stateless에서는 하면 안됨)

3) 최종 text 값은 xxx.text로 호출.

 

참고로 아래처럼 meterial 테마를 3으로 바꿔주었다.

 

- main.dart

void main() {

  runApp(

    MaterialApp(

      theme: ThemeData(useMaterial3: true),

      home: const Expenses(),

    ),

  );

}

 

 

- 결과 화면