如何在Flutter中实现country_pickers小部件?

时间:2019-07-14 19:01:39

标签: flutter

我想使用此Country Pickers小部件的“ CountryPickerCupertino”版本:https://pub.dev/packages/country_pickers在我的应用中;但是,我是一个初学者,但仍然无法弄清楚在哪里粘贴代码。

以下是小部件的代码:

void _openCupertinoCountryPicker() => showCupertinoModalPopup<void>(
  context: context,
  builder: (BuildContext context) {
    return CountryPickerCupertino(
      pickerSheetHeight: 300.0,
      onValuePicked: (Country country) =>
          setState(() => _selectedCupertinoCountry = country),
    );
  });

这是我的代码:

import 'package:country_pickers/country_pickers.dart';

class NationPickerScreen extends StatelessWidget {

  void _openCupertinoCountryPicker() => showCupertinoModalPopup<void>(
      context: context,
      builder: (BuildContext context) {
        return CountryPickerCupertino(
          pickerSheetHeight: 300.0,
          onValuePicked: (Country country) =>
              setState(() => _selectedCupertinoCountry = country),
        );
      });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Center(
                  child: Text(
                    'Which nation do you represent?',
                    style: kTitleTextStyle,
                    ),
                  ),
                ),

              Container(
                // Here is where I'd like the widget to be displayed.
                  _openCupertinoCountryPicker()
              )
            ],
          ),
        ),
      ),
    );
  }
}

这是我收到的错误:

  • 未为类“ NationPickerScreen”定义方法“ showCupertinoModalPopup”。

  • 未定义名称“上下文”。

  • 未定义的“国家/地区”类。

  • 未为类'NationPickerScreen'定义方法'setState'。

  • 未定义名称'_selectedCupertinoCountry'。

我觉得也许我需要制作一个新的dart文件,制作一个新的有状态的小部件,在其中粘贴代码,然后以某种方式在我的无状态的小文件中运行该新的有状态的小部件?但是我尝试了这个,但得到了更多的错误。

有人会指出我正确的方向吗?谢谢!

1 个答案:

答案 0 :(得分:0)

您应将无状态小部件更改为有状态小部件,因为任何选择都会更改页面的状态。 (setState最有可能用于指示选择)。

第二,您应该声明以下内容:

Country _selected;

,它将存储您选择的国家及其代码后将显示的答案。您可以通过在Windows上单击Alt + Enter来导入国家(地区)类。

最后,如果您同时为iOS和Android设计,则最好检查程序的平台类型。您可以通过导入dart.io然后执行

Platform.isIOS ? iOSPicker() : androidDropdown()

应该可以解决您的大多数问题!