Flutterbase出租车

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

App Demo Images

点击打开在线Web演示

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

安装说明

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

git clone https://github.com/dandytopstar/taxiApp-Flutter.git
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 小部件和标准的 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上联系我？

GitHub

查看 Github