在文本字段 flutter 内下拉

Question

This is what I have currently:

My design / what I want it to be:

This is my code and this sized box is a part of a column which is a part of a form:

SizedBox(
                height: 80.0,
                child: Stack(alignment: Alignment.centerRight, children: [
                  TextFormField(
                      controller: null,
                      style: const TextStyle(color: Colors.white),
                      maxLength: 2,
                      decoration: InputDecoration(
                          fillColor: const Color(0xff353251),
                          filled: true,
                          hintText: 'ex. 5 hours',
                          contentPadding: const EdgeInsets.all(20.0),
                          hintStyle: const TextStyle(color: Colors.white24),
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(15.0)))),
                  DropdownButton(
                      value: goalValue,
                      dropdownColor: const Color(0xff403A4F),
                      style: const TextStyle(color: Colors.white),
                      onChanged: (String? value) {
                        setState(() {
                          goalValue = value!;
                        });
                      },
                      items: <String>['Per Week', 'Per Day', 'Per Month']
                          .map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Text(value),
                        );
                      }).toList()),
                ]),
              ),

Thanks in advance!

Answer 1

Instead of Stack, I am using Container for outer decoration and Row for placing two widgets. There are many changes occur during styling the property and used random color, play with styling.

Now The result is

Container(
  alignment: Alignment.center,
  padding: const EdgeInsets.only(left: 16),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15.0),
    color: Color(0xff353251),
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      const Flexible(
        flex: 2,
        child: TextField(
          controller: null,
          style: TextStyle(color: Colors.white),
          maxLength: 2,
          buildCounter: null,
          decoration: InputDecoration(
            fillColor: Color(0xff353251),
            filled: true,
            counterText: "",
            hintText: 'ex. 5 hours',
            contentPadding: EdgeInsets.only(right: 4),
            hintStyle: TextStyle(color: Colors.white24),
            border: InputBorder.none,
            focusedBorder: InputBorder.none,
            enabledBorder: InputBorder.none,
            errorBorder: InputBorder.none,
          ),
        ),
      ),
      Flexible(
        flex: 1,
        child: Container(
          padding: EdgeInsets.only(right: 16, left: 16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            color: Colors.purpleAccent,
          ),
          child: Theme(
            data: Theme.of(context).copyWith(
              canvasColor: Colors.purpleAccent,
            ),
            child: DropdownButton(
                borderRadius: BorderRadius.circular(15.0),
                underline: const SizedBox(),
                icon: const SizedBox(),
                value: goalValue,
                style: const TextStyle(color: Colors.white),
                hint: const Text(
                  "select",
                  style: TextStyle(color: Colors.white),
                ),
                onChanged: (String? value) {
                  setState(() {
                    goalValue = value!;
                  });
                },
                items: <String>['Per Week', 'Per Day', 'Per Month']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList()),
          ),
        ),
      ),
    ],
  ),
),