如何在构建有状态小部件之前等待功能？ [复制]

Question

我正在等待一个 GEOLOCATOR 函数从用户那里获取位置。但是在最初的构建过程中，在从 GEOLOCATOR 实际检索到位置之前，我总是会在几秒钟内收到一个错误（纬度被调用为 null）。如何在构建页面之前实际获取 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 小部件，其中future 是您的异步​​函数，而builder 是您想要返回的任何东西（在您的情况下是脚手架）。使用snapshot.hasData 检查future 是否返回了任何内容，如果没有返回任何内容，则返回进度指示器（或您想要的任何内容）。

    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 函数，当它返回一个值时，您将导航到主屏幕