Flutter导航多交通工具切换教程 支持不同出行方式

在Flutter中实现多交通工具导航切换时遇到几个问题：

  1. 如何动态切换不同出行方式（步行、驾车、公交）的地图路径显示？
  2. 不同交通方式的路径数据来源不同（比如高德步行API和驾车API），该怎么统一处理接口差异？
  3. 切换交通工具时路线重新计算会导致卡顿，有没有性能优化的建议？
  4. 需要自定义每种交通工具的图标和路线颜色，求推荐高效的实现方案。
  5. 在离线模式下如何缓存不同交通工具的路径数据？

当前用google_maps_flutter插件，但发现公交路线绘制特别慢，有没有更好的第三方库或解决方案？

3 回复

以下是一个简单的Flutter多交通工具切换导航教程：

  1. 依赖引入：添加provider和flutter_map到pubspec.yaml。
dependencies:
  flutter_map: ^3.0.0
  provider: ^6.0.0
  1. 创建数据模型：定义交通方式类。
class TransportMode {
  final String name;
  final IconData icon;

  TransportMode(this.name, this.icon);
}
  1. 状态管理：使用Provider管理选中模式。
class TransportProvider with ChangeNotifier {
  TransportMode _selectedMode = transportModes.first;

  TransportMode get selectedMode => _selectedMode;

  void setSelectedMode(TransportMode mode) {
    _selectedMode = mode;
    notifyListeners();
  }
}
  1. UI实现：构建模式选择和地图显示。
class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => TransportProvider(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('多交通工具导航'),
          actions: [
            PopupMenuButton<TransportMode>(
              onSelected: (mode) {
                Provider.of<TransportProvider>(context, listen: false)
                    .setSelectedMode(mode);
              },
              itemBuilder: (_) => transportModes.map(buildMenuItem).toList(),
            ),
          ],
        ),
        body: FlutterMap(
          options: MapOptions(center: LatLng(51.5, -0.09)),
          layers: [
            TileLayerOptions(
                urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"),
          ],
        ),
      ),
    );
  }

  PopupMenuItem<TransportMode> buildMenuItem(TransportMode mode) =>
      PopupMenuItem(child: Row(children: [Icon(mode.icon), SizedBox(width: 8), Text(mode.name)]), value: mode);
}
  1. 运行效果：用户可以通过弹出菜单切换交通方式，地图动态更新显示。

以上是基本的多交通工具切换功能实现。

更多关于Flutter导航多交通工具切换教程 支持不同出行方式的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


作为一个屌丝程序员，教你实现Flutter的多交通工具切换功能：

  1. 使用Stack叠加多个地图组件，每个代表一种交通方式（步行、骑行、驾车）。
  2. 为每种交通方式创建单独的路由或页面（如WalkRoutePage, DriveRoutePage）。
  3. 使用IndexedStack配合状态管理（如Provider），切换时保存当前选中的交通方式索引。
  4. 在地图上绘制路径时，通过调用API（如高德、百度地图SDK）获取对应方式的路线数据。
  5. 添加底部切换按钮，绑定点击事件更新状态并刷新地图显示。

示例代码：

class TransportSwitchPage extends StatefulWidget {
  @override
  _TransportSwitchPageState createState() => _TransportSwitchPageState();
}

class _TransportSwitchPageState extends State<TransportSwitchPage> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(index: _selectedIndex, children: [
        WalkRoutePage(),
        RideRoutePage(),
        DriveRoutePage(),
      ]),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.directions_walk), label: "步行"),
          BottomNavigationBarItem(icon: Icon(Icons.directions_bike), label: "骑行"),
          BottomNavigationBarItem(icon: Icon(Icons.directions_car), label: "驾车"),
        ],
      ),
    );
  }
}

这样就能轻松实现多交通方式的无缝切换了。

Flutter多交通工具导航切换实现

在Flutter中实现多交通工具导航切换功能，可以使用Google Maps API或其他地图服务提供商的SDK。以下是基本实现思路：

核心实现步骤

  1. 添加地图依赖
dependencies:
  google_maps_flutter: ^2.2.5
  flutter_polyline_points: ^1.0.0
  1. 基本实现代码框架
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class NavigationPage extends StatefulWidget {
  @override
  _NavigationPageState createState() => _NavigationPageState();
}

class _NavigationPageState extends State<NavigationPage> {
  GoogleMapController? mapController;
  Set<Polyline> _polylines = {};
  TravelMode _selectedMode = TravelMode.driving;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('多交通工具导航')),
      body: Column(
        children: [
          Expanded(
            child: GoogleMap(
              onMapCreated: (controller) => mapController = controller,
              initialCameraPosition: CameraPosition(
                target: LatLng(37.42796133580664, -122.085749655962),
                zoom: 14,
              ),
              polylines: _polylines,
            ),
          ),
          _buildTransportSelector(),
        ],
      ),
    );
  }

  Widget _buildTransportSelector() {
    return Container(
      padding: EdgeInsets.all(8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildTransportButton(Icons.directions_car, '驾车', TravelMode.driving),
          _buildTransportButton(Icons.directions_bus, '公交', TravelMode.transit),
          _buildTransportButton(Icons.directions_walk, '步行', TravelMode.walking),
          _buildTransportButton(Icons.directions_bike, '骑行', TravelMode.bicycling),
        ],
      ),
    );
  }
  
  Widget _buildTransportButton(IconData icon, String label, TravelMode mode) {
    return GestureDetector(
      onTap: () => _updateRoute(mode),
      child: Column(
        children: [
          Icon(icon, color: _selectedMode == mode ? Colors.blue : Colors.grey),
          Text(label),
        ],
      ),
    );
  }
  
  void _updateRoute(TravelMode mode) {
    setState(() {
      _selectedMode = mode;
      // 这里调用API获取路线并更新_polylines
    });
  }
}

注意要点

  1. 需要申请Google Maps API Key并在AndroidManifest.xml和Info.plist中配置
  2. 实际导航路线需要调用Directions API获取
  3. 不同交通工具的路线计算需要服务器端支持
  4. 可以通过Polyline点集绘制不同颜色的路线来表示不同交通工具

建议使用google_maps_flutter配套的google_maps_directions插件来简化路线请求和解析过程。

回到顶部