Flutter国家与州信息获取插件flutter_country_state的使用

Flutter国家与州信息获取插件flutter_country_state的使用

flutter_country_state

一个直观且多功能的Flutter包，旨在简化应用中国家、州和城市的展示。通过无缝集成，它提供了全球各国的综合列表，允许用户轻松导航到各州和城市。具备用户友好的搜索功能和广泛的自定义选项，它可以轻松地集成到底部弹窗和全屏布局中，从而提升用户体验并简化开发过程。

该插件支持Android、iOS和Web平台。

示例

请运行example文件夹中的示例应用程序。

安装

在pubspec.yaml文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_country_state:

使用方法

选择国家

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  isDismissible: false,
  builder: (context) => SizedBox(
    height: MediaQuery.of(context).size.height * 0.7,
    child: ShowCountryDialog(
      searchHint: '搜索国家',
      substringBackground: Colors.black,
      style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
      searchStyle: const TextStyle(color: Colors.black),
      subStringStyle: const TextStyle(color: Colors.white),
      selectedCountryBackgroundColor: Colors.pink,
      notSelectedCountryBackgroundColor: Colors.white,
      onSelectCountry: (){ 
        setState(() {
          selectedCountry = Variables.country;
        }); 
      },
    ),
  ),
);

选择州

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  isDismissible: false,
  builder: (context) => SizedBox(
    height: MediaQuery.of(context).size.height * 0.7,
    child: ShowStateDialog(
      style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
      subStringStyle: const TextStyle(color: Colors.white),
      substringBackground: Colors.black,
      selectedStateBackgroundColor: Colors.orange,
      notSelectedStateBackgroundColor: Colors.white,
      onSelectedState: (){
        setState(() {
          selectedState = Variables.state;
        });
      },
    ),
  ),
);

选择城市

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  isDismissible: false,
  builder: (context) => SizedBox(
    height: MediaQuery.of(context).size.height * 0.7,
    child: ShowCityDialog(
      style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
      subStringStyle: const TextStyle(color: Colors.white),
      substringBackground: Colors.black,
      selectedCityBackgroundColor: Colors.orange,
      notSelectedCityBackgroundColor: Colors.white,
      onSelectedCity: (){
        setState(() {
          selectedCity = Selected.city;
        });
      },
    ),
  ),
);

下一步目标

  • [x] 添加国家标志
  • [x] 添加国家代码

完整示例代码

以下是完整的示例代码，展示了如何使用flutter_country_state插件来选择国家、州和城市。

import 'package:flutter/material.dart';
import 'package:flutter_country_state/flutter_country_state.dart';

