Flutter + Native混合栈仿饿了么APP

3,369 阅读1分钟

前言

一个基于Flutter + Native混合开发的APP,请求数据均人为制造。

目前仅上传Android版本,iOS暂未上传
APK下载

Github地址

效果图:

实现功能:

  • 首页
    使用百度定位SDK获取用户位置信息;搜索功能基于百度语音SDK实现语音识别;骑手送餐界面基于百度地图SDK展示骑手和商铺覆盖物;
  • 发现
    使用瀑布流开源框架实现发现页面瀑布流效果
  • 订单
    展示用户历史订单列表,长按可删除订单
  • 我的
    使用Channel调用Native方法实现的用户更换头像功能(调用系统相册、系统相机、系统裁剪)
  • 其他功能
    网络请求失败重试;自定义Banner广告轮播器;点餐界面计数器位移旋转组合动画;自定义商铺详情界面门店介绍展开收缩控件

框架依赖

Flutter端

# 图片缓存框架
cached_network_image: ^2.0.0
# 浏览器框架
webview_flutter: ^0.3.19+9
# 瀑布流框架
flutter_staggered_grid_view: ^0.3.0
# 网络请求框架
dio: ^3.0.0
# 阿里混合栈框架
flutter_boost:
git:
  url: 'https://github.com/alibaba/flutter_boost.git'
  ref: '1.12.13'

Android端

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    // Android Flutter 混编步骤三
    implementation project(':flutter')
    // 依赖阿里混合栈框架
    implementation project(':flutter_boost')
}