Как изменить ширину выбора страны во флаттере? - PullRequest
Новая
       80

Как изменить ширину выбора страны во флаттере?

0 голосов
/ 30 мая 2020
  • Я использую поле выбора кода страны и номера мобильного телефона.
  • Как изменить размер окна выбора страны, чтобы и окно выбора страны, и текстовое поле номера мобильного телефона были размещены правильно.
  • Код следующий 
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;
                              },
                          ),
                        ),
                      ],
                    ),
  • Изображение прикреплено ниже enter image description here

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Дайте первому Expanded виджету значение гибкости 1, а второму Expanded 3.

Что происходит, так это то, что ширина делится на 4 равные части (1 + 3), и 1 часть занята первым виджетом Expanded, а оставшиеся 3 части занимают второй виджет Expanded. Вы можете поиграть с различными пропорциями в соответствии с вашими потребностями пользовательского интерфейса. 


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;
                  },
                ),
              ),
            ],
          ),
0 голосов
/ 30 мая 2020

Вы можете просто обернуть свой виджет в контейнеры с шириной без 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;
                              },
                            ),
                          ),
                        ],
                      ),
...