String selectedState = "";
String selectedCity = "";
String selectedCountry = "";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.white)
      ),
      home: const MyHomePage(title: 'Flutter_country_state Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text(selectedCountry),
            Text(selectedState),
            Text(selectedCity),
            const SizedBox(height: 40,),
            ElevatedButton(
              onPressed: () {
                showModalBottomSheet(
                  isScrollControlled: true,
                  context: context,
                  isDismissible: false,
                  builder: (context) => SizedBox(
                    height: MediaQuery.of(context).size.height * 0.7,
                    child: ShowCountryDialog(
                      searchHint: '搜索国家',
                      substringBackground: Colors.black,
                      style: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                      countryHeaderStyle: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
                      searchStyle: const TextStyle(color: Colors.black),
                      subStringStyle: const TextStyle(color: Colors.white),
                      selectedCountryBackgroundColor: Colors.pink,
                      notSelectedCountryBackgroundColor: Colors.white,
                      onSelectCountry: () {
                        setState(() {
                          selectedCountry = Variables.country;
                        });
                      },
                    ),
                  ),
                );
              },
              child: const Text("选择国家"),
            ),
            const SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                showModalBottomSheet(
                  isScrollControlled: true,
                  context: context,
                  isDismissible: false,
                  builder: (context) => SizedBox(
                    height: MediaQuery.of(context).size.height * 0.7,
                    child: ShowStateDialog(
                      style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
                      stateHeaderStyle: const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
                      subStringStyle: const TextStyle(color: Colors.white),
                      substringBackground: Colors.black,
                      selectedStateBackgroundColor: Colors.orange,
                      notSelectedStateBackgroundColor: Colors.white,
                      onSelectedState: () {
                        setState(() {
                          selectedState = Variables.state;
                        });
                      },
                    ),
                  ),
                );
              },
              child: const Text("选择州"),
            ),
            const SizedBox(height: 20,),
            ElevatedButton(
              onPressed: () {
                showModalBottomSheet(
                  isScrollControlled: true,
                  context: context,
                  isDismissible: false,
                  builder: (context) => SizedBox(
                    height: MediaQuery.of(context).size.height * 0.7,
                    child: ShowCityDialog(
                      style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
                      subStringStyle: const TextStyle(color: Colors.white),
                      substringBackground: Colors.black,
                      selectedCityBackgroundColor: Colors.orange,
                      notSelectedCityBackgroundColor: Colors.white,
                      onSelectedCity: () {
                        setState(() {
                          selectedCity = Selected.city;
                        });
                      },
                    ),
                  ),
                );
              },
              child: const Text("选择城市"),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter国家与州信息获取插件flutter_country_state的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter国家与州信息获取插件flutter_country_state的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_country_state插件来获取国家和州信息的示例代码。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_country_state依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_country_state: ^latest_version # 替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你需要使用国家和州信息的Dart文件中导入插件：

import 'package:flutter_country_state/flutter_country_state.dart';

3. 初始化插件

在应用的顶层（例如MyApp类）中初始化插件：

import 'package:flutter/material.dart';
import 'package:flutter_country_state/flutter_country_state.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CountryStateScreen(),
    );
  }
}

4. 使用插件获取国家和州信息

创建一个新的屏幕（例如CountryStateScreen）来展示国家和州信息：

import 'package:flutter/material.dart';
import 'package:flutter_country_state/flutter_country_state.dart';

class CountryStateScreen extends StatefulWidget {
  @override
  _CountryStateScreenState createState() => _CountryStateScreenState();
}

class _CountryStateScreenState extends State<CountryStateScreen> {
  CountryPickerController _countryPickerController = CountryPickerController();
  List<Country> _countries = [];
  List<State> _states = [];
  String _selectedCountry = '';
  String _selectedState = '';

  @override
  void initState() {
    super.initState();
    // 获取所有国家列表
    _countryPickerController.getAllCountries().then((countries) {
      setState(() {
        _countries = countries;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Country and State Picker'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Select Country:'),
            SizedBox(height: 10),
            DropdownButton<String>(
              value: _selectedCountry,
              hint: Text('Select Country'),
              onChanged: (newValue) {
                setState(() {
                  _selectedCountry = newValue;
                  // 获取选定国家的州列表
                  _countryPickerController
                      .getStatesByCountryCode(_selectedCountry.toLowerCase())
                      .then((states) {
                    setState(() {
                      _states = states;
                    });
                  });
                });
              },
              items: _countries.map<DropdownMenuItem<String>>((Country country) {
                return DropdownMenuItem<String>(
                  value: country.code,
                  child: Text(country.name),
                );
              }).toList(),
            ),
            SizedBox(height: 20),
            Text('Select State:'),
            SizedBox(height: 10),
            DropdownButton<String>(
              value: _selectedState,
              hint: Text('Select State'),
              isEnabled: _states.isNotEmpty,
              onChanged: (newValue) {
                setState(() {
                  _selectedState = newValue;
                });
              },
              items: _states.map<DropdownMenuItem<String>>((State state) {
                return DropdownMenuItem<String>(
                  value: state.name,
                  child: Text(state.name),
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

现在你可以运行你的Flutter应用，你将看到一个下拉列表，用于选择国家和相应的州。选择国家后，州列表将自动更新为选定国家的州。

这个示例展示了如何使用flutter_country_state插件来获取和显示国家和州信息。根据你的需求，你可以进一步定制和扩展这个示例。

回到顶部