以下是完整的開發流程，包括環境搭建、代碼實現和應用發布，幫助你開發一個具有地圖顯示、TCP 通信功能的 Android 應用。

一、環境搭建

1.?安裝 Flutter SDK

• 從?Flutter 官網?下載最新穩定版 SDK
• 解壓到本地目錄（如?D:\flutter）
• 添加環境變量：
  • FLUTTER_ROOT = D:\flutter
  • 在?PATH?中添加?%FLUTTER_ROOT%\bin

2.?安裝 Android Studio

• 從?官網?下載并安裝 Android Studio
• 安裝過程中選擇安裝?Android SDK、Android SDK Command-line Tools?和?Android Virtual Device

3.?配置 Android SDK

• 打開 Android Studio → SDK Manager
• 安裝?Android 11 (R)?或更高版本
• 安裝?Google Play services?和?Google Maps Android API

4.?安裝 Flutter 和 Dart 插件

• 在 Android Studio 中，打開?File → Settings → Plugins
• 搜索并安裝?Flutter?和?Dart?插件
• 重啟 Android Studio

5.?驗證環境配置

bash

flutter doctor

根據提示安裝缺失的依賴（如 Android SDK 命令行工具、啟用 USB 調試等）

二、創建 Flutter 項目

bash

flutter create map_tcp_app
cd map_tcp_app

三、添加依賴

在?pubspec.yaml?中添加以下依賴：

yaml

dependencies:flutter:sdk: fluttergoogle_maps_flutter: ^2.4.0      # 地圖組件location: ^5.0.4                 # 位置服務permission_handler: ^10.4.3      # 權限管理tcp_socket_connection: ^1.0.3    # TCP通信provider: ^6.0.5                 # 狀態管理fluttertoast: ^8.2.2             # 消息提示

運行?flutter pub get?安裝依賴。

四、配置 AndroidManifest.xml

在?android/app/src/main/AndroidManifest.xml?中添加：

xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"><!-- 添加權限 --><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><applicationandroid:label="map_tcp_app"android:icon="@mipmap/ic_launcher"><!-- 添加 Google Maps API 密鑰 --><meta-dataandroid:name="com.google.android.geo.API_KEY"android:value="YOUR_GOOGLE_MAPS_API_KEY"/><activityandroid:name=".MainActivity"android:launchMode="singleTop"android:theme="@style/LaunchTheme"android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"android:hardwareAccelerated="true"android:windowSoftInputMode="adjustResize"><!-- 確保應用可以處理深層鏈接 --><intent-filter><action android:name="android.intent.action.MAIN"/><category android:name="android.intent.category.LAUNCHER"/></intent-filter></activity></application>
</manifest>

注意：需要替換?YOUR_GOOGLE_MAPS_API_KEY?為你在?Google Cloud Console?獲取的 API 密鑰。

五、實現地圖與 TCP 通信功能

1.?狀態管理（Provider）

創建?lib/providers/connection_provider.dart：

dart

import 'package:flutter/material.dart';
import 'package:tcp_socket_connection/tcp_socket_connection.dart';class ConnectionProvider with ChangeNotifier {late TcpSocketConnection _socket;bool _isConnected = false;String _serverMessage = '';String _serverIP = '15.113.126.155';int _serverPort = 5001;ConnectionProvider() {_initSocket();}void _initSocket() {_socket = TcpSocketConnection(_serverIP, _serverPort);_socket.connect().then((status) {_isConnected = status;if (status) {_serverMessage = '已連接到服務器';_startListening();} else {_serverMessage = '連接失敗';}notifyListeners();});}void _startListening() {_socket.onMessageReceived((data) {_serverMessage = '服務器: $data';notifyListeners();});}void sendMessage(String message) {if (_isConnected) {_socket.sendMessage(message);}}void disconnect() {if (_isConnected) {_socket.disconnect();_isConnected = false;_serverMessage = '已斷開連接';notifyListeners();}}void reconnect(String ip, int port) {_serverIP = ip;_serverPort = port;disconnect();_initSocket();}bool get isConnected => _isConnected;String get serverMessage => _serverMessage;String get serverIP => _serverIP;int get serverPort => _serverPort;
}

2.?主頁面實現

修改?lib/main.dart：

dart

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:provider/provider.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'providers/connection_provider.dart';void main() {runApp(MultiProvider(providers: [ChangeNotifierProvider(create: (_) => ConnectionProvider()),],child: const MyApp(),),);
}

六、自定義協議實現

在?lib/utils/protocol.dart?中添加：

import 'dart:convert';
import 'dart:typed_data';class Protocol {// 協議頭標識static const int headerFlag = 0x55AA;// 構建消息包static Uint8List buildMessage(String content) {final contentBytes = utf8.encode(content);final buffer = ByteData(8 + contentBytes.length);// 設置協議頭標識buffer.setUint16(0, headerFlag, Endian.big);// 設置消息長度buffer.setUint32(2, contentBytes.length, Endian.big);// 設置消息類型 (1: 文本消息)buffer.setUint16(6, 1, Endian.big);// 設置消息內容for (int i = 0; i < contentBytes.length; i++) {buffer.setUint8(8 + i, contentBytes[i]);}return buffer.buffer.asUint8List();}// 解析消息包static String? parseMessage(Uint8List data) {if (data.length < 8) return null;final buffer = ByteData.view(data.buffer);// 驗證協議頭final flag = buffer.getUint16(0, Endian.big);if (flag != headerFlag) return null;// 獲取消息長度final length = buffer.getUint32(2, Endian.big);// 驗證數據長度if (data.length < 8 + length) return null;// 獲取消息內容final contentBytes = data.sublist(8, 8 + length);return utf8.decode(contentBytes);}
}

更新?ConnectionProvider?中的消息處理：

dart

// 在 ConnectionProvider 類中更新
void _startListening() {_socket.onMessageReceived((data) {final message = Protocol.parseMessage(Uint8List.fromList(data.codeUnits)) ?? data;_serverMessage = '服務器: $message';notifyListeners();});
}void sendMessage(String message) {if (_isConnected) {final packet = Protocol.buildMessage(message);_socket.sendMessage(String.fromCharCodes(packet));}
}

七、編譯與發布

1.?調試運行

bash

flutter run

2.?生成 Android APK

bash

flutter build apk --release

APK 文件將生成在?build/app/outputs/apk/release/app-release.apk

3.?生成 App Bundle（推薦）

bash

flutter build appbundle --release

App Bundle 文件將生成在?build/app/outputs/bundle/release/app-release.aab，可上傳至 Google Play 商店。

八、應用優化建議

1. 錯誤處理

   • 添加網絡異常捕獲和重連機制
   • 實現超時處理（如連接超時、發送超時）

2. UI 優化

   • 添加加載狀態指示器
   • 優化地圖標記樣式和信息窗口

3. 性能優化

   • 使用?ListView.builder?優化消息顯示
   • 實現消息緩存機制，避免頻繁刷新

4. 安全性

   • 考慮使用 TLS 加密 TCP 通信
   • 實現消息校驗和認證機制

通過以上步驟，你可以在 Windows 平臺使用 Android Studio 和 Flutter 開發一個完整的 Android 應用，實現地圖顯示、TCP 通信和自定義協議功能。