如何在 Flutter 中获取当前位置时显示加载微调器？

Posted 2023-02-23

【中文标题】如何在 Flutter 中获取当前位置时显示加载微调器？

【英文标题】：How to display a loading spinner while getting the current location in Flutter?

【发布时间】：2020-02-18 13:49:33

【问题描述】：

我正在开发一个获取用户当前位置的 Flutter 应用，但是在获取该位置时，它会显示此 ugly red error screen（获取位置后它会消失）。

而不是这个，我想显示一个加载微调器或启动屏幕。我已将问题缩小到在initState() 期间调用的此方法：

void _setCurrentLocation() 
  Geolocator().getCurrentPosition().then((currLoc) 
    setState(() 
      currentLocation = currLoc;
    );
  );

整个源文件也可以在here on GitHub找到。

提前致谢！

【参考方案1】：

最简单的方法是使用条件渲染。在 _setCurrentLocation 将其设置为一个值之前，currentLocation 将为 null。

class LocationDisplayPage extends StatefulWidget 
  @override
  _LocationDisplayPageState createState() => _LocationDisplayPageState();


class _LocationDisplayPageState extends State<LocationDisplayPage> 
  Position currentLocation;

  void _setCurrentLocation() 
    Geolocator().getCurrentPosition().then((currLoc) 
      setState(() 
        currentLocation = currLoc;
      );
    );
  

  @override
  void initState() 
    super.initState();
    _setCurrentLocation();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Center(
        child: currentLocation == null
            ? CircularProgressIndicator()
            : WidgetToRenderLocation(),
      ),
    );
  

【参考方案2】：

使用 FutureBuilder 小部件

在 initState 方法中调用您的 _setCurrentLocation 方法并将其分配给一个变量，例如 getLoc。

Future<Position> getLoc;

@override
void initState() 
// TODO: implement initState
getLoc = _setCurrentLocation();
super.initState();

用 return 语句改变你的方法。

Future<Position> _setCurrentLocation() async 
var Location = await Geolocator().getCurrentPosition();
return Location;

将所有设计代码放入 futurebuilder 小部件中

@override
Widget build(BuildContext context) 
return FutureBuilder(
    future: getLoc,
    builder: (context, data) 
      if (data.hasData) 
        return Text(data.data.toString());
       else 
        return Center(child: CircularProgressIndicator());
      
    );

【讨论】：

我试过这个，但它不起作用。红屏似乎消失了，但CircularProgressIndicator()无限显示。

@UrmilShroff 检查我的更新答案，它现在正在工作。

嗨@MSARKrish，我正在尝试完成几乎相同的事情。但我无法让你的答案发挥作用......你能看看我的问题吗？ ***.com/questions/67268482/…

【参考方案3】：

美国小部件Visibility()

bool _isLoading = false;

void _setCurrentLocation() 
  _isLoading = true;

  Geolocator().getCurrentPosition().then((currLoc) 
    setState(() 
      _isLoading = false;
      currentLocation = currLoc;
    );
  );

 return Scaffold(
      key: scaffoldKey,
      body: Container(
        child: Visibility(
         visible: _isLoading,
          child: Stack(
           children: <Widget>[
             GoogleMap( ...

          replacement: Container(
             child: CircularProgressIndicator(),
           ),

【讨论】：

实现了这一点，但似乎没有工作。红屏仍显示在GoogleMap 或CircularProgressIndicator() 之后，具体取决于我如何定义布尔值。