吉原拉面-CSDN博客

原创一款Flutter伪自定义BottomAppBar

https://github.com/yumi0629/FlutterUI/tree/master/lib/bottomappbar 使用Flutter原生的FloatingActionButton+BottomAppBar实现，配合Scaffold使用更舒服，适合不喜欢自己用Widget组合自定义BottomAppBar的小伙伴。实现思路为：1、自定义floatingActio...

2019-07-25 11:06:03 891

原创 Flutter WebView与JS交互简易指南

本文采用Flutter官方WebView插件：https://pub.dartlang.org/packages/webview_flutter WebView与JS互相调用是一个刚需，但是貌似现在大家写的文章讲的都不是很清楚，我这个简易指南简单粗暴地分为两部分：JS调用Flutter和Flutter调用JS，拒绝花里胡哨，保证一看就懂，一学就会。开始之前先简单了解一下官方WebVi...

2019-04-02 10:47:33 3115

原创用Flutter实现一个涂鸦和加水印功能

本文涉及的知识点：截图、图片保存、根据用户手势实时绘制canvas。GitHub地址：https://github.com/yumi0629/FlutterUI/tree/master/lib/scrawl先上效果图：需求分析这次的想法是移植自项目中的一个小功能：截屏当前页面，添加涂鸦功能后，分享给第三方APP。分享功能我们暂不讨论，使用插件可以轻松完成，重...

2018-11-23 12:14:34 2949 1

原创用Flutter实现一个仿Twitter的点赞效果

这次依然是补作业，之前在写仿“探探”左滑/右滑的效果的时候，设计稿底部的喜欢Icon其实是有类似于Twitter点赞那种的动效的，但是因为时间原因我偷懒没写。惯例先上效果图： GitHub地址：https://github.com/yumi0629/FlutterUI/tree/master/lib/likebutton 整体算法是参照了GitHub上star最多的...

2018-11-17 22:27:54 1957

原创 Flutter：教你用CustomPaint画一个自定义的CircleProgressBar

注意：这其实是一篇CustomPaint的使用教程！！源码地址：https://github.com/yumi0629/FlutterUI/tree/master/lib/circleprogressbar 在Flutter中，CustomPaint就像是Android中的Paint一样，可以用它绘制出各种各样的自定义图形。确实，Paint的使用比较复杂，我觉得直接讲A...

2018-11-03 16:12:55 7327

原创用Flutter实现一个仿“探探”的左右滑动选择喜欢/不喜欢的效果

写在前面，效果已经基本OK了，但是有些细节还没处理好。暂时主要有三个问题：用户手势到达屏幕边缘时释放，如果旋转角度过小，动画总感觉有些不流畅（也可能是我的错觉吧）；给数据刷新提供的API还没想好，现在塞数据比较麻烦；因为UI设计是根据用户手势移动布局位置的，因此用户每次手势位置改变，都需要刷新布局，现在是用setState的方式去刷新的，不清楚在布局复杂的情况下是否会有性能问题。...

2018-10-25 17:47:24 4006

原创 Flutter：Slivers大家族，让滑动视图的组合变得很简单！

文中所有示例代码请点击：https://gitee.com/yumi0629/FlutterUI/tree/master/lib/sliver 今天呢，我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法。开发过列表布局的同学们应该对Slivers系列的控件不陌生，或多或少都用过这个库中的控件，来解决复杂的滑动嵌套布局。比如之前讲Hero的时候提到的下面这个...

2018-10-23 13:44:05 18551 3

原创谈一谈Flutter中的共享元素动画Hero

如果你是一名安卓开发者，应该很熟悉共享元素变换（Shared Element Transition）这个概念，它可以通过几行代码，就在两个Activity或者Fragment之间做出流畅的转场动画。 Google把这个概念也带到了Flutter里面，这就是我们今天要讲的主角——Hero控件。通过Hero，我们可以在两个路由之间，做出流畅的转场动画。注意，是两个路由（Route），在Flu...

2018-10-19 09:57:26 3798 2

原创 Flutter：手把手教你实现一个仿QQ侧滑菜单的功能

