FWidgets 用心提供精緻的元件，助您構建精美的應用。
嘿，開發者，快停止構建 Old GUI！
如果你有注意到的話，你會發現，我們需要更多的精美的 New GUI！
為幫助開發者能夠舒適的構建出擁有精美 GUI 的現代應用程式，【阿里巴巴-飛豬-Fliggy Android Team 技術團隊】 推出了 FWidgets 系列元件。
就在前幾天，我們開放了 FWidgets 的第一個元件 《FSuper》，獲得了社群開發者們良好的反饋，目前該元件已經獲得了來自開發者們投出的 214 個 Star。
FButton 能夠幫助你構建豐富多彩的按鈕元素，而 FSwitch 將為你提供擁有良好互動的開關元素。
✨ 特性
? FButton
豐富的 邊角 效果
精美的 邊框 裝飾
漸變效果 也不在話下
靈活的 圖示 支援
貼心的 Loading 模式
炫酷的互動 特效
更具空間感的 陰影
? FSwitch
支援開啟、關閉的提示
支援為 Slider 設定裝飾
支援靈活的配置可用狀態
更具空間感的 陰影
良好的開關互動體驗
? 傳送區
? 【傳送門：FButton Github 主頁 - 感謝您的 Star ?】
? 【傳送門：FButton Documentation】
? 【傳送門：FSwitch Github 主頁 - 感謝您的 Star ?】
? 【傳送門：FSwitch Documentation】
? FButton
? 圓角 和 邊框
// #1
FButton(
width: 130,
effect: true,
text: "FButton #1",
textColor: Colors.white,
color: Color(0xffFF7043),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(25),
),
// #2
FButton(
width: 130,
effect: true,
text: "FButton #2",
textColor: Colors.white,
color: Color(0xffFFA726),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner(
leftBottomCorner: 40,
leftTopCorner: 6,
rightTopCorner: 40,
rightBottomCorner: 6,
),
),
...
複製程式碼通過 FButton 可以十分便捷的構建一個有 圓角，有 邊框 的按鈕元素。
? 漸變色
// #1
FButton(
width: 100,
height: 60,
text: "#1",
textColor: Colors.white,
color: Color(0xffFFc900),
gradient: LinearGradient(colors: [
Color(0xff00B0FF),
Color(0xffFFc900),
]),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(8),
)
複製程式碼通過 gradient 屬性，可以構建帶有漸變色的 FButton 你可以自由構建多種型別的漸變色。
使用 FButton，你可以 既要，也要，還要 ?
? 圖示
// #1
FButton(
width: 88,
height: 38,
padding: EdgeInsets.all(0),
text: "Back",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {
toast(context, "Back!");
},
clickEffect: true,
corner:
FButtonCorner(
leftTopCorner: 25,
leftBottomCorner: 25,),
image: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 12,
),
imageMargin: 8,
),
// #3
FButton(
onPressed: () {},
image: Icon(
Icons.print,
color: Colors.grey,
),
imageMargin: 8,
imageAlignment: ImageAlignment.top,
text: "Print",
textColor: Colors.grey,
color: Colors.transparent,
),
複製程式碼FButton 允許配置相對於文字的圖示，足夠靈活，和簡單。
? 特效
FButton(
width: 200,
effect: true,
text: "Try Me!",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(9),
splashColor: Color(0xffff7043),
highlightColor: Color(0xffE65100).withOpacity(0.20),
hoverColor: Colors.redAccent.withOpacity(0.16),
),
複製程式碼不論是普通 Old 式按鈕或是有特效的互動按鈕，你只需掌握 FButton 就夠了。
陰影
FButton(
width: 200,
effect: true,
text: "Shadow",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(28),
shadowColor: Colors.black87,
shadowBlur: _shadowBlur,
),
複製程式碼FButton 當然會為你提供快捷的陰影屬性。
? Loading
// #1
FButton(
effect: true,
text: "Click top loading",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {
print("Loading...");
},
clickEffect: true,
corner: FButtonCorner.all(9),
loadingSize: 15,
imageMargin: 6,
loadingStrokeWidth: 2,
clickLoading: true,
loadingColor: Colors.white,
loadingText: "Loading...",
imageAlignment: ImageAlignment.top,
),
// #2
FButton(
width: 170,
height: 70,
effect: true,
text: "Click to loading",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {
print("Loading...");
},
clickEffect: true,
corner: FButtonCorner.all(9),
image: Icon(
Icons.cloud_download,
size: 18,
color: Colors.white,
),
imageMargin: 8,
loadingSize: 15,
loadingStrokeWidth: 2,
clickLoading: true,
loadingColor: Colors.white,
loadingText: "Loading...",
hideTextOnLoading: true,
),
複製程式碼FButton 整合了 Loading 功能，這真是..太棒了 ?。
? FSwitch
可用狀態 & 陰影
FSwitch(
onChanged: (bool value) {
value_1 = value;
},
open: value_1,
enable: enable_1,
shadowColor: Colors.black.withOpacity(0.5),
shadowBlur: 3.0,
),
複製程式碼FSwitch 提供了可用狀態配置的基礎能力，同時能夠支援十分便捷的陰影配置。
? 提示
/// #1
FSwitch(
width: 65.0,
height: 35.538,
onChanged: (v) {},
closeChild: Text(
"Off",
style: TextStyle(
color: Colors.white, fontSize: 11),
),
openChild: Text(
"On",
style: TextStyle(
color: Colors.white, fontSize: 11),
),
),
...
複製程式碼在 FSwitch 中，你可以分別為開啟/關閉狀態配置不同的提示樣式，而且他們實現起來很簡單。
? Slider 裝飾
FSwitch(
width: 300,
height: 38,
onChanged: (bool value) {},
sliderChild: Text(
"?",
style: TextStyle(fontSize: 20),
),
)
複製程式碼一個有趣的 FSwitch 當然會為你準備有趣的配置選項。
? 如何使用？
在專案 pubspec.yaml 檔案中新增依賴：
? pub 依賴方式
- FButton
dependencies:
fbutton: ^<版本號>
複製程式碼⚠️ 注意，請到 pub 獲取 FButton 最新版本號
- FSwitch
dependencies:
fswitch: ^<版本號>
複製程式碼⚠️ 注意，請到 pub 獲取 FSwitch 最新版本號
? git 依賴方式
- FButton
dependencies:
fbutton:
git:
url: 'git@github.com:Fliggy-Android-Team/fbutton.git'
ref: '<分支號 或 tag>'
複製程式碼⚠️ 注意，分支號 或 tag 請以 FButton 官方專案為準。
- FSwitch
dependencies:
fswitch:
git:
url: 'git@github.com:Fliggy-Android-Team/fswitch.git'
ref: '<分支號 或 tag>'
複製程式碼⚠️ 注意，分支號 或 tag 請以 FSwitch 官方專案為準。
