引言 在之间我已经介绍了关于Flutter的下载安装以及配置，还有开发工具Android Studio的配置，还不知道的同学可以看看我这篇博客——谷歌移动UI框架Flutter入门。...具体的代码我就不一一介绍了，可以先不用理解每一行代码的意思。其中的Text便是文本组件，只需将值写入括号，便可以在文本框中显示，然后是文本框的一些属性。接下来我们运行起来看一下。 ?...2.图片组件(Image) 接下来是图片组件，图片组件的作用无非就是显示图片，在Flutter中，Image有四种方式显示图片，我只介绍一种，就是显示网络图片，其它三种方式没有太大差别。...4.列表组件(GridView) 第二个列表组件，网格组件，该组件在如今的移动应用中也非常常见，最典型的便是系统相册。那么我们关心的是在Flutter中该如何去使用GridView呢？...，然后通过alignment属性可以决定文本组件的相对位置，看一下效果： ?
这是我参与「掘金日新计划 · 10 月更文挑战」的第 4 天，点击查看活动详情 ---- 1. 封装的目的 虽然 Flutter 中提供的组件众多，但并非所有组件都是复杂的。...通过 源码可以知道，本质上这个颜色属性是传入到 IconButton 组件构造方法中的。...效果如下： 说实话，国内的应用软件基本上不喜欢用 material 风格。对我个人来说，水波纹能给用户一个交互的反馈，本身是比较好的，但一个小小的图标按钮有水波纹，感觉怪怪的。...可能有人会疑惑，使用函数不是也能封装组件吗，通过函数参数也能控制构建的表现，它和分离组件有什么区别呢？其实两者在本质上并没有什么区别，目的是一致的：封装特点创建中的构建逻辑。...类中可以定义成员变量和成员方法，封装能力更强，更像一个独立的 个体 ，通过类封装相当于加入了 Widget 家族的正规军；通过函数封装，会显得比较零散，不利于分离和管理，但形式的比较灵活，相当于 游击队
人们记录灵感的方式有很多种，笔记是一种很好的方式，但仅仅通过文字的方式似乎有些局限。我更喜欢画板的方式，通过图形+文字的方式，把一个想法拆成几块，连上关系，再补两行注释，思路会自己“跑起来”。...我的目标也不复杂——不打断思路，让它们在该出现的时刻出现，生成尽量结构化的结果，能落地、能复用、能回看。下面我就按这四个入口，讲我怎么把它们揉进日常，怎么在 Flutter 里实现可用的组件。...一、侧栏为何存在：让操作与结果“挨得近一点” 我不喜欢那种“先去另一个页面生成，复制回来再粘贴”的流程。侧栏的意义是把“生成”放到手边，让我在写、画、翻素材时随手发起动作，结果就在当下的上下文里落地。...用一种“占位卡片”的策略：调用返回的是一个 model_url 和一张预览图（或缩略图），侧栏只插入一个占位卡片到笔记或画布边上，包含标题、预览图、尺寸、生成时间。...它更多是一组贴心的动作：在我需要素材的时候给我一张图，在我拿着纸面题目犹豫的时候给我一个拆解，在我只是想确认某段文字该不该删的时候给我一个简短的建议，在我考虑是否需要 3D 示意的时候先帮我把卡片放好。
Flutter七日游第四天：2018-12-19 天气：晴朗 零、前言 最近有些人问我怎么学的,操作这么6，有没有什么技巧。...下面的效果呈现，也就用了十几行代码而已，而且准确地表述了BoxFit的各种情况 ?...那么多情况，Row肯定不够使，想想昨天的卡片，Wrap能当此大任 //叠合模式数组 var colorBlendMode = [ BlendMode.clear,BlendMode.src,BlendMode.dst...，Android也好，Flutter也好，套路都是一样的 当你遇到很多种情况的问题时，都可以用这个套路，多分析，你才能巩固自己的知识库 ?...，已经有人填坑了， //需要Scaffold的context,而不是我认为的那个context var scContext;//先声明一下Scaffold的context @override
Image 3.png ---- 4.根据Flutter内置的类，我写了一个自动代码生成器 虽然直接也能用，不够要记住图标的unicode码，算了，还是跟Flutter看齐吧 注意：为了简单使用：...两个对应.png ---- 2.Flutter中传参，调用Android含参方法:三对应 ?...加参数.png ---- 2.3：加返回值的方法调用： 举什么例子，我想了一会，就来个MD5码吧 ?...：Card的shape 有人说学习的时候一个问题会牵扯到很多其他的问题，问题一多就无从下手 我只说一个字："栈"：来最后一波学习看源码的方法了,走起 ?...难道还有别的方法吗?
，当入栈一个新的路由时，原来的路由仍然会保存在内存中，如果想在路由没用的时候释放其所占用的资源，可以设置为 false fullscreenDialog 表示新的路由是否是一个全屏的模态对话框，在 ios...中若此参数为 true，新页面会从底部滑入，而不是水平方向 Navigator Navigator 是一个路由管理组件，它提供了打开和退出路由方法 Navigator 通过栈来管理活动路由集合，通常屏幕显示的页面就是栈顶路由...async 可查看这篇文章，Dart，随用随查 运行上面的代码，点击 "打开提示页面"，效果如下所示 image.png 打印的结果 I/flutter (23778): 路由返回值 我是返回值 需要注意的是... 1，参数是通过构造方法传入的 2，如果点击左上角，或者返回按钮进行返回，则页面返回的值为 null 命名路由 有名字的路由，给路由起一个名字，就可以通过名字直接打开路由了 路由表 路由表就是一个...路由生成钩子 在打开某些页面的时候可能需要做一些权限检测，如用户是否登录，是否需要密码等，如果每次打开路由的时候都要去判断一下会非常麻烦，这种情况可以通过 MaterialApp 实现 MaterialApp
默认情况下，当入栈一个新的路由时，原来的路由仍然会保存在内存中，如果想在路由没用的时候释放其所占用的资源，可以设置为 false fullscreenDialog 表示新的路由是否是一个全屏的模态对话框...，在 ios 中若此参数为 true，新页面会从底部滑入，而不是水平方向 Navigator Navigator 是一个路由管理组件，它提供了打开和退出路由方法 Navigator 通过栈来管理活动路由集合...方法中，异步执行这个函数，最终将返回值打印出来 如果不了解 async 可查看这篇文章，Dart，随用随查 运行上面的代码，点击 "打开提示页面"，效果如下所示 打印的结果 I/flutter (23778...): 路由返回值 我是返回值 复制代码 需要注意的是 1，参数是通过构造方法传入的 2，如果点击左上角，或者返回按钮进行返回，则页面返回的值为 null 命名路由 有名字的路由，给路由起一个名字...路由生成钩子 在打开某些页面的时候可能需要做一些权限检测，如用户是否登录，是否需要密码等，如果每次打开路由的时候都要去判断一下会非常麻烦，这种情况可以通过 MaterialApp 实现 MaterialApp
一开始我很拒绝Dart这门语言，一个默默无闻好多年的语言，跟着Flutter才为人所知晓，谷歌推了这么久的kotlin，用kotlin来开发多好啊，我们学习迁移的成本也能大大降低。...在这一年多的Flutter学习过程中，我发现谷歌这么做也有自己的考虑。首先Dart是谷歌自己的语言，想想它跟Oracle的官司打了多少年。...这些build方法都必须返回另一个Widget。 当我们新建一个Flutter项目的时候，默认给我们生成了一个计数器的demo。我们接下来就通过把玩这个项目来感受下flutter的魅力。...而且Flutter是一个响应式的框架，我们通过setState方法去更新一些状态，每当setState方法被调用的时候，状态会被标记为dirty，然后Flutter会重新绘制。...Flutter给我们内置了很多MD的图标，如果大家对MD的图标比较满意，那直接通过Icons这个类就可以获取，省的UI再切图了。 瞧瞧，简单这些点代码，我们就实现了一个美观的计数器app。
如果你有任何关于 Flutter 或 Dart 的消息想要与我分享，请在公众号给我留言。 ---- 这是我举办的第4期，以后每周一期，欢迎大家监督。...WebSockets 是制作实时应用程序的好方法。在本教程中，Vibali Joshi 向我们展示了如何在 Flutter 中集成 WebSockets。...编写 Flutter package是回馈社区的好方法。在本教程中，Md Sadab Wasim 展示了如何在 Flutter 中创建package。...我已经编写软件 20 年了，其中 10 年是在移动领域，4 年是 Flutter 工程师。我还担任了至少 5 年的招聘经理，所以在这个视频中，我还谈到了会在候选人中寻找什么。...whatsapp_unilink 帮助你的应用通过 HTTP links (universal links)与 WhatsApp 进行交互。
页面构建成View 在flutter模块的Flutter类中给我们提供了一个方法——createView。...通过该方法，我们可以将flutter页面构建成一个View。而View的相关操作想必对于Android开发者来说都不陌生，所以就通过addView将flutter页面添加到相应的地方。...页面构建成fragment 同样，flutter模块也提供了方法——createFragment，通过该方法就将flutter页面构建成一个fragment，然后根据fragment的操作将flutter...首先，关闭当前应用，注意：是要杀死当前应用所在进程，而不是退出应用。 2. 其次，在flutter模块中输入命令flutter attach，就会显示以下内容。 ? 3....4、总结 通过上面的一些讲解，相信就能够使用native+flutter的混合开发了。但细心一点就会发现，在前面的讲解中，flutter模块并没有与native项目进行通信，那么该如何通信尼？
---- 4.恭喜达成成就：Widget源码偷窥者, 成就奖励：三张卡片： 卡片初始属性：见白框(PS:属性会随着你的阅历变多哦) - - - ---- 二、Flutter卡牌游戏Start...,通过新手任务基本上更加熟悉了一些 Flutter还有哪些控件，建议看一下Flutter中文网，罗列的挺好的，下面一起学习一下 (PS:看了一下，真是多如鸡毛...吓得我不知从何入手) 所谓`打蛇打七寸...,擒贼先擒王`,小兵之后再收拾 通过Android和html+css，我领悟到，对于界面设计者而言，布局是至关重要的,所以先看容器 1.Layout布局容器之Row+Column--行+列 ?...Column.png ---- 恭喜完成成就：布局菜鸟---奖励卡片： - - - 恭喜解锁新卡片：Expanded，快去用用吧 Expanded意思是：使…伸展,看到下面的图,你应该就会明白...比如`margin`,看到`EdgeInsetsGeometry`我的心情是一脸懵X,不应该是数字吗?
本篇文章中，我们就通过编写一个简单的 Flutter 来了解他的开发流程。 这里我们要开发的 demo 很简单，只是在屏幕中间放一个按钮，点击的时候，模拟摇两个骰子并弹窗显示结果。...cd flutter_demo git checkout first_app_step1 由于是第一次写 Flutter 应用，我们对上面的代码是否能够按照预期执行还不是那么有信心，所以我们先打个 log...void _onPressed() { debugPrint('_onPressed'); } 保存后（会自动 Hot Reload），我们再次点击按钮，在我的设备上，打印出了下面这样的信息： I/...这里的第一行，就是我们打的。现在我们有足够的自信说，点击按钮后，会执行 _onPressed 方法了。 编写代码（2） 软件开发通常是一个螺旋式上升的过程，不可能通过一次编码、调试就完成。...生成签名的 key（如果你已经有了，跳过这一步）,为了让读者也可以编译，这里我把 key 也放到了项目中。
本文，我将解析怎么前构建一个用户交互的登录页面。这里，我使用 TextField 挂件，这方便用户输入用户名和密码。还使用 FlatButton 挂件，来处理一些动作。...当然，我还使用了 Image 挂件来设定登录页面的 logo。...UI 布局中，所有的挂件都会放在 Column 挂件中，然后存放在脚手架的 body 中。...'), ), ), flutter-logo.png 文件存放在 asset/images 文件夹中。...最后指定 Text 挂件以为新用户创建账号 这里我们可以通过 GestureDetector 挂件的 onTap() 功能进行导航操作。或者创建类似忘记密码按钮的 onPressed() 事件。
Flutter 里的 BuildContext 相信大家都不会陌生，虽然它叫 Context，但是它实际是 Element 的抽象对象，而在 Flutter 里，它主要来自于 ComponentElement...也能正常弹出。...既然我们说到通过 of(context) 去获取上层共享往下共享的 InheritedWidget ，那在哪里获取就比较好？ 还记得前面的 log 吗？...在第一个例子出错时，log 里就提示了一个方法，也就是 State 的 didChangeDependencies 方法。...最后，今天主要分享了在使用 BuildContext 时的一些注意事项和技巧，如果你对于这方面还有什么疑问，欢迎留言评论。
InheritedWidget InheritedWidget 是 Flutter 中非常重要的一个功能型 Widget，它可以高效的将数据在Widget 树中向下传递、共享，这在一些需要在 Widget...树中共享数据的场景中非常方便，如 Flutter 中，正是通过 InheritedWidget 来共享应用主题( Theme )和 Locale (当前语言环境)信息的。...Flutter 给我们提供了一个 InheritedWidget 组件，来帮助我们完成上面功能。...事件总线是在 Flutter 中实现跨组件通信的机制。它遵循发布 / 订阅模式，允许订阅者订阅事件，当发布者触发事件时，订阅者和发布者之间可以通过事件进行交互。...这些特点与其他平台的事件总线机制是类似的。 接下来，我们通过一个跨页面通信的例子，来看一下事件总线的具体使用方法。
首先来看一下我怎么来学习Flutter，我要了解每一个组件，同时，这又是一个App，所以，我的目标是直接生产一个App，里面就是对Flutter组件的介绍，同时写上一些demo以及源代码，这一个点子源于...验证 @override 下面的方法名是否是你父类中所有的，如果没有则报错 @override // build方法是StateLessWidget的构建方法，传递一个BuildContent...给我们封装好的一个UI库，如果要是有MaterialApp，我们需要在Dart文件的开头引用 import 'package:flutter/material.dart'; 使用 class MyApp...方法是StateLessWidget的构建方法，传递一个BuildContent暴露其在文档流中的位置 Widget build(BuildContext context){ return...，所以我们需要使用ListView，这个在Flutter是一个简单的列表组件，Flutter中还包含了其余的多种列表组件，这些以后再介绍。
上面这重复的代码，文件，文件夹统统能一键生成！...，头皮发麻 GetX实现了动态路由传参，也就是说直接在命名路由上拼参数，然后能拿到这些拼在路由上的参数，也就是说用flutter写H5，直接能通过Url传值，OMG！...BLoC或Controller类中调用你的路由)，当你的应用程序被编译到web时，你的路由将出现在URL中。...各位放心，这个问题，我也想到了，我特地在插件里面加上了自动回收的功能 如果你写的页面无法被回收，记得勾选autoDispose 怎么判断页面的GetxController是否能被回收呢？...PageView切换到某个页面的时候，才会调用对应Page页面的build方法；对于PageView页面，控制器的注入过程，不能写在类中了，需要将其移入到build方法中初始化。
接下来，人们会不会尝试使用Go来进行桌面和嵌入式应用的编写？ Dave Cheney：我乐于看到Go能在小的ARM处理器上有所表现。我们需要让编译器能针对不同的ARM生成相应的代码，这还比较简单。...他有几个让Go在Android上运行的办法：1）通过NDK，游戏应用可以访问画布、触摸事件、声音等；2）使用Java与Go相结合的办法。...这些模式的实现都在计划之中，但何时完成谁来完成，具体还没有时间表，文档可以说是第一步吧。 Brad Fitzpatrick：我想在连接器用Go重写之前都没时间做。...这些未来会解决吗，哪些是通过库来支持，哪些会通过修改语言？ Dave Cheney：在今年的GopherCon 会议上，有一种强烈的感觉，设计即使崩溃也能安全恢复的健壮应用是程序员的天职。...Q8：堆压缩在路线图上吗？还是要等到在2.0版本大改？ Brad Fitzpatrick：这个在路线图上。
前面的小节把常用的一些部件都介绍了，这节介绍下 Flutter 中的一些操作提示。...Flutter 中的操作提示主要有这么几种 SnackBar、BottomSheet、Dialog，因为 Dialog 样式比较多，放最后讲好了 SnackBar SnackBar 的源码相对简单 const...在 ListView 中增加一个 BottomSheet 的按钮，因为 BottomSheet 需要的 context 也不能是 Scaffold 下的 context，所以需要通过 Builder 进行包裹一层...AlertDialog 在 ListView 中增加一个 AlertDialog 的按钮，用于点击显示 AlertDialog 用，然后加入显示 AlertDilaog 的方法，并将按钮的 onPressed...糟糕透的翻译又来了：该方法通过 builder 参数来传入一个 Dialog 部件，dialog 下的内容被一个「模态障碍」阻隔，builder 的 context 和调用 showDialog 时候的
「我的」页面，我这里做的比较简单，上面的UI（本地音乐等）目前只是用来展示用，真正的功能有如下几点： 1.展示歌单（创建的歌单、收藏的歌单）2.创建新歌单3.对歌单进行操作 下面就开始吧。 1....一共分为两块：「创建的歌单」、「收藏的歌单」。 两个模块的 UI 其实是一样的，只不过分在了不同的列表中。 那么先来看一下返回的数据是什么样的： ?...其实就是控制歌单列表的显示和不显示，所以我们应该能想到一个组件：Offstage。...，并且通过点击回调来触发 setState。...在点删除的时候，调用 PlayListModel 里的删除方法并且通知刷新就好了。 这样整个「我的」页面大致就完成了。 4. 总结 其实这一篇没什么好总结的，把前面写好的东西拿来用就好了，非常简单。
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
