I want to add dropdown menu to TextField but I confuse. Here I attach my code and the design that I want to make.

SizedBox(
                width: 400,
                height: 64,
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'Category Area',
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                ),
              ),

Give me your best advice

CodePudding user response：

You need to use DropdownButton like this:

Container(
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(
            side: BorderSide(width: 1.0, style: BorderStyle.solid),
            borderRadius: BorderRadius.all(Radius.circular(5.0)),
          ),
        ),
        child: DropdownButton<String>(
          items: <String>[
            'Category 1',
            'Category 2',
            'Category 3',
            'Category 4'
          ].map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          hint: Text(selectedCategory.isEmpty
              ? 'Category Area'
              : selectedCategory),
          borderRadius: BorderRadius.circular(10),
          underline: SizedBox(),
          isExpanded: true,
          onChanged: (value) {
            if (value != null) {
              setState(() {
                selectedCategory = value;
              });
            }
          },
        ),
      ),

and also define selectedCategory out of build method:

String selectedCategory = '';