一个类似于QQ侧滑菜单的功能，支持从上、下、左、右四个方法打开菜单栏。可以通过自定义transform实现更加炫酷的动效！先上效果图：slide from left.gifslide from right.gifslide from top.gifGithub地址：https://github.com/yumi0629/SlideDrawer使用方法：...

2018-10-16 10:55:38 3006

原创 Flutter中如何判断当前运行模式是Debug还是Product？

说这个之前，我们先来回顾一下 Flutter的四种运行模式：Debug、Release、Profile和test ，在实际开发中，我们往往需要根据当前运行模式的不同，选择不同的操作，比如在Debug模式启用Log、在生产模式关闭Log。如果你是一名Android开发者，肯定对于这个不陌生，在Android中，有一个根据gradle配置自动生成的BuildConfig类来判断当前的运行模式...

2018-10-11 09:49:34 9663

Flutter提供了很多处理触摸事件的控件，例如InkWell和InkResponse可以处理点击、双击、长按等事件，将它们包裹在需要响应触摸事件的控件外部就可以了，而且InkWell和InkResponse还会添加一个水波纹的点击效果，InkResponse还可以设置水波纹的形状。但是，InkWell和InkResponse都不会做任何的渲染工作，它们只是更新了父级Material Widg...

2018-09-27 14:48:44 4799 1

原创 Flutter：在widget tests中调用Image.network()控件crash？

原文地址：Testing tidbit #2 - Why does using Image.network crash widget tests? 在没有真机和模拟器的时候，使用widget tests来测试是很有用的。而且test中的自动点击、滑动等的模拟，可以为你节省很多时间，因为等App运行起来，你可能需要盯着屏幕上的Waiting for emulator to start...好几...

2018-09-26 17:18:12 2805

原创这可能是最早的RxDart使用入门教程。。。

原文地址：RxDart: Magical transformations of Streams（国际惯例，英文好的请去看原文，我的翻译可能会省去一些东西，同时加入一些自己的想法，便于自己理解。与其说是一篇翻译，不如说是一份自己的学习笔记。）在这篇文章中，我们将来谈一谈如何使用RxDart对Streams进行各种神奇对变换，我会重点介绍RxDart中的常用函数，同时讲解对应的App。 ...

2018-09-19 17:59:14 6711 3

原创 Flutter中如何利用StreamBuilder和BLoC来控制Widget状态

参考文章：Reactive Programming - Streams - BLoC（为了便于阅读，略去了原文中的一些跟StreamBuilder和Bloc无关的拓展概念，比如RxDart、Demo的解释等，想要进一步了解的可以移步原文。）先粗略讲点关于Stream的东西 Stream其实类似于Rx大家族，也是一种对于数据流的订阅管理。Stream可以接受任何类型的数据，值、事件、对象...

2018-09-18 16:19:11 8701 1

原创 Flutter更新showDialog中的内容

很多人在用showDialog的时候应该都遇到过这个问题，使用showDialog后，通过setState()无法更新当前dialog。其实原因很简单，因为dialog其实是另一个页面，准确地来说是另一个路由，因为dialog的关闭也是通过navigator来pop的，所以它的地位跟你当前主页面一样。这个概念一定要明确，因为无论在Android或iOS中，daliog都是依附于当前主页面的...

2018-08-22 11:08:17 15179 2

原创 Flutter的四种运行模式：Debug、Release、Profile和test

Flutter有四种运行模式：Debug、Release、Profile和test，这四种模式在build的时候是完全独立的。Debug Debug模式可以在真机和模拟器上同时运行：会打开所有的断言，包括debugging信息、debugger aids（比如observatory）和服务扩展。优化了快速develop/run循环，但是没有优化执行速度、二进制大小和部署。命令flut...

2018-08-21 15:53:26 24207

原创 Flutter中的代码混淆

原文链接：https://github.com/flutter/flutter/wiki/Obfuscating-Dart-Code 以下内容均来自Flutter Github官方Wiki。代码混淆可以隐藏你的Dart代码中的函数和类名，让反编译App变得困难。注：Dart的混淆还没有经过完全的测试，如果发现问题请到GitHub上提 issue 。关于混淆的问题，还可以参考...

