![](https://img-blog.csdnimg.cn/c52ed3bc4b754607af7c80a7e23d2bf6.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
flutter
文章平均质量分 55
flutter的基础实战
坚果的博客
华为开发者专家(HDE),润开鸿生态技术专家, OpenHarmony布道师,OpenHarmony校源行开源大使,InfoQ签约作者,电子发烧友鸿蒙MVP,51CTO博客专家博主,阿里云博客专家,专注于前端技术的分享,包括鸿蒙,ArkUI-X,Flutter,小程序,如果你迷茫,不妨来瞅瞅码农的轨迹,也期待你加入坚果派!
展开
-
flutter - sort List排序
dart中,对List结构数据进行排序今天遇到一个需求,就是根据要把已经结束的活动排在最后,新发布的,排在最前面,那么,在flutter中如何做呢,其实很简单,对List用sort排序就好注意 sort方法 会直接改变原List数组结构我是根据结束时间对其进行了排序就这样解决了问题,所以你学会了吗?...原创 2022-06-30 13:50:21 · 2693 阅读 · 0 评论 -
dart使用技巧集合
在 Dart(以及 Flutter)中生成给定范围内的随机整数的几个示例。输出:您得到的结果可能包含最小值、最大值或此范围内的值。编码:输出(输出当然是随机的,每次重新执行代码时都会改变)。您得到的结果可能会包含 min 但绝不会包含 max。为了在 Dart 中对数字进行四舍五入,我们可以使用**round()**方法。此方法返回与输入数字最接近的整数。如果无法确定最接近的整数(例如 0.5、-2.5、3.5 等),则从零舍入。例子:输出:您可以在官方文档中找到有关 round() 方法的更多原创 2022-06-17 08:34:42 · 985 阅读 · 5 评论 -
10 个派上用场的 Flutter 小部件
尝试学习一门新语言可能会令人恐惧和厌烦。很多时候,我们希望我们知道早先存在的某些功能。在今天的文章中,我将告诉你我希望早点知道的最方便的几个Flutter小部件。Spacer 创建一个可调整的空白空间,它占据 Flex 容器中小部件之间的任何剩余空间,例如行或列。TextButton.icon在创建带有图标的按钮时,此小部件取代了使用行的需要。您必须提供图标和标签。Wrap它根据提供的方向值水平或垂直显示其子项。它可以用来代替 Gridview。这个小部件是响应式的,无需做太多就可以适应不同的屏幕尺原创 2022-06-09 08:20:19 · 567 阅读 · 0 评论 -
Flutter doctor 显示xcode没有安装的解决办法
Flutter doctor 显示xcode没有安装的解决办法按照报错信息的指导CocoaPods没有安装,那么CocoaPods 管理 Xcode 项目的库依赖项。项目的依赖项在称为 Podfile 的单个文本文件中指定。CocoaPods 将解析库之间的依赖关系,获取生成的源代码,然后在 Xcode 工作区中将它们链接在一起以构建您的项目。最终目标是通过创建一个更加集中的生态系统来提高第三方开源库的可发现性和参与度。CocoaPods 是用 Ruby 构建的,它可以使用 macOS 上可用的默认 Rub原创 2022-06-07 11:06:48 · 652 阅读 · 0 评论 -
Flutter:创建透明/半透明的应用栏
在 Flutter 中,您可以通过执行以下操作来创建透明或半透明的应用栏:如果您希望 body 的高度扩展到包含应用栏的高度并且 body 的顶部与应用栏的顶部对齐,则必须将Scaffold小部件的extendBodyBehindAppBar属性设置为true(默认值为false )。单纯的解释可能很无聊和令人困惑。以下是三个示例,涵盖了最常见的实际用例。编码:半透明应用栏截屏:编码:带有颜色渐变的半透明应用栏这个例子有点复杂。截屏:编码:结论我们已经浏览了几个关于在 Flutter 中创建透明原创 2022-06-06 08:19:58 · 2000 阅读 · 2 评论 -
Flutter如何一键唤起
如何一键唤起目前我们的项目有分享功能,想通过分享的链接实现判断用户是否已经下载,如果没有,则下载,下载了的用户则可以跳转到对应的详情页,查看详情为了方便尽可能的少写代码,在pub上发现openinstall_flutter_plugin插件openinstall插件封装了openinstall平台原生SDK,集成了 渠道统计,携带参数安装,快速安装与一键拉起 功能,目前渠道支持 H5渠道,广告平台渠道 以及 Apple Search Ads (ASA) 渠道。接下来我们就介绍如何在自己的项目中使用安装方式有原创 2022-06-02 08:03:16 · 802 阅读 · 1 评论 -
flutter doctor 不起作用
解决办法因为是用了fvm版本控制工具,加个fvm就可以了fvm flutter doctor但是这样其实是很麻烦的那么我们还有一个方式编辑~/.zshrc设置命令的别名aliases 快捷使用fvm命令alias flutter="fvm flutter"alias dart="fvm dart"使生效:source ~/.zshrc重启命令行工具。是不是好了呢,点个赞...原创 2022-05-23 17:34:16 · 377 阅读 · 0 评论 -
Flutter:AnimatedOpacity 示例
本文是关于 Flutter 中的 AnimatedOpacity 小部件。前言顾名思义,AnimatedOpacity的目的是在给定的持续时间内为其子项的不透明度设置动画:AnimatedOpacity({ Key? key, Widget? child, required double opacity, Curve curve = Curves.linear, required Duration duration, VoidCallback? onEnd, b原创 2022-05-19 08:29:10 · 712 阅读 · 0 评论 -
Flutter 中的 StatefulBuilder 小部件
本文是关于 Flutter 中的 StatefulBuilder 小部件。我将介绍小部件的基础知识,然后检查一个在实际中使用它的完整示例。、StatefulBuilder 小部件可以在这些区域的状态发生变化时仅重建某些小区域而无需付出太多努力。这提高了应用程序的性能。StatefulBuilder({ Key? key, required StatefulWidgetBuilder builderr})builder 函数有两个参数:context和一个用于在状态改变时触发重建的函数:b原创 2022-05-18 12:46:32 · 464 阅读 · 0 评论 -
Flutter & Dart:如何检查字符串是否为空
Flutter & Dart:如何检查字符串是否为空作者:坚果公众号:“大前端之旅”华为云享专家,InfoQ签约作者,OpenHarmony布道师,,华为云享专家,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,鸿蒙,小程序,安卓,VUE,JavaScript。在使用 Flutter 和 Dart 时,可能存在必须检查给定字符串是null还是empty的情况。假设我们的应用程序的功能仅在字符串既不为空也不为空时继续,那么我们原创 2022-05-15 17:42:11 · 3674 阅读 · 0 评论 -
在Flutter中使用WillPopScope*
在Flutter中使用WillPopScope作者:坚果公众号:“大前端之旅”华为云享专家,InfoQ签约作者,OpenHarmony布道师,,华为云享专家,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,鸿蒙,小程序,安卓,VUE,JavaScript。突然,在阅读特定内容时,。令人惊讶的是,您发现您的手指掠过后退按钮。页面弹出,这可能不是什么大问题,如果您可以前进到页面并从您停止的地方继续,但如果应用程序已刷新屏幕或设置为在您进原创 2022-05-14 10:32:46 · 2384 阅读 · 0 评论 -
关于Flutter的RichText组件你了解吗?
今天给大家带来的是RichText组件,他里面有个text属性,RichText显示的文本内容是TextSpan类型,他不是一个简单的string,而是TextSpan类型,TextSpan类型是一个可以无限传递的树形结构,每个节点出了text属性,还可以通过style属性,设置自定义文字样式。甚至通过children属性,传入一个TextSpan列表作为子节点,已实现叠加和嵌套文字样式的功能。然后大家有没有疑问,关于红色的这个是如何设置的,这个我可以称呼它为碰撞检测,以便完成TextSpan树中某一片段的原创 2022-05-04 08:50:58 · 1089 阅读 · 0 评论 -
Flutter 中的文本溢出的示例
Flutter 中的文本溢出的示例在 Flutter 中,Text、RichText和DefaultTextStyle小部件的溢出属性指定了如何将未显示的溢出内容通知给用户。它可以被剪裁、显示省略号(三个点)、淡入淡出或溢出到其父窗口小部件之外。可以使用TextOverflow枚举值设置溢出属性:TextOverflow.clip:截断内容区域边缘的文本,以便截断可以发生在字符中间。TextOverflow.ellipsis : 显示一个省略号 (‘…’) 来表示剪切的文本。省略号显示在内容区域内原创 2022-04-27 23:16:31 · 2664 阅读 · 0 评论 -
Dart:在循环中使用 Async 和 Await
Dart:在循环中使用 Async 和 Await在 Dart(以及 Flutter)中,您可以使用Future.forEach在循环中顺序执行同步操作。下面的示例程序将打印从 1 到 10 的数字。每次打印完一个数字,它会等待 3 秒,然后再打印下一个数字。//大前端之旅void main() async { final items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; await Future.forEach(items, (item) async {原创 2022-04-21 23:22:15 · 1498 阅读 · 0 评论 -
flutter报错_needsLayout
_AssertionError (‘package:flutter/src/rendering/object.dart’: Failed assertion: line 2789 pos 12: ‘!_needsLayout’: Updated layout information required for RenderIndexedSemantics#dc6e5 NEEDS-LAYOUT to calculate semantics.)它似乎来自flutter_staggered_grid_view插原创 2022-04-14 08:33:04 · 2361 阅读 · 0 评论 -
Flutter:ExpansionTile 示例
Flutter 中的ExpansionTile小部件用于创建可扩展和可折叠的列表图块。本文将向您介绍 2 个在实践中使用该小部件的示例。第一个例子简短而简单,而第二个例子稍微复杂一些。示例 1:单个 ExpansionTile预览此示例应用程序显示一个扩展磁贴,其子项是颜色列表:编码生成上述示例的完整源代码:// main.dartimport 'package:flutter/material.dart';void main() { runApp(const MyApp());}原创 2022-04-14 08:24:15 · 2278 阅读 · 0 评论 -
flutter pub get错误pub get failed和Downloading CanvasKit问题
flutter pub get错误pub get failed和Downloading CanvasKit问题这种问题一般都是网络问题以macOS 或者与 Linux 相近的系统为例,$ export PUB_HOSTED_URL=https://pub.flutter-io.cn$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn然后source就好了,所以你学会了吗?...原创 2022-04-08 11:30:36 · 1426 阅读 · 0 评论 -
在 Flutter 和 Dart 中取消 Future 的 3 种方法
在 Flutter 和 Dart 中取消 Future 的 3 种方法作者:坚果公众号:“大前端之旅”华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。本文将引导您了解在 Flutter 和 Dart 中取消 future 的 3 种不同方法。使用异步包(推荐)async包由 Dart 编程语言的作者开发和发布。它提供了dart:async风格的实用程序来原创 2022-04-05 21:04:19 · 3457 阅读 · 2 评论 -
在 Flutter 中使用 NavigationRail 和 BottomNavigationBar
在 Flutter 中使用 NavigationRail 和 BottomNavigationBar作者:坚果公众号:“大前端之旅”华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,鸿蒙,小程序,安卓,VUE,JavaScript等。本文将向您展示如何使用NavigationRail和BottomNavigationBar在 Flutter 中创建****自适应布局。我们将浏览一下这个概念,然后通过一个原创 2022-03-14 08:31:06 · 1586 阅读 · 0 评论 -
Flutter Web 应用程序的 URL 中删除前导`#`
接上文作者:坚果公众号:“大前端之旅”华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。然后大家是不是发现上面有个# ,说实话,我看着也很烦,那么如何解决呢,其实也简单。导入下面的包url_strategy: ^0.2.0如何安装呢?控制台运行flutter pub add url_strategyurl_strategyFlutter 应用程序原创 2022-03-07 08:44:11 · 1019 阅读 · 1 评论 -
如何使用自定义端口运行 Flutter Web
如何使用自定义端口运行 Flutter Web默认情况下,每次在localhost上启动 Flutter web 时,它都会有一个不同的端口。但是,在某些情况下,您需要设置一个固定端口(例如,当您想使用 Google 登录实现社交身份验证时)。为此,请在运行项目时使用**–web-port**标志,如下所示:flutter run -d chrome --web-port=8080截屏:...原创 2022-03-07 08:42:36 · 3913 阅读 · 0 评论 -
检查 Flutter 应用程序是否在 Web 上运行
您可以使用基础库中的kIsWeb常量检查您的 Flutter 应用程序是否在 Web 浏览器上运行import 'package:flutter/material.dart';import 'package:flutter/foundation.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key原创 2022-03-03 15:02:46 · 1722 阅读 · 0 评论 -
resamplingEnabled属性
GestureBinding.instance.resamplingEnabled = true;通过将其设置为 true,为触摸设备启用指针事件重采样。重采样会以增加一些延迟为代价使触摸事件处理更加顺畅。具有低频传感器或频率不是显示频率倍数的设备(例如,120Hz 输入和 90Hz 显示)会受益于此。这通常在应用程序初始化期间设置,但可以动态调整,以防应用程序只需要重新采样一段时间。...原创 2022-02-28 10:01:26 · 535 阅读 · 0 评论 -
如何在Dart中读取控制台输入/ stdin?
如何在Dart中读取控制台输入/ stdin?import 'dart:io';void main(){ stdout.write("请输入: "); var name = stdin.readLineSync(); stdout.write(name);}请输入: 1111默认情况下 readLineSync() 将输入作为字符串。但是如果你想要整数输入,那么你必须使用 parse() 或 tryparse()。import 'dart:async';import 'dar原创 2022-02-23 07:59:25 · 2143 阅读 · 0 评论 -
一个统计编码时长的Vscode插件神器
Vscode插件之推荐一个统计编码时长的插件神器作者:坚果公众号:“大前端之旅”华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。大家看到这个图片是不是蛮有意思的那么这是一款咋样的插件呢?可以先来看一看他运行时的样子最后给大家介绍一下他的名字Time Master对的,就是下图这个大家可以下载了体验一下,还是蛮有意思的....原创 2022-02-22 13:53:17 · 2975 阅读 · 0 评论 -
Dart - 如何对 Map 的键进行排序
import "dart:collection";main() { final SplayTreeMap<String, Map<String,String>> st = SplayTreeMap<String, Map<String,String>>(); st["yyy"] = {"should be" : "3rd"}; st["zzz"] = {"should be" : "last"}; st["aaa"] = {原创 2022-02-22 08:09:17 · 2274 阅读 · 0 评论 -
用于显示本地通知的跨平台插件flutter_local_notifications
用于显示本地通知的跨平台插件。https://pub.flutter-io.cn/packages/flutter_local_notifications在这里插入图片描述原创 2022-02-13 12:12:34 · 1714 阅读 · 0 评论 -
Flutter监听音量实现波形可视化的音频
关于下图这个大家采用的下面的那个插件?just_audiojust_audio 是一款功能丰富的音频播放器,适用于 Android、iOS、macOS 和 web。https://pub.flutter-io.cn/packages/just_audiojust_waveform该插件从可用于呈现波形可视化的音频文件中提取波形数据。https://pub.flutter-io.cn/packages/just_waveformaudio_wave带有动画的多用途简单条形图。它是高度可原创 2022-02-13 11:47:59 · 4477 阅读 · 0 评论 -
Flutter web问题:Failed to load network image
Flutter web问题:Failed to load network image我的解决办法:flutter build web --release --web-renderer htmlflutter run --web-renderer htmlflutter run -d chrome --web-renderer html预览图:原创 2022-01-14 13:14:23 · 2454 阅读 · 3 评论 -
2022年为什么要使用Flutter构建应用程序?
今天每个人都想构建一个应用程序,但是谁又能责怪他们呢?事实上,如今每个人都拥有智能手机,它已迅速成为我们白天最常使用的工具。当我们没有它们时,我们会感到缺少一些东西,我们甚至把它们带到洗手间,我们甚至想不出没有它们,如何出门。无论我们喜欢与否,它对我们生活都在进行最快,最积极的影响.原创 2022-01-14 08:01:42 · 322 阅读 · 0 评论 -
最新Flutter 微信分享功能实现
Flutter 微信分享功能实现Flutter 用来快速开发 Android iOS平台应用,在Flutter 中,通过 fluwx或者fluwx_no_pay 插件来实现微信分享功能主要还是看自己的需求,本示例我将按照没有支付的实现。至于为什么,主要是ios打包提审比较麻烦。那么接下来就看一下如何实现吧,1.首先去pub官网https://pub.flutter-io.cn/查找这两个包fluwx_no_pay或者fluwx安装方式有两种:flutter pub add原创 2022-01-10 08:45:45 · 4156 阅读 · 4 评论 -
Flutter:使用复选框进行下拉多选
Flutter:使用复选框进行下拉多选本文向您展示了在 Flutter 中使用复选框实现下拉多选的两种不同方法。在第一种方法中,我们将从头开始构建多选。在第二种方法中,我们将使用第三方包快速完成工作。从头开始使用复选框创建多选应用预览我们将要构建的应用程序有一个专业的、功能齐全的多选小部件,可显示选项列表。可以通过选中/取消选中与其关联的复选框来选择或取消选择一个选项。当按下升高的按钮时,将显示多选对话框。它让用户在编程中选择他们最喜欢的主题。所选主题将作为筹码显示在屏幕上。以下是我们的应用程原创 2022-01-03 10:04:05 · 3219 阅读 · 2 评论 -
Flutter 完美的验证码输入框(2 种方法)
Flutter 完美的验证码输入框(2 种方法)本文向您展示了在 Flutter 中实现完美的验证码输入框几种不同方法。重点是什么?真实世界的 完美的验证码输入框或 PIN 输入 UI 通常满足以下最低要求:有4个或6个文本域,每个文本域只能接受1个字符(通常是一个数字)输入数字后自动聚焦下一个字段您经常在需要电话号码确认、电子邮件或双因素身份验证的应用程序中看到此功能。从头开始制作 OTP 字段应用预览此示例创建一个简单的 OTP 屏幕。首先,聚焦第一个输入字段。当您输入一个数字时原创 2021-12-24 08:24:26 · 6166 阅读 · 1 评论 -
Flutter中实现整个App变为灰色
前言为了让更多的人永远记住12月13日,各大厂都在这一天将应用变灰了。那么接下来我们看一下Flutter是如何实现的。Flutter中实现整个App变为灰色在Flutter中实现整个App变为灰色是非常简单的,只需要在最外层的控件上包裹ColorFiltered,用法如下:ColorFiltered(颜色过滤器)看名字就知道是增加颜色滤镜效果的,ColorFiltered( colorFilter:ColorFilter.mode(Colors.grey, BlendMode.原创 2021-12-13 09:10:12 · 7263 阅读 · 3 评论 -
Dart Hello World 示例程序【Dart专题1】
大家好,我是坚果,公众号“坚果前端”,关注我公众号,获取更多细节Dart Hello World 示例程序Dart—你好世界在本教程中,我们将编写一个非常基本的 Dart 程序。此示例程序打印Hello World到控制台。打开文本编辑器并粘贴以下代码。void main(){ print('Hello World');}将文件另存为hello.dart 或some_file_name_you_like.dart。让我们继续hello.dart。打开命令提示符并转到hello.d原创 2021-12-07 13:07:29 · 516 阅读 · 1 评论 -
Flutter 如何禁止手机横屏[Flutter专题62]
问题引出群友发来问题:Flutter 怎么禁止横屏显示呀,网上说的几个方法 都没有效群友遇到问题,就要群友去帮助,这样,这个群就有了存在的意义。正文在一些特定的 App 里,我们不希望手机横屏的时候,App 发生旋转,在 main 函数里,像下面这样设定,就可以做到全局禁用横屏模式了。代码import 'package:flutter/services.dart';void main() async => { WidgetsFlutterBinding.ensureInitial原创 2021-11-29 07:52:50 · 1315 阅读 · 5 评论 -
Flutter 中获取地理位置[Flutter专题61]
大家好,我是坚果,公众号“坚果前端”Flutter 中获取地理位置如今,发现用户位置是移动应用程序非常常见且功能强大的用例。如果您曾经尝试过在 Android 中实现位置,您就会知道样例代码会变得多么复杂和混乱。但这与 Flutter 不同——它有很多令人惊叹的包,可以为您抽象出样板代码,并使实现地理定位成为梦想。另一个好的方面是您可以在 Android 和 iOS 上获得这些功能。让我们快速浏览一下我们今天正在构建的用于收集位置数据的内容:本文将带您了解两个最流行且易于使用的 Flutter原创 2021-11-28 10:33:42 · 4761 阅读 · 5 评论 -
Flutter 中 stateless 和 stateful widget 的区别[Flutter专题60]
Flutter 中 stateless 和 stateful widget 的区别介绍要在 Flutter 中构建任何应用程序,我们必须创建一个小部件类,它是 Flutter 应用程序的构建块。Flutter 使用小部件来创建现代移动应用程序。Flutter 中的 Widget 分为两类:无状态 Widget 和有状态 Widget。考虑到这一点,我们将研究 Flutter 中的无状态和有状态小部件,并解释它们的区别。让我们从这个问题开始:Flutter 中一个小部件的状态是什么?小部件的状态状原创 2021-11-27 17:24:18 · 1876 阅读 · 1 评论 -
Warning: Mapping new ns http://schemas.android.com/repository/android/common/02 to old ns http://sch
我Flutter,在运行应用程序时,我在调试控制台中收到如下错误:Warning: Mapping new ns http://schemas.android.com/repository/android/common/02 to old ns http://schemas.android.com/repository/android/common/01构建警告:将新 ns 映射到旧 ns尝试删除并重新安装 SDK 平台。删除 ~\Android\Sdk\platforms 中的文件夹并下载您需要的原创 2021-11-26 22:41:52 · 35169 阅读 · 1 评论 -
[flutter专题]详解AppBar小部件
大家好,我是坚果,公众号“坚果前端”AppBar应用栏是各种应用程序中最常用的组件之一。它可用于容纳搜索字段、以及在页面之间导航的按钮,或者只是页面标题。由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。在本教程中,我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。以下是我们将介绍的内容:Flutter 中的 AppBar 是什么?应用栏布局自定义 AppBarFlutter 中的 AppBar 是什么原创 2021-11-26 08:05:56 · 1952 阅读 · 2 评论