Flutter/Dart中如何复用GPS定位的lat和long变量？

你当前通过悬浮按钮获取GPS定位的功能正常，但lat和long是setState内的局部变量，导致同一页面其他函数、组件或跨页面无法复用，直接调用会出现空值问题。以下是几种实用的解决方式：

1. 同一页面内复用：将经纬度设为类成员变量 #

把lat和long从setState的局部变量提升为页面类的成员变量，这样同一页面的所有函数都能直接访问：

// 在页面类中定义成员变量
String? _lat;
String? _long;
Position? _position;

void _getCurrentLocation() async {
  Position position = await _determinePosition();
  setState(() {
    _position = position;
    // 赋值给成员变量
    _lat = position.latitude.toString();
    _long = position.longitude.toString();
    print("New Lat: $_lat");
    print("New Long: $_long");
  });
}

// 同一页面的其他函数直接使用
Future<void> _sendPostRequest() async {
  // 先判断变量是否为空，避免报错
  if (_lat == null || _long == null) {
    print("请先获取定位信息");
    return;
  }
  try {
    var response = await http.post(
      Uri.parse("https://www.sample.com/sample.php"),
      body: {
        "latitude": _lat!,
        "longitude": _long!,
      },
    );
    print(response.body);
  } catch (e) {
    print(e);
  }
}

2. 跨页面/跨组件复用：使用状态管理工具 #

如果需要在多个页面或组件间共享经纬度，推荐用状态管理工具（比如Provider、GetX），以Provider为例：

步骤1：创建定位状态类 #

import 'package:flutter/material.dart';

class LocationProvider extends ChangeNotifier {
  String? _lat;
  String? _long;

  // 提供外部访问的getter
  String? get lat => _lat;
  String? get long => _long;

  // 更新经纬度并通知监听组件
  void updateLocation(String lat, String long) {
    _lat = lat;
    _long = long;
    notifyListeners();
  }
}

步骤2：在全局注册Provider #

在main.dart中注册，让所有页面都能访问：

import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => LocationProvider(),
      child: const MyApp(),
    ),
  );
}

步骤3：在定位页面更新状态 #

void _getCurrentLocation() async {
  Position position = await _determinePosition();
  String lat = position.latitude.toString();
  String long = position.longitude.toString();
  
  // 获取Provider实例并更新状态
  final locationProvider = Provider.of<LocationProvider>(context, listen: false);
  locationProvider.updateLocation(lat, long);

  setState(() {
    _position = position;
    print("New Lat: $lat");
    print("New Long: $long");
  });
}

步骤4：在其他页面/组件获取经纬度 #

Future<void> _sendPostRequest(BuildContext context) async {
  final locationProvider = Provider.of<LocationProvider>(context, listen: false);
  if (locationProvider.lat == null || locationProvider.long == null) {
    print("请先获取定位信息");
    return;
  }
  try {
    var response = await http.post(
      Uri.parse("https://www.sample.com/sample.php"),
      body: {
        "latitude": locationProvider.lat!,
        "longitude": locationProvider.long!,
      },
    );
    print(response.body);
  } catch (e) {
    print(e);
  }
}

3. 页面跳转时一次性传递：使用路由参数 #

如果只是在跳转到特定页面时传递经纬度，可以通过路由参数实现：

跳转时传递参数 #

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => TargetPage(),
    settings: RouteSettings(
      arguments: {"lat": _lat, "long": _long},
    ),
  ),
);

目标页面接收参数 #

class TargetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 接收路由参数
    final args = ModalRoute.of(context)?.settings.arguments as Map<String, String?>;
    String? lat = args["lat"];
    String? long = args["long"];

    // 后续使用lat和long发送请求
    return Scaffold(
      appBar: AppBar(title: const Text("目标页面")),
      body: Center(child: Text("纬度：$lat，经度：$long")),
    );
  }
}

内容的提问来源于stack exchange，提问作者Tom