2018-08-21 15:02:54 4675 1

原创关于Flutter的渠道（channels）：master、dev和beta

Flutter有以下三个渠道（channel），顺序按照稳定性依次增加：master 当前代码树的顶端，最新的版本。一般有很多新功能，但是不保证以后会不会砍掉。dev 以前叫alpha，是最新的完全测试过的版本。也包含了新功能，但是也会有一些"bad" dev builds，可以查看 Bad Builds 列表。beta 每隔几周都会选取近几个月中最好的一个dev...

2018-08-21 10:35:19 11300 1

翻译 Flutter中的国际化：如何写一个多语言的App

原文链接：https://www.didierboelens.com/2018/04/internationalization---make-an-flutter-application-multi-lingual/ 这篇文章介绍了一种让你的Flutter App支持多语言的方法，用户可以选择一种不同于手机设置中设置的语言。难度：中等前言国际化已经被讨论了很多次了，官方关...

2018-08-20 16:16:34 5623

原创 Flutter去除右上角Debug标签

在MaterialApp初始化的时候，设置debugShowCheckedModeBanner: false即可：void main(){ runApp(new MyApp());}class MyApp extends StatefulWidget { @override _MyAppState createState() => new _MyAppState(...

2018-08-20 14:49:18 12986

原创 Flutter如何强制竖屏

如何在用户旋转屏幕的时候强制竖屏？解决方法：void main(){ /// /// 强制竖屏 /// SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown ]); runApp(new M...

2018-08-20 14:43:46 7160 5

翻译 Flutter键盘不遮挡输入框，保证输入框获取焦点时可见

翻译自原文：https://www.didierboelens.com/2018/04/hint-4-ensure-a-textfield-or-textformfield-is-visible-in-the-viewport-when-has-the-focus/ 2018.09.10更新：如果你更新了最新版本的Flutter SDK，控件EnsureVisibleWhenFocu...

2018-08-20 14:32:50 12381 11

原创如何快速在macOS上搭建Flutter开发环境（编辑器Android Studio）

注：1、以下教程中如果出现下载失败的情况，请挂VPN尝试。 2、安装过程中有些步骤等待会比较漫长，请一定，要有耐心！！！Step 1 AS plugs库下载Flutter和Dart插件搜索Flutter即可，安装时会提示你需要同时安装Dart插件，也就是说你装了Flutter后自带Dart插件，不需要额外安装Dart。如果出现网络超时，插件一直下不下来的情况，请在AS设置中...

2018-08-17 13:03:59 5755 1

原创 Flutter：实现一个滑动头部折叠的动画效果

更新：关于Slivers的具体用法，请看这篇文章：Flutter：Slivers大家族，让滑动视图的组合变得很简单！本文写的只是SliverAppBar的用法，实际上使用Slivers可以实现多种折叠效果。 Android和iOS中都有类似的滑动折叠效果，Flutter官方也提供了NestedScrollView控件来实现类似的效果，但是因为Flutter的一些特性，布局容易出现溢出，...

2018-08-17 12:59:14 13845 10

原创仿QQ长按弹出复制、删除等浮层菜单

项目地址：https://github.com/yumi0629/TipMenu效果图：1528704163048.jpg1528704208814.jpg一款仿照QQ的长按/点击弹出复制、删除等浮层菜单控件。暂时支持向上、向下两个方向弹出。可以自定义字体、背景颜色。注：使用Kotlin书写。使用方法： val menus = ArrayList<String>() m...

2018-06-11 16:33:33 1859 2

原创十分钟带你看懂Android-skin-support换肤框架，完美实现夜间模式

如题，这篇文章我讲的非常通俗易懂，是为了方便小白能够大致了解这个框架的粗略实现过程，大神们请绕道哦～最近在做夜间模式，引用了ximsfei大神的Android-skin-support换肤框架来实现。该框架的整体的实现思想是：自定义ActivityLifecycle来记录Activities的生命周期，在每一个Activity执行完onResume()后，将Activity和LazySkinO...

2018-05-21 15:30:23 4892

吉原拉面