爲精美，FButton&FSwitch

FWidgets 用心提供精緻的組件，助您構建精美的應用。

嘿，開發者，快中止構建 Old GUI！

若是你有注意到的話，你會發現，咱們須要更多的精美的 New GUI！

爲幫助開發者可以溫馨的構建出擁有精美 GUI 的現代應用程序，【阿里巴巴-飛豬-Fliggy Android Team 技術團隊】 推出了 FWidgets 系列組件。

就在前幾天，咱們開放了 FWidgets 的第一個組件 《FSuper》，得到了社區開發者們良好的反饋，目前該組件已經得到了來自開發者們投出的 214 個 Star。

如今，我將爲你介紹 FButton 和 FSwitch。

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 官方項目爲準。

感受 《FButton》 還不錯？到 《FButton》的 Github 主頁投出您承認的一個 Star 🌟 吧！

感受《FSwitch》還不錯？到 《FSwitch》的 Github 主頁投出您承認的一個 Star 🌟 吧！