What is Flutter?
Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台（如今是全平台）开发高质量原生 UI 的移动 SDK。Flutter 兼容现有的代码，免费而且开源，在全球开发者中普遍被使用.android
What is Uplabs?
Uplabs[1]是设计师和开发人员寻找，分享和购买灵感和资源以构建应用和网站的地方。git
在这里，每一个人均可以：github
1. 浏览并在咱们的Material Design（Android），iOS和macOS以及Site的平常展现中找到灵感。编程
2. 搜索特定的UI元素和解决方案;微信
3. 分享她/他的做品（设计，图书馆，片断，应用程序，网站）做为灵感或免费赠品;ide
4. 出售她/他的做品[2](主题，模板，图标等)。flex
Uplabs上有不少免费的设计图，开发人员能够选取其中一个，好比说Google maps。动画
能够看到右边有xd的图标，表示该项目下载下来以后须要用Adobe XD 打开，固然也支持sketch、PS、Figma等等。网站
打开以后，点击右上角的预览按钮可以预览原型交互，对于实现交互细节很是重要。ui
你还能够将设计稿经过插件(好比蓝湖XD)导出到蓝湖平台，至关于一个免费的UI大师就位了。
总的来讲，对于Flutter开发者而言，这里就是一座宝库。
许多用原生技术都难以实现或者较难实现的交互，运用Flutter，在锻炼你的Flutter技能同时还能有一个满意😊的结果。
How to implement ？
咱们能够来实现一个简单的过渡效果
问题：如今经过UI图能够得知正方形的初始大小为100，起始位置为居中、距离底部100px，通过过渡后的位置为居中、距离底部500px,同时大小改成300，设置圆角为30.
知道了起点和终点，咱们能够结合Stack和Positioned来完成位置的变化。
Stack( children: <Widget>[ Positioned( bottom: 100, left: (screenWidth - 100) / 2, //center width: 100, height: 100, child: DecoratedBox( decoration: BoxDecoration( color: Colors.red, border: Border.all(), borderRadius: BorderRadius.all(Radius.circular(0)), ), ), ), ], )
接着咱们来完成动画，你能够选择组合多个动画，但这样会稍显麻烦，其实咱们只须要肯定一个动画，其它的动画只是附带引发的变化而已。
这里选用bottom的偏移进行动画，开始的时候距离底部为100，结束以后距离底部为500，时间咱们挑选为500毫秒。
AnimationController animationController;Animation animation;//offset bottomdouble offset = 0;@overridevoid initState() { super.initState(); animationController = AnimationController(duration: Duration(milliseconds: 500), vsync: this); animation = Tween<double>(begin: 0.0, end: 500.0-100.0).animate(animationController) ..addListener(() { // notify ui update setState(() { offset = animation.value; }); });}
当动画进行时，offset就能够更新为动画这时候的值，而后经过setState通知UI更新。
这时，就须要更改bottom的表达式为：
bottom: 100 -> bottom:100+offset
可是为了引发正方形其它参数的变化，所以，咱们最好是获得一个offset占总偏移量的比重。
get currentPercent => offset / (500.0-100.0);
接着咱们的表达式也能够用另外一种形式来写：
bottom: 100 -> bottom:100+offset -> bottom:100+(500.0-100.0)*currentPercent
用这样的逻辑，咱们即可以完成上述的过渡效果。
Stack( children: <Widget>[ Positioned( // start 100, center end 500 center bottom: 100 + (500 - 100) * currentPercent, left: (screenWidth - (100 + (300 - 100) * currentPercent)) / 2, width: 100 + (300 - 100) * currentPercent, height: 100 + (300 - 100) * currentPercent, child: GestureDetector( onTap: () { if (animationController.status == AnimationStatus.completed) { animationController.reverse(); } else { animationController.forward(); } }, child: DecoratedBox( decoration: BoxDecoration( color: Colors.red, border: Border.all(), borderRadius: BorderRadius.all(Radius.circular(30 * currentPercent))))), ) ],)
处理手势
在上面的代码中咱们已经套上了一层GestureDetector，而后经过onTap回调来处理点击事件，这里再进一步，再加上拖动效果。
垂直方向的手势监听能够经过onVerticalDragUpdate来处理，根据返回的DragUpdateDetails参数，能够获取的滑动距离，咱们能够根据它来改变offset。
onVerticalDragUpdate: (details) { // scrollUp means -= offset -= details.delta.dy; if (offset > 400) { offset = 400; } else if (offset < 0) { offset = 0; } setState(() {});},
当手指离开屏幕的时候，咱们再根据offset的大小和状态经过动画移动到合适的位置。
须要注意的是动画开始的值也就是begin是变化的，所以咱们的动画也须要动态建立。
onVerticalDragEnd: (_) { if (isEnd) { if (currentPercent >= 0.7) { animate(true); } else { animate(false); } } else { if (currentPercent >= 0.3) { animate(true); } else { animate(false); } }},
isEnd表明处于结束位置，再来看看动画。
/// 滑动到开始或结束位置,Swipe to the start or end position////// [end] true is the end position, otherwise the start position/// [end] 为true是结束位置 反之是开始位置void animate(bool end) { animationController = AnimationController( duration: Duration(milliseconds: (1 + 500 * (isEnd ? currentPercent : (1.0 - currentPercent))).toInt()), vsync: this); animation = Tween<double>(begin: offset, end: end ? 400.0 : 0.0).animate(animationController) ..addListener(() { setState(() { offset = animation.value; }); }) ..addStatusListener((status) { if (status == AnimationStatus.completed) { isEnd = !isEnd; } }); animationController.forward();}
begin的值都是offset，只是end的值须要经过是滑动到开始或结束位置而改变，须要注意的就是动画时间也须要根据偏移量offset有所变化。
其它更为复杂的交互也不过是同一个套路，你能够查看flutter_challenge_googlemaps[3]来了解它，效果图以下：
Join in Flutter-UI-Challenges
为了让更多的开发者尝试Flutter技术，在体会到Flutter魅力的同时完成精美的交互，我在GitHub上建立了Flutter-UI-Challenges[4]这个组织，开发者能够经过实现Uplabs[5]中一个UI挑战来加入咱们。
若是你完成了其中一个挑战，恭喜你，若是你想提交并加入咱们，那么能够在 JoinUs[6]中提Issue，格式以下：
Issue名称的格式为flutter_chanllenge_xx，好比flutter_challenge_googlemaps.
内容请附上 Uplabs 上UI挑战的网址和GitHub相应实现的网址。
注意: 请给Issue打上joinus标签。
咱们会对其进行评审以决定是否能够经过，评审内容包括：
•效果是否相符？
完成度至少在80%以上，
•质量
咱们不只要求能实现精美的交互效果，同时也追求更高的代码的质量，完善且符合dart规范的注释和精简有力的代码是咱们的追求。
•符合规范
项目名请以flutter_chanllenge_开头
Readme的格式请参考flutter_challenge_googlemaps[7]
要求有符合Dart文档规范[8]的注释和合理的代码拆分。
最后
期待您的加入。
===========分割线 ==========
若是你想了解更多关于MVVM、Flutter、响应式编程方面的知识，欢迎关注我。
你能够在如下地方找到我：
简书：https://www.jianshu.com/u/117f1cf0c556
掘金：https://juejin.im/user/582d601d2e958a0069bbe687[9]
Github: https://github.com/ditclear[10]
References
[1] Uplabs: https://www.uplabs.com/challenges[2] 出售她/他的做品: https://www.uplabs.com/sell[3] flutter_challenge_googlemaps: https://github.com/flutter-ui-challenges/flutter_challenge_googlemaps[4] Flutter-UI-Challenges: https://github.com/flutter-ui-challenges[5] Uplabs: https://www.uplabs.com/challenges[6] JoinUs: https://github.com/flutter-ui-challenges/JoinUs[7] flutter_challenge_googlemaps: https://github.com/flutter-ui-challenges/flutter_challenge_googlemaps/blob/master/README.md[8] Dart文档规范: http://dart.goodev.org/guides/language/effective-dart[9] https://juejin.im/user/582d601d2e958a0069bbe687: https://links.jianshu.com/go?to=https%3A%2F%2Fjuejin.im%2Fuser%2F582d601d2e958a0069bbe687[10] https://github.com/ditclear: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fditclear
本文分享自微信公众号 - Android群英传（android_heroes）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。