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
更多关于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
来定义页面路由。例如,定义两个页面 HomePage
和 DetailPage
:
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'});