如何在构建有状态小部件之前等待函数？

Question

我正在等待 GEOLOCATOR 函数从用户那里获取位置信息。但是在初始构建期间，在从 GEOLOCATOR 实际检索位置之前，我总是会收到几秒钟的错误（纬度被调用为空）。我如何做到这一点，以便在构建页面之前实际获取 LOCATION？

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

class DistancingPage extends StatefulWidget {
  DistancingPage(this.uid);
  @override
  _DistancingPageState createState() => _DistancingPageState();
}

class _DistancingPageState extends State<DistancingPage> {
Position position;

@override
  void initState() {
    super.initState();
    getPos();
  }

  Future<void> getPos() async {
    Position p = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);

    setState(() {
      position = p;
    });
  }
@override
  Widget build(BuildContext context) {
return Scaffold(
        appBar: AppBar(
          title: Text('Distancing Alerts'),
          backgroundColor: Colors.red[800],
),
body: Padding(
            padding: const EdgeInsets.all(36.0),
            child: Column(
              children: [
                Text(
                  'YOUR CURRENT POSITION',
                  style: TextStyle(
                    color: Colors.red[800],
                  ),
                ), //THE ERROR OCCURS HERE
                Text(position.latitude.toString() +
                    '° N , ' +
                    position.longitude.toString() +
                    '° E'),
],
            )));
  }
}

Answer 1

您应该使用 FutureBuilder 小部件，其中未来是您的异步函数，构建器是您想要的任何东西 return（在您的案例中是脚手架）。检查 future 是否 returned 了 snapshot.hasData 和 return 进度指示器（或任何你想要的）如果它没有 returned 任何东西。

    FutureBuilder(
      future: getPos(),
      builder: (context, snapshot) {
    snapshot.hasData ? 
      Scaffold(
                appBar: AppBar(
                  title: Text('Distancing Alerts'),
                  backgroundColor: Colors.red[800],
        ),
        body: Padding(
                    padding: const EdgeInsets.all(36.0),
                    child: Column(
                      children: [
                        Text(
                          'YOUR CURRENT POSITION',
                          style: TextStyle(
                            color: Colors.red[800],
                          ),
                        ), //THE ERROR OCCURS HERE
                        Text(position.latitude.toString() +
                            '° N , ' +
                            position.longitude.toString() +
                            '° E'),
        ],
                    ))) : CircularProgressIndicator();};

Answer 2

您可以添加带有来自 flutter_spinkit 的一些动画的临时页面。在该页面上，您正在等待 GEOLOCATOR 函数，当它 return 一个值时，您将导航到主屏幕

如何在构建有状态小部件之前等待函数？

How to await on a function before Build in a stateful widget?

geolocation

dart

flutter