flutter - 如何在抖动中更改国家/地区选择器的宽度？

Question

我正在实现国家代码选择器和手机号码字段。

如何更改国家/地区选择器的大小，以便正确放置国家/地区选择器和手机号码文本字段。

代码如下

Row(
                      children: <Widget>[
                        Expanded(
                          //SizedBox(height: 20.0),
                          child: CountryPicker(
                            dense: true,
                            showFlag: false, //displays flag, true by default
                            showDialingCode:true, //displays dialing code, false by default
                            showName: true, //displays country name, true by default
                            showCurrency: false, //eg. 'British pound'
                            showCurrencyISO: false,
                            onChanged: (Country country) {
                              setState(() => _selected = country);
                              print(country.dialingCode);
                              countryCode = country.dialingCode;
                              },
                            selectedCountry: _selected,
                          ),
                        ),
                        Expanded(
                          //SizedBox(height: 20.0),
                          child: TextFormField(
                            decoration: InputDecoration(
                              labelText: 'Mobile no.',
                              border: OutlineInputBorder(),
                            ),
                            validator: (val) => val.length != 10
                                ? 'Enter a mobile number of 10 digits'
                                : null,
                            onChanged: (val) {
                              setState(() => phone = val);
                              phoneno = phone;
                              },
                          ),
                        ),
                      ],
                    ),

图片如下

Answer 1

将第一个Expanded小部件的flex值赋予1，将第二个Expanded 3的flex值赋予。

发生的情况是，宽度被分成4个相等的部分(1 + 3)，第一个Expanded小部件占用了1个部分，而第二个Expanded小部件占用了其余的3个部分。您可以按各种比例玩耍，以满足您的UI需求。

Row(
            children: <Widget>[
              Expanded(
                flex: 1,
                //SizedBox(height: 20.0),
                child: CountryPicker(
                  dense: true,
                  showFlag: false, //displays flag, true by default
                  showDialingCode:
                      true, //displays dialing code, false by default
                  showName: true, //displays country name, true by default
                  showCurrency: false, //eg. 'British pound'
                  showCurrencyISO: false,
                  onChanged: (Country country) {
                    setState(() => _selected = country);
                    print(country.dialingCode);
                    countryCode = country.dialingCode;
                  },
                  selectedCountry: _selected,
                ),
              ),
              Expanded(
                flex: 3,
                //SizedBox(height: 20.0),
                child: TextFormField(
                  decoration: InputDecoration(
                    labelText: 'Mobile no.',
                    border: OutlineInputBorder(),
                  ),
                  validator: (val) => val.length != 10
                      ? 'Enter a mobile number of 10 digits'
                      : null,
                  onChanged: (val) {
                    setState(() => phone = val);
                    phoneno = phone;
                  },
                ),
              ),
            ],
          ),