Flutter自定义下拉列表+ TextFormField

Question

对于由Row和dropdown组成的TextFormField，我如何实现以下外观？

我可以使用以下代码来自定义TextFormField：

final phoneNumberBox =  DecoratedBox(
      decoration: const BoxDecoration(color: Color(0x2B8E8E93),
          borderRadius:BorderRadius.only(
              topRight: const Radius.circular(32),
              bottomRight: const Radius.circular(32))),
      child: phoneNumber,

    );

    final phoneNumber =
        TextFormField(
      keyboardType: TextInputType.phone,
      autofocus: false,
    controller: _phoneNumberController,
//      validator: Validator.validateField,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: new BorderRadius.only(
            topRight: const Radius.circular(32),
        bottomRight: const Radius.circular(32))),
      ),
    );

但是我不知道如何更改DropDown

Answer 1

远非完美，但可以选择

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(body: Content()),
    );
  }
}

class Content extends StatefulWidget {
  @override
  _ContentState createState() => _ContentState();
}

class _ContentState extends State<Content> {
  final List<String> _items = ['+1', '+42', '+666', '+17', '+228'];
  TextEditingController _phoneNumberController = TextEditingController();
  String _value;

  @override
  void initState() {
    super.initState();
    _value = _items.first;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 32),
        height: 56,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(28),
          color: Colors.grey[200],
        ),
        child: Row(
          children: <Widget>[
            DropdownButtonHideUnderline(
              child: Container(
                padding: const EdgeInsets.fromLTRB(32, 8, 16, 8),
                child: DropdownButton<String>(
                  value: _value,
                  items: _items.map((value) {
                    return DropdownMenuItem<String>(child: Text(value), value: value);
                  }).toList(),
                  onChanged: _onDropDownChanged,
                ),
              ),
            ),
            Container(width: 1, color: Colors.grey[300]),
            Expanded(
              child: TextFormField(
                keyboardType: TextInputType.phone,
                autofocus: false,
                controller: _phoneNumberController,
                decoration: InputDecoration(
                  contentPadding: const EdgeInsets.fromLTRB(16, 16, 8, 16),
                  border: InputBorder.none,
                  suffixIcon: Padding(
                    child: Icon(Icons.cancel, color: Colors.grey[400]),
                    padding: const EdgeInsets.only(right: 16),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _onDropDownChanged(String value) {
    setState(() {
      _value = value;
    });
  }
}