原创 使用二階貝塞爾曲線畫愛心

簡介 上一篇這一篇讓你徹底搞懂貝塞爾曲線的原理中，我們介紹了貝塞爾曲線的原理。這一篇我們先用二階貝塞爾曲線來做一個應用 —— 繪製愛心。首先回顧一下二階貝塞爾曲線。 如上圖所示，經過推導得出的曲線上的點 P 的計算公式如下： 愛心繪製

2022-11-14 09:10:29

原创 這一篇讓你徹底搞懂貝塞爾曲線的原理

貝塞爾曲線介紹 我們在前面講了繪製自定義曲線，而實際開發過程還會遇到更復雜的圖形繪製，比如下面的這些圖形： 這時候就需要用到貝塞爾曲線了。下面是百科關於貝塞爾曲線的介紹。 貝塞爾曲線就是這樣的一條曲線，它是依據四個位置任意的點座標繪製

2022-11-14 09:10:29

原创 通過交互繪製貝塞爾曲線

前言 之前幾篇我們介紹了貝塞爾曲線的原理、繪製曲線和動效實現，這些都是代碼預設好的，如果我們要根據需要自行繪製曲線，就需要使用交互來實現了。本篇我們先來介紹簡單的交互式繪圖，通過獲取觸控位置來設定貝塞爾曲線的控制點，從而實現交互式繪製曲線。

2022-11-14 09:10:29

原创 Flutter 繪製自定義曲線、折線圖及波浪動效實現

簡介 上一篇用 Flutter 的 Canvas 畫點有趣的圖形我們介紹了使用 CustomPaint 繪製自定義形狀，可以看到有了圖形的平面繪製數學計算方法，我們可以畫出所需的形狀。本篇我們來介紹線條類圖形的繪製，並且結合 Animati

2022-11-14 09:10:29

原创 手把手教你實現一個流動的漸變色邊框

前言 記得在介紹 motion_toast一篇的時候，開篇有一張動圖，邊框是漸變色而且感覺是流動的。這個動效挺有趣的，當時也有人問怎麼實現，經過上一篇《讓你的聊天氣泡豐富多彩！》後，有了實現思路了。 實現思路 首先要實現但是漸變色邊框，這

2022-11-14 09:10:18

原创 Flutter 通過拖拽交互調整曲線控制點繪製圖形

前言 上一篇我們通過Listener獲取觸控點的位置作爲貝塞爾曲線的控制點，實現曲線的交互式繪製。不過，上一篇有個缺陷，控制點繪製完成後只能撤銷，沒法修改，如果要調整繪製的圖形的話會非常麻煩，這一篇我們來實現控制點的拖拽式移動，動態調整位置

2022-11-14 09:10:18

原创 貝塞爾曲線動起來的花樣炫酷極了

前面我們花了幾篇介紹了貝塞爾曲線的原理和繪製貝塞爾曲線，着實讓我們見識到了貝塞爾曲線的美。好奇心驅使我想看看貝塞爾曲線動起來會是什麼樣？本篇就藉由動畫驅動貝塞爾曲線繪製看看動起來的貝塞爾曲線什麼效果。 彩虹系列 通過動畫控制繪製的結束點

2022-11-14 09:10:18

原创 讓你的 App 的聊天氣泡豐富多彩！

前言 在聊天類應用中，通常用氣泡作爲聊天內容的背景色，比如微信的聊天背景，別人發過來的是白色的氣泡，自己發的是綠色的氣泡。 上面這種是比較普通的，這篇我們玩點有趣的，讓聊天氣泡是漸變色的。可能很多人會覺得漸變很簡單，給 Container

2022-11-14 09:10:18

原创 用貝塞爾曲線玩出來的花樣簡直不要太美

簡介 我們在這一篇讓你徹底搞懂貝塞爾曲線的原理介紹了貝塞爾曲線的實現原理，也用了二階貝塞爾曲線來繪製愛心。本篇我們來用三階貝塞爾曲線玩點好玩的。在開始之前，回顧一下貝塞爾曲線的原理。貝塞爾曲線其實就是用4個點控制曲線的繪製，具體過程如下面的

2022-11-14 09:10:18

原创 利用 Dio 完成數據更新的 Patch 請求

前言 這是 Dio 網絡請求的第三篇，我們將從淺到深完成 Dio 的學習。本篇介紹表單更新請求，利用 Patch 請求更新動態數據，需要做得準備工作如下： 拉取後臺新的代碼，項目地址：後臺源碼，拉到本地後，在項目目錄運行 node see

2021-12-19 18:59:12

原创 Dio —— Flutter 網絡請求之王者

在 Flutter 中，要說網絡請求插件，不得不提 dio，而且這是國人開發的開源插件，在 pub 上好評率達到99%，GitHub 也收穫了近萬star。借用官方文檔的一句話描述：dio是一個強大的Dart Http請求庫，支持Rest

2021-12-19 18:59:12 1

原创 Flutter 利用 Dio 完成數據刪除操作

前言 本篇介紹如何使用 Dio 提供的 delete 方法對接後臺的刪除接口。調試前需要啓動後臺工程，參考上一篇文章，運行後臺應用（同時應準備好後臺數據庫數據）。 界面交互 我們需要實現長按彈出列表元素來進行刪除操作，界面實現不是本篇的重點

2021-12-19 18:59:12 2

原创 實例解析山路十八彎的Flutter 2.0路由

前言 上一篇Flutter 2.0的路由把我搞懵了對 Flutter 2.0的路由做了介紹，看完介紹基本上還是雲裏霧裏。折騰了一天，終於把一個完整的示例弄出來了，一句話總結就是：山路十八彎！ 提示一下，本文篇幅較長，閱讀比較耗時（走山路肯

2021-12-19 18:59:12 2

原创 Flutter 實現自定義頁面切換轉場動畫

fluro 轉場動畫源碼 在使用自定義轉場動畫前，先扒一扒 fluro 的源碼，通過源碼可以發現這麼一個標準的轉場方法： RouteTransitionsBuilder _standardTransitionsBuilder(

2021-12-11 07:56:37 59

原创 Flutter 簡單易用的路由管理插件 fluro 簡介

前面兩篇文章我們介紹了Flutter 的原生導航器 Navigator 實現頁面跳轉，路由及路由攔截的使用，具體可以參考之前的文章。使用原生的路由基本上能夠滿足大部分需求，但如果想要對頁面做類似瀏覽器 url 那樣的路由，或者控制頁面跳轉的

2021-12-11 07:56:37