Flutter小功能实现-咖啡店

news2025/2/1 15:40:03

1 导航栏实现

效果图:

 

 

1.Package

google_nav_bar: ^5.0.6

使用文档:

google_nav_bar | Flutter Package

2.Code

//MyBottomNavBar

class MyBottomNavBar extends StatelessWidget {
  void Function(int)? onTabChange;

  MyBottomNavBar({super.key, required this.onTabChange});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(25),
      child: GNav(
          onTabChange: (value) => onTabChange!(value),
          color: Colors.grey[400],
          mainAxisAlignment: MainAxisAlignment.center,
          activeColor: Colors.grey[700],
          tabBackgroundColor: Colors.grey.shade300,
          tabBorderRadius: 24,
          tabActiveBorder: Border.all(color: Colors.white),
          tabs: const [
            GButton(icon: Icons.home, text: 'Shop'),
            GButton(icon: Icons.shopping_bag_outlined, text: 'Cart'),
          ]),
    );
  }
}

//HomePage

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectPage = 0;

  final List<Widget> _pages = [ShopPage(), CartPage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      bottomNavigationBar: MyBottomNavBar(
        onTabChange: (index) => navigateBottomBar(index),
      ),
      body: _pages[_selectPage],
    );
  }

  ///点击底部按钮响切换
  ///
  navigateBottomBar(int index) {
    setState(() {
      _selectPage = index;
    });
  }
}

2 商品列表实现

1.Package

provider

使用文档:

provider | Flutter Package

2.Code

Models 数据模型

Coffee 咖啡数据模型:名称、价格、图片

CoffeeShop 咖啡售卖数据模型:coffeeShop 在售咖啡种类,userCart用户购物车 ,addItemToCart添加到购物车方法,removeItemFromCart从购物车移除方法

class Coffee {
  final String name;
  final String price;
  final String imagePath;

  Coffee({required this.name, required this.price, required this.imagePath});
}

class CoffeeShop extends ChangeNotifier {
  //sale list
  final List<Coffee> _shop = [
    Coffee(
        name: 'Long Black',
        price: '4.10',
        imagePath: 'lib/images/coffee-cup.png'),
    Coffee(
        name: 'Espresso', price: '4.10', imagePath: 'lib/images/espresso.png'),
    Coffee(name: 'Frappe', price: '4.10', imagePath: 'lib/images/frappe.png'),
    Coffee(name: 'Iced', price: '4.10', imagePath: 'lib/images/iced.png'),
    Coffee(name: 'Latte', price: '4.10', imagePath: 'lib/images/latte.png'),
  ];

  //user cart
  final List<Coffee> _userCart = [];

  //get coffee list
  List<Coffee> get coffeeShop => _shop;

  //get user cart
  List<Coffee> get userCart => _userCart;

  //add item to cart
  void addItemToCart(Coffee coffee) {
    _userCart.add(coffee);
    notifyListeners();
  }

  //remove item from cart
  void removeItemFromCart(Coffee coffee) {
    _userCart.remove(coffee);
    notifyListeners();
  }
}

商品展示Tile组件

class CoffeeTile extends StatelessWidget {
  final Coffee coffee;
  final Icon icon;
  void Function()? onPressed;
  CoffeeTile({
    super.key,
    required this.coffee,
    required this.onPressed,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.grey[200], borderRadius: BorderRadius.circular(12)),
      margin: const EdgeInsets.only(bottom: 10),
      padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 10),
      child: ListTile(
        title: Text(coffee.name),
        subtitle: Text(coffee.price),
        leading: Image.asset(coffee.imagePath),
        trailing: IconButton(
          icon: icon,
          onPressed: onPressed,
        ),
      ),
    );
  }
}

3.源码下载:

https://download.csdn.net/download/sc_liuliye/88278760

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/954560.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于低代码/无代码工具构建 BI 应用程序

