为精美，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 🌟 吧！