Flutter巴西城市州信息插件cidades_estados_ibge的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter巴西城市州信息插件cidades_estados_ibge的使用

cidades_estados_ibge 是一个用于Flutter应用的Dart包,提供了巴西各州和城市的详细信息。这个包可以轻松地在多个Flutter或Dart项目中共享。

开始使用

添加依赖

首先,在你的pubspec.yaml文件中添加cidades_estados_ibge的依赖:

dependencies:
  flutter:
    sdk: flutter
  cidades_estados_ibge: ^1.0.0 # 请根据最新版本号进行调整

然后运行以下命令以获取包:

flutter pub get

示例代码

下面是一个完整的示例,展示如何使用cidades_estados_ibge来显示巴西的所有州及其对应的城市。

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Brazil States and Cities',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StateCityScreen(),
    );
  }
}

class StateCityScreen extends StatefulWidget {
  @override
  _StateCityScreenState createState() => _StateCityScreenState();
}

class _StateCityScreenState extends State<StateCityScreen> {
  List<String> states = [];
  List<String> cities = [];
  String selectedState = '';
  String selectedCity = '';

  @override
  void initState() {
    super.initState();
    loadStates();
  }

  Future<void> loadStates() async {
    final allStates = await CidadesEstadosIbge.getAllStates();
    setState(() {
      states = allStates;
    });
  }

  Future<void> loadCities(String state) async {
    final allCities = await CidadesEstadosIbge.getCitiesByState(state);
    setState(() {
      cities = allCities;
      selectedCity = '';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Brazil States and Cities'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            DropdownButton<String>(
              value: selectedState.isNotEmpty ? selectedState : null,
              hint: Text('Select a state'),
              items: states.map((String state) {
                return DropdownMenuItem<String>(
                  value: state,
                  child: Text(state),
                );
              }).toList(),
              onChanged: (String newValue) {
                setState(() {
                  selectedState = newValue;
                  loadCities(newValue);
                });
              },
            ),
            SizedBox(height: 20),
            DropdownButton<String>(
              value: selectedCity.isNotEmpty ? selectedCity : null,
              hint: Text('Select a city'),
              items: cities.map((String city) {
                return DropdownMenuItem<String>(
                  value: city,
                  child: Text(city),
                );
              }).toList(),
              onChanged: (String newValue) {
                setState(() {
                  selectedCity = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

运行应用

确保你已经完成了上述步骤,并且所有的依赖都已正确安装。接下来,你可以通过以下命令运行你的Flutter应用:

flutter run

这将启动一个包含下拉菜单的应用程序,用户可以通过选择州来查看该州内的所有城市。

以上就是使用cidades_estados_ibge插件的基本指南和示例。希望这对你的开发有所帮助!


更多关于Flutter巴西城市州信息插件cidades_estados_ibge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter巴西城市州信息插件cidades_estados_ibge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用cidades_estados_ibge插件来获取巴西城市和州信息的示例代码。

步骤 1: 添加依赖

首先,你需要在pubspec.yaml文件中添加cidades_estados_ibge依赖:

dependencies:
  flutter:
    sdk: flutter
  cidades_estados_ibge: ^最新版本号  # 请确保使用最新版本号

步骤 2: 导入包

在你的Dart文件中(例如main.dart),导入该插件:

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

步骤 3: 使用插件

以下是一个完整的示例,展示了如何使用cidades_estados_ibge插件来获取巴西的州和城市信息,并在UI中显示:

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

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<Estado> estados = [];
  List<Cidade> cidades = [];
  String? selectedState;

  @override
  void initState() {
    super.initState();
    // 获取所有州信息
    CidadesEstadosIBGE().getAllEstados().then((value) {
      setState(() {
        estados = value;
      });
    });
  }

  void onStateChanged(String? state) {
    setState(() {
      selectedState = state;
      cidades = [];
      if (selectedState != null) {
        // 根据选择的州获取所有城市信息
        CidadesEstadosIBGE().getCidadesByEstado(selectedState!).then((value) {
          setState(() {
            cidades = value;
          });
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cidades e Estados do Brasil'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Estados:', style: TextStyle(fontSize: 20)),
            DropdownButton<String?>(
              hint: Text('Selecione um estado'),
              value: selectedState,
              onChanged: onStateChanged,
              items: estados.map((estado) {
                return DropdownMenuItem<String?>(
                  value: estado.sigla,
                  child: Text('${estado.nome} (${estado.sigla})'),
                );
              }).toList(),
            ),
            SizedBox(height: 20),
            if (selectedState != null) ...[
              Text('Cidades do estado selecionado:', style: TextStyle(fontSize: 20)),
              ListView.builder(
                shrinkWrap: true,
                itemCount: cidades.length,
                itemBuilder: (context, index) {
                  Cidade cidade = cidades[index];
                  return ListTile(
                    title: Text(cidade.nome),
                    subtitle: Text(cidade.ibge),
                  );
                },
              ),
            ],
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖添加:在pubspec.yaml中添加cidades_estados_ibge依赖。
  2. 导入包:在Dart文件中导入cidades_estados_ibge包。
  3. 获取州信息:在initState中调用CidadesEstadosIBGE().getAllEstados()来获取所有州的信息,并将其存储在estados列表中。
  4. 选择州:使用DropdownButton来显示所有州,并允许用户选择一个州。
  5. 获取城市信息:当用户选择一个州时,调用CidadesEstadosIBGE().getCidadesByEstado(selectedState!)来获取该州的所有城市信息,并将其存储在cidades列表中。
  6. 显示城市信息:使用ListView.builder来显示选中的州下的所有城市信息。

这样,你就可以在你的Flutter应用中展示巴西的州和城市信息了。

回到顶部