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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。