基于 Flutter+Dart 聊天实例 | Flutter 仿微信界面聊天室

1、项目介绍

Flutter是目前比较流行的跨平台开发技术,凭借其出色的性能获得很多前端技术爱好者的关注,比如阿里闲鱼美团腾讯等大公司都有投入相关案例生产使用。
flutter_chatroom项目是基于Flutter+Dart+chewie+photo_view+image_picker等技术开发的跨平台仿微信app聊天界面应用,实现了消息/表情发送、图片预览、长按菜单、红包/小视频/朋友圈等功能。
022360截图20200512003659242.png

2、技术框架

  • 使用技术:Flutter 1.12.13/Dart 2.7.0
  • 视频组件:chewie: ^0.9.7
  • 图片/拍照:image_picker: ^0.6.6+1
  • 图片预览组件:photo_view: ^0.9.2
  • 弹窗组件:showModalBottomSheet/AlertDialog/SnackBar
  • 本地存储:shared_preferences: ^0.5.7+1
  • 字体图标:阿里iconfont字体图标库

001360截图20200512002407906.png

003360截图20200512002631530.png

004360截图20200512002755155.png

005360截图20200512002840849.png

007360截图20200512002934978.png

008360截图20200512003004490.png

009360截图20200512003023266.png

011360截图20200512003108139.png

014360截图20200512003208370.png

016360截图20200512003322336.png

  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实验目的: 1. 掌握Flutter应用程序开发的基本流程和技巧。 2. 熟悉FlutterDart语言的基本语法和应用。 3. 了解Flutter的UI组件和布局,以及它们在应用程序中的实际应用。 4. 学习如何使用FlutterDart来调用摄像头和文件系统API,实现拍照功能。 5. 学习如何使用FlutterDart来处理图像数据,以及如何在应用程序中显示和保存图像。 实验内容: 本次实验的主要内容是使用FlutterDart语言开发一个拍照应用程序,程序的主要功能包括: 1. 调用摄像头API,实现拍照功能。 2. 显示拍摄的照片,并支持手势缩放和旋转。 3. 保存拍摄的照片到本地文件系统中。 以下是实验的具体步骤: 1. 创建一个新的Flutter项目,使用Flutter提供的UI组件和布局来实现应用程序的UI设计。 2. 在应用程序中添加一个按钮,用于触发拍照功能。 3. 在应用程序中调用摄像头API,实现拍照功能,并将拍摄的照片数据保存到内存中。 4. 在应用程序中显示拍摄的照片,并支持手势缩放和旋转。您可以使用Flutter提供的GestureDetector和Transform组件来实现这些功能。 5. 在应用程序中将拍摄的照片保存到本地文件系统中。您可以使用Flutter提供的dart:io库来实现这个功能。 在完成上述步骤后,您可以在模拟器或实际设备上运行应用程序,并测试它的功能。如果需要,您还可以对应用程序进行进一步的优化和改进。 总之,本次实验将帮助您掌握FlutterDart语言的基本知识和技巧,以及如何使用它们来开发实际应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值