Flutter移动应用开发 - 城市选择器

最新推荐文章于 2024-09-24 10:15:45 发布

铖铖的花嫁

最新推荐文章于 2024-09-24 10:15:45 发布

阅读量1.2k

点赞数 2

分类专栏： # Flutter 移动应用开发文章标签： flutter ios android

本文链接：https://blog.csdn.net/Hjh1906008151/article/details/128763672

版权

移动应用开发同时被 2 个专栏收录

21 篇文章 7 订阅

订阅专栏

Flutter

16 篇文章 3 订阅

订阅专栏

该文章介绍了一个基于Flutter的库存管理应用，用户可以选择城市来管理库存。应用使用了address_picker包来实现省市区选择，通过ModalBottomSheet展示选择界面，选择后的城市信息会更新到库存管理界面。

摘要由CSDN通过智能技术生成

0. 项目简介

项目想法脱胎于2023年服务外包大赛A18题随手买（详情）

整个APP思路如下：

在这里插入图片描述

这篇博客主要服务于管理员界面的库存管理功能，在进入库存管理子界面后选择城市，根据城市购买管理库存。

1. 效果展示

在这里插入图片描述

2. 代码

依赖如下

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  address_picker: ^0.0.1

相关文件如下

// 点击后进入这个界面
storebuy.dart
// 主要代码都在这
storePage.dart

storePage.dart

import 'package:address_picker/address_picker.dart';
import 'package:flutter/material.dart';
import 'storebuy.dart';

class storePage extends StatefulWidget {
  const storePage({Key? key}) : super(key: key);

  @override
  State<storePage> createState() => _storePageState();
}



class _storePageState extends State<storePage> {
  String city = "请选择城市";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: (){
          print("在不同页点击了空白区域！！！！！！！！！！！！！");
          Navigator.of(context).push(
            MaterialPageRoute<void>(
              builder: (context) => storebuy(city: city),
            ),
          );
        },
        child: Center(
          child: TextButton(
            child: Text(city, style: TextStyle(fontSize: 30),),
            onPressed: () {
              showModalBottomSheet(
                  context: context,
                  builder: (context) => BottomSheet(
                      onClosing: () { },
                      builder: (context) => Container(
                        height: 300.0,
                        child: AddressPicker(
                          style: TextStyle(color: Colors.black, fontSize: 17),
                          mode: AddressPickerMode.provinceCityAndDistrict,
                          onSelectedAddressChanged: (address) {
                            setState(() {
                              city = '${address.currentProvince.province}'+'${address.currentCity.city}'+'${address.currentDistrict.area}';
                            });
                          },
                        ),
                      )
                  )
              );
            },
          ),
        ),
      )

    );
  }
}