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;
                              },
                          ),
                        ),
                      ],
                    ),

• 图片附在下面

标签： flutterdartcountry-codes

Answer 1

给第一Expanded个小部件的 flex 值 1 和第二个Expanded3。

发生的情况是宽度被分成 4 个相等的部分 (1+3)，其中 1 个部分被第一Expanded个小部件占据，其余 3 个部分被第二Expanded个小部件占据。您可以调整各种比例来满足您的 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;
                  },
                ),
              ),
            ],
          ),