Flutterbase出租车

各种应用都依赖于地图服务。这个项目的目的是测试Google地图服务与Flutter在Android、iOS和Web平台上的连接。以下是我的成果

App Demo Images

点击打开在线Web演示

真实出租车应用

真实的打车应用需要开发可扩展的服务器/云端存储和逻辑、身份验证、支付、更复杂的流程/状态管理、自动化测试和部署等。这只是一个概念验证——这个原型源码并未用于生产代码。

安装说明

克隆flutterbase taxi应用程序源代码仓库

git clone https://github.com/YakivGalkin/flutterbase-taxi
cd flutterbase-taxi

安装Flutter依赖

flutter pub get

Web

创建Google Cloud API密钥并启用以下API

  • Maps Javascript API
  • Places API
  • Directions API
  • Geocoding API

在以下文件中将FLUTTERBASETAXI_API_KEY文本占位符替换为您的Google API密钥

  • lib/api/google_api.dart
  • web/index.html

由于CORS规则冲突，Google Places API和Directions API不能在浏览器中使用。作为一种变通方法，我部署了一个在Google Cloud中运行的简单CORS代理服务器。该服务器的路径存储在“lib/api/google_api.dart”文件中声明的“prodApiProxy”变量中。

Android & iOS

在/ios/*和/android/*项目文件夹中将FLUTTERBASETAXI_API_KEY文本占位符替换为您的Google API密钥，请确保启用了以下API

  • 适用于Android的Maps SDK
  • 适用于iOS的Maps SDK
  • Places API
  • Directions API
  • Geocoding API

应用程序结构

我喜欢Flutter的原因是它响应式UI的优美。一旦你正确地设计了应用程序状态，你就可以以接近光速的速度设计UI。总的来说，从零开始完成这个项目只花了几天时间。

在Flutter中保持应用程序状态的推荐方式是Provider模式。一旦在Figma中定义了关键应用程序屏幕，响应式应用程序状态结构就变得显而易见了。

Application Provider's overview

在状态设计定稿后，我非常愉快地用Dart语言进行了编码?

源代码文档

应用程序结构相当直接，包括：应用程序状态的Provider、Google REST API的简单包装器、Flutter GoogleMap widget以及标准的Material UI。就是这些。源代码是自解释的，请参考Flutter标准文档。所有组件都得到了Flutter社区的良好文档支持。

整个UI工作流程仅包含在“main.dart”文件中的几行代码

// Get Current Location Provider
final locProvider = LocationProvider.of(context); 

// Get Current Trip Provider
final currentTrip = TripProvider.of(context);     

// if Current location is not known
if (!locProvider.isDemoLocationFixed)             
  // show Location Selection screen     
  return LocationScaffold();                      

// else if there is an Active Trip
if (currentTrip.isActive) {       
  // and if this trip is finished
  return tripIsFinished(currentTrip.activeTrip!.status)
      // show Rate the Trip screen 
      ? tripFinishedScaffold(context)
     // if not finished - show the trip in progress screen     
     : ActiveTrip();
}

// else if there is no active trip - display UI for new trip creation
return NewTrip();

进一步开发的几个提示

以下是一些如果您决定继续发展可能会有帮助的提示

确保您能在服务器端高效地处理GEO查询。Google Firestore需要一些变通方法才能正确使用。

大多数支付网关都需要在本地银行Web UI上进行用户授权。测试您是否可以将其与Flutter WebView或Flutter深度链接回调集成。

感谢

我要感谢整个Flutter团队及其社区为开发者构建了如此出色的技术。我非常喜欢使用Flutter和Dart。

保持联系

Flutter爱好者们，欢迎通过LinkedIn与我联系，或发邮件给我：[email protected]

GitHub

查看 Github