一、前言 随着数字化推进&#xff0c;越来越多的企业开始重视数据分析&#xff0c;希望通过BI&#xff08;商业智能&#xff09;技术提高业务决策的效率和准确性。 传统的BI解决方案往往需要大量的定制开发和数据准备&#xff0c;不仅周期长、成本高&#xff0c;还需要专业的数…

炒股技巧一文通!在深圳开股票账户交易佣金手续费一般是多少?

股票操作技巧可以说是股票投资成功的关键&#xff0c;下面是一些常用的技巧&#xff1a; 1.合理设置止盈止损&#xff1a;止盈可以帮助你在股票价格到达一定水平时获得利润&#xff0c;而止损可以保护你的本金&#xff0c;避免亏损过多。 2.选对个股&#xff1a;选对个股是根…

无涯教程-Android Mock Test函数

本节介绍了与 Android 相关的各种模拟测试。您可以在本地计算机上下载这些样本模拟测试,并在方便时离线解决。每个模拟测试均随附一个模拟测试键,可让您验证最终分数并为自己评分。 Mock Test I Mock Test II Mock Test III Mock Test IV Q 1 -什么是Android&#xff1f; A -A…

酒店的业务高度,关键还得看这个技术!

在酒店业务中&#xff0c;资产管理系统的重要性不容忽视。在这个竞争激烈且日益复杂的行业中&#xff0c;酒店经营者需要精确而高效地管理各种资源&#xff0c;包括客房、设备、财务以及人力。 资产管理系统为管理者提供了一个集中管理、优化和监控资产的强大工具。这不仅有助于…

产能紧张,联电、日月光急单要涨价 | 百能云芯

台积电在CoWoS先进封装领域的产能紧张&#xff0c;这导致英伟达在AI芯片方面的生产受到限制。有消息称&#xff0c;英伟达正考虑通过加价寻找除台积电以外的替代生产能力&#xff0c;以应对这一局面。这一消息引发了巨大的订单涌入效应。 联电公司作为提供CoWoS中间层材料的供应…

​放弃数据库,改用Kafka!

长期以来&#xff0c;数据库一直充当着记录系统&#xff0c;它们以可靠且持久的方式存储和管理关键数据&#xff0c;也赢得了大多数公司的信赖。 但时代在变。许多新兴趋势正在影响当今数据的存储和管理方式&#xff0c;不得不让一些技术决策者们重新考虑数据存储究竟还有哪些…

国标GB28181安防视频平台EasyGBS角色设备分配功能优化

视频流媒体安防监控国标GB28181平台EasyGBS视频能力丰富&#xff0c;部署灵活&#xff0c;既能作为业务平台使用&#xff0c;也能作为安防监控视频能力层被业务管理平台调用。国标GB28181视频监控EasyGBS平台可提供流媒体接入、处理、转发等服务&#xff0c;支持内网、公网的安…

2023年全方位SaaS平台测评!SaaS平台应该怎么选择?

什么是SaaS平台&#xff1f;SaaS平台的优势在哪&#xff1f;怎么样选择SaaS平台&#xff1f;作为两个在SaaS平台领域做的非常优秀的资深平台&#xff0c;简道云和salesforce究竟能更胜一筹&#xff1f;本篇&#xff0c;我将带领大家深入测评这两款SaaS平台&#xff0c;话不多说…

Jmter生成MD5 jmter使用md5 jmter使用自定义参数 jmter生成自定义参数 jmter编写java代码

Jmter生成MD5 jmter使用md5 jmter使用自定义参数 jmter生成自定义参数 jmter编写java代码 1、创建一个线程组2、创建线程组 http请求3、在 http请求添加前置处理器(BeanShell)4、请求测试 是否生效4.1 GET请求4.2 POST请求 1、创建一个线程组 2、创建线程组 http请求 在线程组…

linux云服务器安装宝塔

