如何在 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.

发生的情况是宽度被分成 4 等份 (1+3)，其中 1 部分被第一个 Expanded 小部件占用，其余 3 部分被第二个 [=11] 占用=] 小部件。您可以根据自己的 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;
                  },
                ),
              ),
            ],
          ),

Answer 2

您可以简单地将小部件包装在没有 Expanded 宽度的容器中。这是我在设备宽度

中使用的代码

Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Container(
                            width: MediaQuery.of(context).size.width / 3.7,
                            margin: EdgeInsets.only(top: 20),
                            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,
                            ),
                          ),
                          Container(
                            width: MediaQuery.of(context).size.width / 1.6,
                            margin: EdgeInsets.only(top: 40),
                            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;
                              },
                            ),
                          ),
                        ],
                      ),

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

How do I change the width of the country picker in flutter?

country-codes

dart

flutter