首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter:在构建Googlemap时显示Circularprogressindicator

Flutter是一种跨平台的移动应用开发框架,由Google开发和维护。它允许开发者使用单一代码库构建高性能、美观且流畅的移动应用程序,同时支持Android和iOS平台。

在构建Google Map时显示CircularProgressIndicator,可以通过以下步骤实现:

  1. 导入相关依赖:在Flutter项目的pubspec.yaml文件中,添加google_maps_flutter依赖。然后运行flutter packages get命令来获取依赖包。
  2. 创建Google Map页面:在Flutter项目中创建一个新的页面,用于显示Google Map。可以使用GoogleMap组件来显示地图,并设置初始位置、缩放级别等属性。
  3. 显示CircularProgressIndicator:在Google Map加载完成之前,可以显示一个CircularProgressIndicator来指示地图正在加载。可以使用Flutter的CircularProgressIndicator组件,并将其放置在地图上方的层叠组件中。

以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GoogleMapPage extends StatefulWidget {
  @override
  _GoogleMapPageState createState() => _GoogleMapPageState();
}

class _GoogleMapPageState extends State<GoogleMapPage> {
  GoogleMapController mapController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Map'),
      ),
      body: Stack(
        children: [
          GoogleMap(
            onMapCreated: (controller) {
              setState(() {
                mapController = controller;
              });
            },
            initialCameraPosition: CameraPosition(
              target: LatLng(37.42796133580664, -122.085749655962),
              zoom: 14.0,
            ),
          ),
          if (mapController == null)
            Center(
              child: CircularProgressIndicator(),
            ),
        ],
      ),
    );
  }
}

在上述示例中,GoogleMap组件用于显示地图,onMapCreated回调函数用于获取地图控制器。如果地图控制器为空,就显示CircularProgressIndicator。

