Flutter小功能实现-咖啡店

这篇具有很好参考价值的文章主要介绍了Flutter小功能实现-咖啡店。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1 导航栏实现

效果图:

Flutter小功能实现-咖啡店,flutter,前端 

 

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 商品列表实现

Flutter小功能实现-咖啡店,flutter,前端

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文章来源地址https://www.toymoban.com/news/detail-692283.html

到了这里,关于Flutter小功能实现-咖啡店的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在Flutter应用内部实现分屏功能

    这一次被要求实现屏幕上同时展示两个页面,并且两个页面的逻辑,功能互不影响,通俗一点讲就是在Flutter内部实现一个类似于分屏的功能,这可难不倒我。 要在 Flutter 中实现一个屏幕的上半部分和下半部分展示不同的页面(我这里是左右两部分),并且两个页面的逻辑互

    2024年02月11日
    浏览(41)
  • flutter开发实战-实现首页分类目录入口切换功能

    。 在开发中经常遇到首页的分类入口,如美团的美食团购、打车等入口,左右切换还可以分页更多展示。 在pubspec.yaml引入 由于我这里按照一页8条展示,两行四列展示格式。 当列表list传入的控件时候,一共的页数为 通过列表,一页数量计算每一页应该展示多少个按钮。 一

    2024年02月14日
    浏览(56)
  • flutter开发实战-RepaintBoundary实现Widget截图功能

    flutter开发实战-RepaintBoundary实现Widget截图功能 在开发中,遇到需要使用截图,像iOS可以截图UIView获取到UIImage,在flutter中可以使用RepaintBoundary实现截图功能 相机拍摄的图片: RepaintBoundary截图后的图片 RepaintBoundary是绘制边界。 如果CustomPaint有子节点,为了避免子节点不必要的

    2024年02月15日
    浏览(45)
  • flutter开发实战-实现推送功能Push Notification

    flutter开发实战-实现推送功能Push Notification 推送服务现在可以说是所有 App 的标配了,最近在Flutter工程项目上实现推送功能。flutter上实现推送功能需要依赖原生的功能,需要插件实现,这里使用的是极光推送的服务。 效果图如下 在使用极光推送功能时,需要使用的是极光提

    2024年02月16日
    浏览(45)
  • Flutter Bloc和StreamController结合实现登录功能

    本篇博文通过Flutter Bloc自己提供的登录demo来分析Bloc的用法(源码点此),虽然只是个小小的登录demo,但是麻雀虽小,五脏俱全。通过该demo,你可以了解到: 1、Dart yield yield*的用法 2、Flutter StreamController的作用 3、StreamController和Bloc之间的通信(博主认

    2024年02月12日
    浏览(43)
  • flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能

    flutter聊天界面-TextField输入框buildTextSpan实现@功能展示高亮功能 最近有位朋友讨论的时候,提到了输入框的高亮展示。在flutter TextField中需要插入特殊样式的标签,比如:“请 @张三 回答一下”,这一串字符在TextField中输入,当输入@时 弹出好友列表选择,然后将 “@张三”高

    2024年02月07日
    浏览(51)
  • flutter开发实战-Camera自定义相机拍照功能实现

    flutter开发实战-Camera自定义相机拍照功能实现 在项目中使用image_picker插件时候,在android设备上使用无法默认设置前置摄像头(暂时不清楚什么原因),由于项目默认需要使用前置摄像头,所以最终采用自定义相机实现拍照功能。 在工程的iOS的info.plist文件中添加相机、麦克风

    2024年02月21日
    浏览(56)
  • Flutter框架实现登录注册功能,不连接数据库

    要在Flutter框架中实现登录和注册功能,而不连接数据库,可以使用本地存储来存储用户信息。以下是一个简单的示例,演示如何使用本地存储来实现登录和注册功能。 首先,我们需要添加 shared_preferences 插件到 pubspec.yaml 文件中: 然后,在 lib 文件夹中创建一个新的文件夹

    2024年02月08日
    浏览(42)
  • flutter实现调用原生安卓的高德地图导航功能(插件化)

    查看了高德地图flutter插件的文档,都没有能支持导航的功能,并且flutter的高德插件支持的功能特别少,没办法,只能使用安卓原生的导航,flutter去调用了,具体实现方式如下: 创建 Flutter 插件 使用--template=plugin 声明创建的是同时包含了 iOS 和 Android 代码的 plugin; 使用--o

    2024年02月16日
    浏览(51)
  • Flutter 之Bloc入门指南实现倒计时功能

    使用Bloc开发Flutter的项目,其项目结构都很简单明确,需要创建状态,创建事件,创建bloc,创建对应的View。flutter_timer项目来分析下Bloc的使用方法。 通过这篇博客,你

    2024年02月14日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包