首先远程连接服务器 yum update -y 拉取宝塔面板镜像并安装 #CentOS7以上: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh #CentOS7以下: #yum install -y wget && wget -O install.sh…

一体化数据安全平台 uDSP 获“金鼎奖”优秀金融科技解决方案奖

近日&#xff0c;2023 年中国国际金融展“金鼎奖”评选结果揭晓&#xff0c;原点安全打造的“一体化数据安全平台 uDSP”产品获评“金鼎奖”优秀金融科技解决方案奖。该产品目前已广泛应用于银行业、保险企业、证券、医疗、互联网、政务、在线教育等诸多领域。此次获奖再次印证…

关闭浏览器的跨域校验

首发博客地址 问题描述 当你访问资源失败&#xff0c;并遇到以下类似提示时&#xff1a; Access to script at 资源路径 from origin null has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrom…

Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式

&#x1f954;&#xff1a;如果事与愿违&#xff0c;那一定是上天另有安排 更多Vue知识请点击——Vue.js VUE2-Day13 router-link的replace属性编程式路由导航1、什么是编程式路由导航2、如何编码3、使用案例示例说明 缓存路由组件两个新的生命周期钩子路由守卫1、路由元信息2、…

带纽扣电池产品出口澳洲安全标准,纽扣电池IEC 60086认证

澳大利亚政府公布了《消费品&#xff08;纽扣/硬币电池&#xff09;安全标准》和《消费品&#xff08;纽扣/硬币电池&#xff09;信息标准》。届时出口纽扣/硬币电池以及含有纽扣/硬币电池产品到澳大利亚的供应商&#xff0c;必须遵守这些标准中的要求。 一、 安全标准及信息标…

实力征服每寸版图|昂首资本Anzo Capital狂揽“年度最佳经纪商“和“最佳青年导师”双料大奖

棉兰老岛交易者博览会在Tibungco 的 RTC-KorPhil 职业培训中心多功能厅举办。在本次博览会上&#xff0c;Anzo Capital 昂首资本脱颖而出斩获“2023年度最佳经纪商”&#xff0c;Anzo Capital 官方金融教育专家Joseph Lejarde斩获“最佳青年导师”双料大奖。 棉兰老岛交易者…

解决Apache Tomcat “Request header is too large“ 异常 ‍

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

有什么好用的后勤报修管理软件?如何让维修管理更灵活高效?

后勤报修管理是利用现代科技手段和人工智能技术&#xff0c;对后勤报修流程进行数字化管理的一种新型管理模式。它不仅可以提高报修效率、降低报修成本&#xff0c;还可以提升维修服务质量&#xff0c;是现代企业维修管理的必备工具。后勤报修管理的功能主要包括记录报修信息、…

Spring Security 超详细整合 JWT,能否拿下看你自己!

文章目录 1.JWT 入门1.1 JWT 概念1.2 JWT 应用场景1.3 为何选择 JWT基于 Session 的传统认证基于 JWT 的认证 1.4 JWT 的结构标头&#xff08;Header&#xff09;载荷&#xff08;Payload&#xff09;签名&#xff08;Signature&#xff09; 1.5 RBAC (Role-Based Access Contr…

MinIO在Ubuntu上的搭建步骤

在Ubuntu上搭建MinIO可以按照以下步骤进行&#xff1a; 下载MinIO服务器二进制文件&#xff1a; 通过浏览器访问 https://min.io/download 或使用以下命令获取最新的MinIO二进制文件&#xff1a;wget https://dl.min.io/server/minio/release/linux-amd64/minio赋予二进制文件…

打破数据孤岛,实现文档数据互通

随着数字经济加速发展&#xff0c;企业数字化转型正向更深层次推进。非结构化数据量也正在飞速增长&#xff0c;这些数据以文档、图片、音频等形式散落在组织内部&#xff0c;这给数据的整理和统一利用增加了难度。由于部门、应用、框架、多云环境等原因形成非结构化数据孤岛。…