推荐的腾讯云相关产品:腾讯云地图服务(https://cloud.tencent.com/product/tianditu)可以提供丰富的地图功能和服务,包括地图展示、地理编码、逆地理编码等,可以与Flutter的GoogleMap组件结合使用,以实现更多地图相关的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 中探索 StreamBuilderimage

偶尔,周期结束之前可能会发出一些值。 Dart 中,您可以创建一个返回 Stream 的容量,该容量可以异步进程处于活动状态发射一些值。...A stream 构建器,它可以将流中的多个组件更改为小部件 Stream 像一条线。当您从一端输入值而从另一端输入侦听器,侦听器将获得该值。...在下面的代码中,当 connectionState 值正在等待,将显示一个 CircularProgressIndicator。...如果传递的值不为空,那么当 connectionState 等待,hasData 属性在任何事件中首先都将为 true StreamBuilder( initialData: 0, //...other arguments ) 要在 connectionState 等待显示初始数据,应该调整 if snapshot.connectionState = = connectionState.waiting

2.5K00

Flutter 构建完整应用手册-图片 顶

显示来自互联网的图像 显示图像是大多数移动应用程序的基础。 Flutter提供Image小部件以显示不同类型的图像。 为了处理来自URL的图像,请使用Image.network构造函数。...用占位符淡入图像 使用默认images小部件显示图像,您可能会注意到它们加载时会弹出到屏幕上。 这可能会让用户产生视觉震撼。...相反,如果你最初可以显示一个占位符,那么它会不会很好,并且图像在加载时会淡入? 我们可以使用与Flutter一起打包的FadeInImage部件来达到这个目的!...使用缓存的图像 某些情况下,在从网络上下载图像缓存图像可能会很方便,以便它们可以脱机使用。 为此,我们将使用cached_network_image包。...在这个例子中,我们将在图片加载显示一个蜘蛛。

1.2K20
  • 进度组件ProgressIndicator

    上期回顾 ---- 在前面的文章中我们介绍了很多Flutter中的Widget,但是确实还有很多Widget没有介绍到,当然我们会在以后用的时候来做说明的,今天我们就来介绍下Flutter中的进度组件。...ProgressIndicator ---- Flutter中ProgressIndicator是个抽象类,它有两个子类。...好吧,原来它是自己动的啊,也符合Widget名字的特点,那么我们怎么让它根据我们的值来控制进度的显示呢?...每当我们点击屏幕上按钮就触发进度的更改(模拟进度回调),当进度最大从新开始计算进度。...其实上面的代码很简单,每当我们点击屏幕上按钮我们就会使currentProgress值+0.1当进度值为1把它重新置为0.1而已。

    1.6K30

    flutter系列之:做一个下载按钮的动画

    简介我们app的开发过程中经常会用到一些表示进度类的动画效果,比如一个下载按钮,我们希望按钮能够动态显示下载的进度,这样可以给用户一些直观的印象,那么flutter中一个下载按钮的动画应该如何制作呢...定义DownloadButton的细节有了可以动态变化的状态和进度之后,我们就可以DownloadButton中构建具体的页面展示了。...未开始下载之前,我们希望downloadButton是一个长条形的按钮,按钮上的文字显示GET,下载过程中希望是一个类似CircularProgressIndicator的动画,可以根据下载进度来动态变化...下载完毕之后,再次展示长条形按钮,这时候按钮上的文字显示为OPEN。...因为在下载过程中,还有停止的功能,所以我们CircularProgressIndicator上再放一个stop icon,最后将这个stack封装在AnimatedOpacity中,实现整体的一个淡入淡出功能

    44231

    Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )

    二、内存加载 Placeholder 三、完整代码示例 四、相关资源 一、transparent_image 透明图像插件 ---- 安装 transparent_image 插件 : 搜索插件 : ...pub.dev/packages 中搜索 transparent_image 插件 ; 插件地址 : https://pub.dev/packages/transparent_image 配置插件 : ...import 'package:transparent_image/transparent_image.dart'; 二、内存加载 Placeholder ---- Placeholder 是一个占位控件 , 图片还没有就绪..., 如从网络获取图片 , 先使用 Placeholder 占据图片组件的位置 ; 代码示例 : Stack( children: [ // 进度条 Center(child: CircularProgressIndicator...FadeInImage 组件是透明状态 , 显示进度条 , 之后变为不透明 , 进度条被覆盖 , 但是一直在后面转 ; 显示的网络图片 : ( 吸取上一篇博客的教训 , 使用风景图片 ) 三、完整代码示例

    92010

    初学者的 Flutter bloc

    我们怎么开始 Flutter Bloc? 首先,我们应该通过官方文档,阅读相关的基础内容,本文中,我们尝试解析这些基础点,如果需要深入了解,推荐去看官方文档。 它是怎么工作的?...当我们使用 Flutter Bloc,我们要在应用中创建事件触发交互,然后 Bloc 会发射 emit 请求数据,存在在 state 中,真实的场景中,它会像这样: 用户点击按钮来获取游戏列表 事件被触发...我们了解这些后,下面可以应用到案例中 真实项目中使用 Flutter Bloc 在这个项目中,我们将从 games API 消费数据,获取关于游戏的信息并在页面中展示出来。...这个挂件只有它的 bloc 发射成功一个状态后才展示出来,它有三个状态: 成功:展示游戏列表 错误:展示一个错误信息 加载:展示一个 CircularProgressIndicator 挂件 项目结构...嗯,当一个状态被发射,我们想要根据对应的数据重新构建视图。为了实现这个,我们视图中添加了 BlocBuilder。

    15610

    Go 静态编译及构建 docker 镜像的应用

    Go 语言具有跨平台和可移植的特点,同时还支持交叉编译,可以一个系统上编译出运行在另一个系统上的二进制可执行文件,这是因为 Go 在编译支持将依赖的库文件与源代码一起编译链接到二进制文件中,所以实际运行时不再需要依赖运行环境中的库...,而只需要一个二进制文件就可以运行,构建 docker 镜像就可以利用这个特点,实现减小镜像大小的目的,下面逐步介绍这中间涉及到的关键点。...链接器仅仅是复制了一些重定位和符号表信息,它们使得运行时可以解析对 libvector.so 中代码和数据的引用,程序加载动态链接才真正完成。...使用 docker 的多阶段构建 docker 多阶段构建(multi-stage build)可以一个 Dockerfile 中编写上述两个镜像构建过程,使用 FROM 指令表示开始一个阶段的构建,...第一阶段构建用来编译得到可执行文件,第二阶段构建可以将上一个阶段中产出的可执行文件 COPY 到当前构建的镜像中,从而实现与上述效果相同的减少镜像体积的目的。

    8610

    我们构建微服务犯过的最大错误

    1定制构建太多 微服务领域,服务之间的通信是一个大问题。有人会说这是最大的问题。这一切都要归究于分布式事务。...电子商务应用程序的经典示例中,创建新订单的过程可能会涉及到需多个不同的服务中进行操作,比如订单服务、客户服务等。单体应用中,只需一个函数调用即可。但是使用微服务,情况就不那么好了。...所以,决定使用它之前,你需要知道这个问题是什么,你还需要了解你的解决方案,以确定它们的匹配程度。这两个我们都不了解。 因为谁会在一开始就花上几天的时间来定义问题呢?...这种纪律很少见,尤其是需要立即构建的环境中。现在,我知道,通过更关注实现,可以节省正确定义问题所“损失”的时间。换句话说,你花更少的时间构建错误的东西。浪费的时间会少很多。...在我看来,你也可能会浪费大量的时间去构建错误的东西,在这个过程中收集了经验来写文章,然后在网上抱怨。这对我们有用。我是说,我们还活着讲述这个故事。

    60630

    记录一次docker构建镜像的错误

    记录一次docker构建镜像的错误 前言,这是我用CODING构建的一个微服务项目,其执行命令的路径应该是该workspace/mogu(mogu是构建任务名称),所以下文中执行构建或者打包的上下文路径都应该是...workspace/mogu 项目主要路径截图 错误截图 docker构建命令已经顶端打印出来了 docker build -t mogu/mogu/java-spring-app:Nacos-b6dc13dfee41f23615f2d2b62657d0549399e4e5...,也就是 workspace/mogu 具体错误是Dockerfile文件执行到第三步时候出的错,此时你去问度娘,大多数都会告诉你Dockerfile的路径不能是**.....但其实是Dockerfile中第三步的时候ADD的时候没在当前路径找到jar包而已,当前路径是什么,就是一开始所说的workspace/mogu,那正确的Dockerfile应该是这样子的 from...Dspring.config.location=/config/application.yml,/config/bootstrap.yml","/admin.jar"] CODING和jenkins其实本质上是一致的,所以jenkins

    1.4K20

    Flutter 和 Dart 中取消 Future 的 3 种方法

    本文将引导您了解 Flutter 和 Dart 中取消 future 的 3 种不同方法。 使用异步包(推荐) async包由 Dart 编程语言的作者开发和发布。...完整示例 应用预览 我们要构建的应用程序有一个浮动按钮。按下此按钮,将开始异步操作(这需要 5 秒才能完成)。...如果您在Future完成前 5 秒内点击取消按钮,屏幕将显示“Future已被取消”。 如果您什么都不做,则 5 秒后屏幕将显示“Future completed”。...const CircularProgressIndicator() : Text( _text ??...结论 你已经学会了不止一种方法来取消 Flutter 中的Future。从其中选择一个以您的应用程序中实现,以使其处理异步任务更加健壮和吸引人。

    2.4K10

    我们构建微服务犯过的最大错误

    1定制构建太多 微服务领域,服务之间的通信是一个大问题。有人会说这是最大的问题。这一切都要归究于分布式事务。...所以,决定使用它之前,你需要知道这个问题是什么,你还需要了解你的解决方案,以确定它们的匹配程度。这两个我们都不了解。 因为谁会在一开始就花上几天的时间来定义问题呢?...这种纪律很少见,尤其是需要立即构建的环境中。现在,我知道,通过更关注实现,可以节省正确定义问题所“损失”的时间。换句话说,你花更少的时间构建错误的东西。浪费的时间会少很多。...在我看来,你也可能会浪费大量的时间去构建错误的东西,在这个过程中收集了经验来写文章,然后在网上抱怨。这对我们有用。我是说,我们还活着讲述这个故事。 今日好文推荐 终于!...为什么除了Flutter之外,我们还需要另一个跨平台开发框架? 技术总监惨遭公司起诉索赔90万,原因是拖延开发进度?

    55810
    领券