原文链接：Flutter bloc for beginners - 原文作者 Ana Polo 本文采用意译的方式 Flutter Bloc 是什么？...Flutter Bloc 很容易使用，因为我们和我们团队可以很快明白相关的概念，不管你是什么水平，该库有非常好的文档和很多的案例，它在 Flutter 社区中是广泛使用的那个，所以我们如果有任何问题，我们都可以在网络上通过简单的搜索找到对应的解决方案...它很强大，因为它可以帮助你创建所有类型的应用，比如，你可以创建以学习为目的的应用，或者创建在生产环境中使用的复杂的应用，Flutter Bloc 都可以应用。...该 API 我们选择的是 RAWG。为了使用它，我们需要创建一个 API Key。 本文我们不会介绍存储库和服务部分，但是如果你感兴趣，可以参考文本的代码。 下面是我完成的应用效果。...Flutter bloc 是一个很好的选择，正如你所看到的，它并不复杂并且很容易理解怎么使用它的核心概念。并且，它提供了很多方法来管理我们的视图和挂件。
最近刚好有网友咨询一个问题，那就顺便借着这个问题给大家深入介绍下 Flutter 中键盘弹起时，Scaffold 的内部发生了什么变化，让大家更好理解 Flutter 中的输入键盘和 Scaffold...image Scaffold 的 resize Scaffold 是 Flutter 中最常用的页面脚手架，前面知道了通过 resizeToAvoidBottomInset ，我们可以配置在键盘弹起时页面的底部按键和...image 那么 Scaffold 的 body 是什么呢？...image 这里就涉及到一个有意思的点，在 _BodyBuilder 里的通过 copyWith 得到新的 MediaQuery 会影响什么呢？如下代码所示，这里用一个简单的例子来解释下。...image 那么到这里，你知道如何在 Flutter 里正确地去获取键盘的高度了吧？
这本食谱包含演示如何在写Flutter应用程序时解决常见问题的食谱。 每个配方都是独立的，可以作为参考帮助您构建应用程序。...在我们定义一个主题后，我们可以在自己的部件中使用它。...build方法中使用它！...，我们需要告诉Flutter在哪里找到它。...，我们可以在TextStyle对象的fontFamily属性中使用它。
简介 一般情况下我们在flutter中搭建的app基本上都是用的是MaterialApp这种设计模式，MaterialApp中为我们接下来使用的按钮，菜单等提供了统一的样式，那么这种样式能不能进行修改或者自定义呢...Theme是一个StatelessWidget，这个widget中包含了ThemeData，它提供了一个Theme.of方法来让子widget获得最近的ThemeData数据。...我们可以使用Theme.of方法从当前的Theme中拷贝一份，然后再调用copyWith方法，传入要修改的自定义属性即可。...theme: Theme.of(context).copyWith(useMaterial3: true), home: const MyHomePage(title: 'Flutter Demo...总结 当我们需要自定义theme或者不同theme的时候，就可以考虑使用本文中使用的方法来进行theme的自定义了。
由于它是一个如此常用的组件，因此 Flutter 为该功能提供了一个名为AppBar的专用小部件。 在本教程中，我们将通过一些实际示例向您展示如何在 Flutter 应用程序中自定义 AppBar。...以下是我们将介绍的内容： Flutter 中的 AppBar 是什么？ 应用栏布局 自定义 AppBar Flutter 中的 AppBar 是什么？...Flutter AppBar 是根据Material Design指南构建的应用程序组件。它通常位于屏幕顶部，并且能够在其布局中包含其他小部件。...AppBar( toolbarHeight: 100, // default is 56 toolbarOpacity: 0.5, ), 结论 如果你已经做到了这一步，你现在应该明白： AppBar 是什么以及它如何在...关于 Flutter 的 AppBar 必须提供的所有内容的完整演练。我希望这篇文章能帮助你在未来所有的 Flutter 应用程序中创建漂亮的 AppBars。
方法中drawer的初始化方法，可以看到系统是如何创建和使用drawer； DrawerController这个组件是控制drawer的出现和消失，但是系统并没有开放打开和关闭的销毁回调方法。...初始化方法并无新意，使用它主要是围绕child来展开。...children: [ DrawerHeader(//drawer头部展示用控件 decoration: BoxDecoration(...，根据测试找到了是在ListView中没有设置padding导致的。...截图_761560bd-37b3-4440-b83b-197d518099c1.png 自定义Drawer可以去Git下载我的demo查看。 我的Git地址 传送门: Flutter-汇总
目前我的状态管理相关文章有： 《Flutter 状态管理 | 第一论 - 对状态管理的看法与理解》 《Flutter 桌面探索 | 自定义可拖拽导航栏》 《Flutter 状态管理 | 第二论...比如下面是秒表的三个界面，核心 数据 是秒表的时刻。在秒表应用执行功能时，数据的变化体现在秒数的变化、记录、重置等。...这样在不同的交互场景中，有不同的界面表现，也是构建逻辑处理的一部分。 ---- 2. 数据的维护 所以的逻辑本身都是对 数据 的维护，界面能够显示出什么内容，都依赖于数据进行表现。...组件状态类对状态的访问 这样 StopWatchBloc 封装了状态的变化逻辑，那如何在构建时让 组件状态类 访问到 StopWatchState 呢？...这里用的是 flutter_bloc ，你完全也可以使用其他的状态管理来实现类似的分离。工具千变万化，但思想万变不离其宗。谢谢观看 ~
这次的 Flutter 小技巧是 ListView 和 PageView 的花式嵌套，不同 Scrollable 的嵌套冲突问题相信大家不会陌生，今天就通过 ListView 和 PageView 的三种嵌套模式带大家收获一些不一样的小技巧...虽然从我个人体验上并不觉得这是个问题，但是如果产品硬是要你修改，难道要自己重写 PageView 的手势响应吗？...看到这你有没有灵光一闪：如果我们把 PageView 的 touchSlop 修改了，是不是就可以调整它响应的灵敏度？...对于产品来说，他们不会考虑你如何实现的问题，他们只会拍着脑袋说淘宝可以，为什么你不行，所以如果是你，你会怎么做？...(overscroll: false) 快速去除 Android 滑动到边缘的 Material 2效果，为什么说 Material2， 因为 Material3 上变了，具体可见： Flutter 3
是基于InheritedWidget封装的用于Widget树的数据传递与共享的的一套框架，它能高效的完成数据共享，进而达到ui及时更新等目的，使用起来略显复杂，一般不是很多的数据更新不建议使用，直接用InheritedWidget...由于原理内容比较复杂，而且这篇文章主要讲解使用，所以有关院里的详细内容可以查看 flutter_redux（redux状态管理源码详解）原理详解 三、使用 我将 flutter_redux 的使用拆解为个步骤...3.1 封装需要共享的数据 我们将所需要共享、更新的数据封装成一个类 首先新建文件 app_state.dart （这里我是对整个 app 共享所以叫这个名字，大家使用时对于修改命名就行） 在这个类离封装需要的数据...，由于这个例子是计数，所以用的是 count class AppState { int count; AppState({ this.count, }); static AppState...，我把代码上传到了 github：flutter-redux-sample 如果还有疑问，或者有更好的方法，欢迎大家在评论区提出 感谢大家的三连或者关注支持，我们下期文章再见
，开发者也可以通过 Theme.of(context) 去读取 ThemeData 的一些全局样式，从而让自己的控件配置更加灵活，但是如果 ThemeData 里没有符合你需求的参数，或者你希望这个参数只被特定控件是用...最大的不同之一就是它的样式代码现在是自动生成。...事实上现在 Flutter 3.0 里 colorScheme 才是主题颜色的核心，而 primaryColorBrightness 和 primarySwatch 等参数在未来将会被弃用，所以如果目前你还在使用...ColorScheme ，那 ColorScheme 又是什么 ？...，并通过 ColorScheme 配置更丰富的 HCT 颜色好了，现在你可以去问你的设计师：你知道什么是 HCT 么？
primaryColor, 在Flutter创建的Demo中，Theme是这样设置的。...种颜色是怎么实现的。...; 从这里，我们就可以知道为什么在Demo中设不设置primarySwatch都会是蓝色的主题色的原因了。 那么一个具体的Flutter组件，是如何决定自己的主题的呢？...以Appbar为例，我们在源代码中找到对应设置background的地方。 final Color backgroundColor = backwardsCompatibility ?...Flutter团队计划用定义好的ColorScheme来设计材质组件的样式。要使用colorScheme，你必须调用ThemeData.from()构造函数。
它存在于flutter_riverpod包中，以提供一个简单的从package:provider的迁移组件，并允许一些flutter特定的使用情况，如与一些Navigator 2包的集成。...它是StateNotifierProvider的简化版，旨在避免为非常简单的用例编写一个StateNotifier类。 StateProvider的存在主要是为了允许用户对简单的变量进行修改。...StateProvider在现实世界中的一个使用案例是管理简单表单组件的状态，如dropdown/text fields/checkboxes。...这种组合允许在一些变量发生变化时自动重新获取一些数据，确保我们始终拥有最新的值。 ❝FutureProvider不提供在用户交互后直接修改计算的方法。它被设计用来解决简单的用例。...而且，针对你的用例进行基准测试很重要，以确保你通过使用ChangeNotifierProvider真正获得了性能。
前一篇文章，我介绍了组合和自绘这两种自定义Widget的方式。...主题定制 主题，又叫皮肤、配色，一般由颜色、图片、字号、字体等组成，我们可以把它看作是视觉效果在不同场景下的可视资源，以及相应的配置集合。...比如，对于图片资源，我们并不需要关心它渲染出来的实际效果，只需要确定她渲染出来是一张固定宽高尺寸的区域，不影响页面布局，能把业务流程跑通即可。...在iOS中，我们通常会将主题的配置信息预先写到plist文件中，通过一个单例来控制APP应该使用哪种配置。Flutter也提供了类似的能力，由ThemeData来统一管理主题的配置信息。...以主题切换功能为例，我们希望为不同的主题提供不同的展示预览。 在Flutter中，我们可以使用Theme来对App的主题进行局部覆盖。
Android Studio 是 Android 开发的官方 IDE，它基于 JetBrains 的 IntelliJ IDEA。它的一个很酷的特性是自动将 Java 代码转换为 Kotlin。...最后，同样重要的是，看看 Android 官方的 Twitter 账户（@AndroidDev）。它非常活跃，经常会分享大量有用的信息。 5 如何在求职时脱颖而出？...先从 Android 开发的基础知识开始，了解它的不同寻常之处，然后再进入更多未知的领域。 7 Jetpack Compose 是什么？我应该学下吗？...这意味着许多公司还没有多少机会使用它，许多公司正在设法弄清楚如何在他们的应用中使用它。目前，很多工作都还没有这个要求。...你可以随时用 Compose 开发一个新的应用，看看它是什么样子。 8 小结 在从事了 10 年的 Android 开发工作后，如果要重新开始我的职业生涯，我就会像上面所说的那样做。
(color: Colors.white), 你可能已经明白了，这种方式的好处，基于主题来统一app类字体大小，这样不至于使得你的app花里胡哨的，风格看起来不统一，请注意copyWith可以帮你改变某些属性...我这里的实现方式是参考了digloag的弹出方式， Navigator.of(context, rootNavigator: true).push(new _DialogRoute( child:...5、SegmentedControl是苹果上的一个空间，flutter也有，只不过在使用的时候，需要import 'package:flutter/cupertino.dart';，用上后可以出去 image.png...解决的方式是：加上rootNavigator=true这个参数。...如果你遇到了代码复用或者说页面规模太大需要用很好的模式来分离逻辑的问题，不妨了解一下我的另外一篇文章flutter中使用bloc 9、有时候我们需要一个背景为图片，而且边缘是有弧度的背景，那么，有没有什么很好的办法来做到
来使用第三方字体， 那默认情况下 Flutter 使用的是什么字体呢？...会出现这个疑问，是因为有一天设计给我发了下面那张图，问我 “为什么应用在苹果平台上的英文使用的是 PingFang SC 字体而不是 .SF UI Display ” ？...正如下图所示，它们的 G 字母在显示效果上会有所差异，比如 平方的 G 有明显的转折线。 ? image 这时候我不禁产生的好奇，在 Flutter 中引擎默认究竟是如何选择字体？...和 defaultAccentTextTheme 中，所以应该是使用 .SF 相关字体才会，为什么会显示的是 PingFang SC 的效果？...，还有 PingFang 字体的存在，这时候我突然想起在之前的 《Flutter完整开发实战详解(十七、 实用技巧与填坑二)》 中，因为国际化多语言在 .SF 会出现显示异常，所以使用了 fontFamilyFallback
一、字体库首先，问一个我经常问的面试题：Flutter 在 Android 和 iOS 上使用了哪些字体？...这时候 iOS 上的 PingFang 和 .SF 就不够用了，需要调用如 Apple SD Gothic Neo 这样的超集字体库，而说到这里就需要介绍一个 Flutter 上你可能会遇到的...那 height 是什么呢？...添加的 Fallback 之后效果如上图左侧所示， 那 Fallback 的作用是什么？...那 FontFeature 有什么用呢？
在这篇文章中，Nash 告诉我们 BuildContext 的重要性以及如何使用它来编写更高效的 Flutter 程序。...WebSockets 是制作实时应用程序的好方法。在本教程中，Vibali Joshi 向我们展示了如何在 Flutter 中集成 WebSockets。...编写 Flutter package是回馈社区的好方法。在本教程中，Md Sadab Wasim 展示了如何在 Flutter 中创建package。...我已经编写软件 20 年了，其中 10 年是在移动领域，4 年是 Flutter 工程师。我还担任了至少 5 年的招聘经理，所以在这个视频中，我还谈到了会在候选人中寻找什么。...v=_7qv9zHEgTc Flutter Roadmap | How to Learn Flutter in 2022。有时弄清楚要学什么是学习中最难的部分。
你需要做的第一件事就是找到一个包含 “.ttf” 文件的开源图标库。那 “.ttf” 是什么文件？...TrueType 字体是 Mac OS X 和 Windows 上最常用的字体格式。我不知道其他类似的格式如 “.svg”, “.eot” 或者 “.woff” 是否都可以使用。...我在 GitHub 上发现了一个名为 weather-icons 开源 CSS 图标库。这是一个包含了 222 个精美天气主题的图标库。 Flutter 包 ?...我们编写了一个构造函数，它接受一个值 “codePoint”，这个值是图标的十六进制代码。我们很快就会看到一些关于它的东西。 到目前为止都很容易？那接下来是什么呢？ ? 容易的一步 ?...我们首先找到一个合适的 JSON 文件，他包含所有十六进制代码和名称。找到它，或者使用 web 抓取一个。这部分不是我做的，是 Nikhil 做的。这是一个简单的 JS web 爬虫。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
