Flutter导航管理插件galli_navigation的使用

Flutter导航管理插件galli_navigation的使用

galli_navigation 是一个Flutter插件,它通过添加导航功能扩展了Galli Vector插件。该插件允许你使用来自Galli Maps的矢量地图进行导航,并提供了路线计算和逐段导航等功能。

功能

  • 逐段导航
  • 多种方法(步行/驾驶/骑行)的路线计算
  • 实时导航更新

安装

pubspec.yaml 文件中添加 galli_navigation

dependencies:
  galli_navigation: latest

然后运行 flutter pub get 来安装新的依赖项。

使用

在Dart代码中导入插件:

import 'package:galli_navigation/galli_navigation.dart';

基本示例

以下是一个简单的使用 galli_navigation 插件的示例:

初始化galli_methods

/// 初始化galli_methods
GalliMethods methods = GalliMethods("authToken");

使用经纬度进行导航

/// 设置起点和终点
LatLng source = LatLng(latitude, longitude);
LatLng destination = LatLng(latitude, longitude);

/// 使用经纬度进行导航
methods.navigateWithLatLng(
  context: context,
  source: source,
  destination: destination,
  method: RoutingMethods.driving,
);

使用导航数据进行导航

/// 获取导航数据
var navJson = await methods.getNavigationData(
  source: source,
  destination: destination,
  method: RoutingMethods.walking,
);

/// 解析导航数据
NavigationModel navData = NavigationModel.fromJson(navJson["routes"].first);

/// 使用解析后的导航数据进行导航
methods.navigate(
  context: context,
  navData: navData,
  method: RoutingMethods.driving,
);

完整示例代码

以下是在 example/lib/main.dart 中的完整示例代码:

import 'package:example/choose_end.dart';
import 'package:example/choose_start.dart';
import 'package:flutter/material.dart';
import 'package:galli_navigation/galli_navigation.dart';
import 'package:galli_vector_plugin/galli_vector_plugin.dart';
import 'package:get/route_manager.dart';

void main() async {
  runApp(const MyApp());
}

LatLng? start;
LatLng? end;

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ChooseStart(),
    );
  }
}

class Navigate extends StatefulWidget {
  const Navigate({super.key});

  [@override](/user/override)
  State<Navigate> createState() => _NavigateState();
}

class _NavigateState extends State<Navigate> {
  final TextEditingController _source = TextEditingController(text: "${start!.latitude}, ${start!.longitude}");
  final TextEditingController _destination = TextEditingController(text: "${end!.latitude}, ${end!.longitude}");

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.width,
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                InkWell(
                  onTap: () {
                    Get.offAll(() => ChooseStart());
                  },
                  child: TextField(
                    enabled: false,
                    controller: _source,
                    decoration: InputDecoration(
                      border: const OutlineInputBorder(),
                      labelText: "SOURCE LATLNG",
                      hintText: "${start!.latitude}, ${start!.longitude}",
                    ),
                  ),
                ),
                const SizedBox(height: 32),
                InkWell(
                  onTap: () {
                    Get.offAll(() => const ChooseEnd());
                  },
                  child: TextField(
                    enabled: false,
                    controller: _destination,
                    decoration: InputDecoration(
                      border: const OutlineInputBorder(),
                      labelText: "DESTINATION LATLNG",
                      hintText: "${end!.latitude}, ${end!.longitude}",
                    ),
                  ),
                ),
                const SizedBox(height: 48),
                ElevatedButton(
                  onPressed: () async {
                    GalliMethods methods = GalliMethods("auth_token");

                    List sourceList = _source.text.split(",");
                    List destinationList = _destination.text.split(",");
                    LatLng source = LatLng(
                        double.parse(sourceList[0]), double.parse(sourceList[1]));
                    LatLng destination = LatLng(double.parse(destinationList[0]), double.parse(destinationList[1]));

                    /// 使用经纬度进行导航
                    methods.navigateWithLatLng(
                      context: context,
                      source: source,
                      destination: destination,
                      method: RoutingMethods.driving,
                    );

                    /// 使用导航数据进行导航
                    // var navJson = await methods.getNavigationData(
                    //     source: source,
                    //     destination: destination,
                    //     method: RoutingMethods.walking);
                    // NavigationModel navData = NavigationModel.fromJson(navJson["routes"].first);
                    // methods.navigate(
                    //     context: context,
                    //     navData: navData,
                    //     method: RoutingMethods.driving);
                  },
                  style: ButtonStyle(
                    elevation: MaterialStateProperty.all(8),
                    animationDuration: const Duration(milliseconds: 500),
                    enableFeedback: true,
                  ),
                  child: const Text("NAVIAGATE"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter导航管理插件galli_navigation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter导航管理插件galli_navigation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


galli_navigation 是一个用于 Flutter 应用的导航管理插件,旨在简化页面导航和状态管理。它提供了一种灵活且高效的方式来处理页面间的跳转、参数传递和返回结果等操作。下面将介绍如何使用 galli_navigation 进行基本的导航操作。

1. 安装 galli_navigation

首先,你需要在 pubspec.yaml 文件中添加 galli_navigation 依赖:

dependencies:
  flutter:
    sdk: flutter
  galli_navigation: ^1.0.0 # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 基本用法

2.1 初始化导航管理器

在你的应用的入口文件(通常是 main.dart)中,初始化 GalliNavigation

import 'package:flutter/material.dart';
import 'package:galli_navigation/galli_navigation.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Galli Navigation Demo',
      navigatorKey: GalliNavigation.instance.navigatorKey,
      onGenerateRoute: GalliNavigation.instance.onGenerateRoute,
      initialRoute: '/',
      home: HomePage(),
    );
  }
}

2.2 定义路由

你可以使用 GalliNavigation 来定义页面路由。例如,定义两个页面 HomePageDetailPage

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            GalliNavigation.instance.pushNamed('/detail', arguments: {'id': 123});
          },
          child: Text('Go to Detail Page'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final int id;

  DetailPage({required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: Center(
        child: Text('Detail ID: $id'),
      ),
    );
  }
}

2.3 注册路由

main.dart 中注册路由:

void main() {
  GalliNavigation.instance.registerRoutes({
    '/': (context) => HomePage(),
    '/detail': (context) {
      final arguments = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
      return DetailPage(id: arguments['id']);
    },
  });

  runApp(MyApp());
}

2.4 导航操作

GalliNavigation 提供了一系列导航操作方法,以下是一些常用的操作:

  • pushNamed: 跳转到指定路由页面,并传递参数。

    GalliNavigation.instance.pushNamed('/detail', arguments: {'id': 123});
    
  • pop: 返回上一页。

    GalliNavigation.instance.pop();
    
  • popUntil: 返回到指定路由页面。

    GalliNavigation.instance.popUntil('/home');
    
  • pushReplacementNamed: 替换当前页面为指定路由页面。

    GalliNavigation.instance.pushReplacementNamed('/detail', arguments: {'id': 456});
    
  • pushNamedAndRemoveUntil: 跳转到指定路由页面,并移除之前的所有页面。

    GalliNavigation.instance.pushNamedAndRemoveUntil('/home', (route) => false);
    

3. 处理返回结果

你可以使用 pushNamedForResult 方法跳转页面,并在返回时获取结果:

GalliNavigation.instance.pushNamedForResult('/detail', arguments: {'id': 123}).then((result) {
  print('Returned result: $result');
});

DetailPage 中,你可以通过 GalliNavigation.instance.popWithResult 返回结果:

GalliNavigation.instance.popWithResult({'status': 'success'});
回到顶部