~107. Handling User (Text) Input with the TextField Widget

1. appbar 추가 및 바텀모달추가

 

- expenses.dart

  void _openAddExpenseOverlay() {

    showModalBottomSheet(

        context: context, builder: (ctx) => const NewExpense());

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text("Flutter ExpenseTracker"),

        actions: [

          IconButton(

              onPressed: _openAddExpenseOverlay, icon: const Icon(Icons.add))

        ],

      ),

1) appBar를 통해 상단에 앱바 추가 및 actions를 사용하여 아이콘 주가 및 바텀모달을 연동

 

- 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> {

  @override

  Widget build(BuildContext context) {

    return const Padding(

      padding: EdgeInsets.all(16),

      child: Column(

        children: [

          TextField(

            maxLength: 50,

            decoration: InputDecoration(label: Text("Title")),

          ),

        ],

      ),

    );

  }

}

1) 바텀 모달 위젯

2) TextField를 통해 값 입력 가능

 

- 결과 화면