~208. A Form-aware Dropdown Button

1. 새로운 스크린에 form형식과 드랍다운 버튼을 만들어보자

 

- new_item.dart

import 'package:flutter/material.dart';

import 'package:shopping_list/data/categories.dart';

class NewItem extends StatefulWidget {

  const NewItem({super.key});

  @override

  State<NewItem> createState() {

    return _NewItemState();

  }

}

class _NewItemState extends State<NewItem> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Add a new item'),

      ),

      body: Padding(

        padding: const EdgeInsets.all(12),

        child: Form(

          child: Column(

            children: [

              TextFormField(

                maxLength: 50,

                decoration: const InputDecoration(

                  label: Text('Name'),

                ),

                validator: (value) {

                  return 'Demo...';

                },

              ), // instead of TextField()

              Row(

                crossAxisAlignment: CrossAxisAlignment.end,

                children: [

                  Expanded(

                    child: TextFormField(

                      decoration: const InputDecoration(

                        label: Text('Quantity'),

                      ),

                      initialValue: '1',

                    ),

                  ),

                  const SizedBox(width: 8),

                  Expanded(

                    child: DropdownButtonFormField(

                      items: [

                        for (final category in categories.entries)

                          DropdownMenuItem(

                            value: category.value,

                            child: Row(

                              children: [

                                Container(

                                  width: 16,

                                  height: 16,

                                  color: category.value.color,

                                ),

                                const SizedBox(width: 6),

                                Text(category.value.title),

                              ],

                            ),

                          ),

                      ],

                      onChanged: (value) {},

                    ),

                  ),

                ],

              ),

            ],

          ),

        ),

      ),

    );

  }

}

 

1) 그냥 드랍다운만 하면 value값이 칸에 안들어가는데 form안에 있으면, value값을 선택하면 자동으로 들어간다.

2)   for (final category in categories.entries) 이부분에서 entries의 의미는 map에서 key값과 value값을 선택 할 수 있게 해준다.

 

다음 강의에 이어서 form 부분을 꾸며보자. (유효성 검사 포함)

 

 

 

 

- 결과 화면