FWidgets 用心供给精致的组件，助您构建精巧的运用。

嘿，开发者，快停止构建 Old GUI！

为精美，FButton&FSwitch

假如你有留意到的话，你会发现，我们需要更多的精巧的 New GUI！

为协助开发者可以c I E {舒适的构建出具有精巧 GUI 的现代运用程序，【阿里巴巴-飞猪-Fliggy Android Team 技能团队】 推出了 FWidgets 系列组件。

就在前几天，我们开放了 FWidgets 的第一个组件 《FSuper》，获得了社区开发者们杰出的反应，现在该组i ] W N _ T K件现已获得了来自开发者们投出的 214 个 Star。

现在，我将为你介绍 FButton 和 FSwitch。

FButton 可以协助你构建五光十色的按钮元素，而 FSwitch. k u X j 将为你供给具有杰} 3 a ^ S出交互的开关元素。

为精美，FButton&FSwitch

✨ 特性

FBut* H d qton

  • 丰厚的 边角 作用

  • 精巧的 边框 装修

  • 渐变作用 也不在话下

  • 灵敏的 图标 支撑

  • 交心的 Loading) R , r 1 模式

  • 炫酷的交互 特效

  • 更具空间O – { @ H感的 暗影

FSwiy G W )tch

  • 支撑翻开、关闭的提示

  • 支撑为 Slider 设置装修

  • 支撑灵敏的装备可用状况

  • 更具空间感的 暗影

  • 杰出的开关交互体验

传送区

【传送门：FButton Github 主页 – 感谢您的 Star 】

【传送门：FButton Documentation】

【传送门：FSwitch Github 主页 – 感谢您q k / j T N ~ K的 Star 】

【传送门：FSwiW ^ l ( 4tch Documentation】

FButton

圆角 和 边框

为精美，FButton&FSwitch

// #1
FButton(
width: 130,
effect: true,
tU D 4 a / ` U m Cext: "FButton #1",
textColor: Colors.white,
color: Color(0xffFU ? 8 n z i P !F7043),
os A S D _ )nPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(2Y : h5),h V + [ Z h
),
// #2
FButton(} s q p ( D Y D
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: 6l 6 8 4 Y C m ~,
),
),
...

经过 FButton 可以非常快捷的构建一个有 圆角，有 边框 的按钮元素。

渐变色

为精美，FButton&FSwitch

// #1
FButton(
width: 100,
height: 60,
texa A & = / ) st: "#1",
textColor: Colors.white,
color: Color(0xffFFc900),
gradient: LinearGS Q  Q o 2 3 radient(coloU * ] s L wrs: [
Colorp ;  {(0xff00B= z 3 E f k v 10FF),
Color(0xffFFc900)H F z g E 8 7,
]),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(8),
)

经过 gradient 特点，可以构建带有– N H W G R渐变色的 FButton 你可以自由构– j | F 7建多种类型的渐变色。

运用 FButton，你可以 既要，也要，还要

图标

为精美，FButton&FSwitch

// #1
FBu ( q t Ltton(
width: 88,
height: 38,
padding: EdgeInsets? Y m J 3 {.all(0),
tex% M @ B  Jt: "Bac9 h V d 7 { Rk",
textColor: Colors.white,
color: Color(0xffffc900),
onPressed: () {
toast(contextu H @ x, "Back!");
},
clickEffect: true,
corner:
FButtonz e * r GCorner(
leftTopCs !  F $orner: 25,{ l 9 m
leftBottomCorner: 25,),* V s
iF : z A ~ { t Ymage: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 12,
),
imageMargin: 8,
),
// #3
FButton(
onPressed: () {},
image: Icon(
Icons.print,
color: Colors.grey,
),
imageMargin: 8,
imageAligg J Lnment: ImageAlignment.top,
text: "Print` p U  ] U r e",
textColor: Col` / d Nors.grey,
color: Colors.transl 3 ?pa J erent,
),

FButtb % Q * 0 ? a Xon 答应装备相对于文字的图_ [ B 8 6 ; 标，满足灵敏，和简单。

特效

为精美，FButton&FSwitch

FButton(
width: 200,
effect: true,
text: "Try Me!",
textColor: Colors.white,
color: Co2 E x | # h ; slor(0xffffc900),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(9),
spls { nashColor: Color(0xX P = S p b Kffff7043),
highlightColor: Color(0xffE6- X 9 9 q 4 m 25100).withOpacity(0.20),
hoverColor: Colors.redAccent.withOpaW h { Q h . ?city(0.16),
),

不论是( { R A j B b 9普通 Old 式按钮或是有特效的交互Y 1 $ (按钮，你只需把握 FButton 就够了。

暗影

为精美，FButton&FSwitch

FButton(
width: 200,
effect: true,
text: "Shadow",
textCl K u Jolor: Colors.white,
color: Color(0xffffc900),
onPressed: () {},
clickEffect: true,
corner: FButtonCorner.all(28),
shadowColor: Colors.black87,
shadowBluc l 7 K M r: _shadowBlur,
),

FButton 当然会为你供给快捷的暗影特点。

Loading

为精美，FButton&FSwitch

// #1
FButton(
effect: true,
text: "Click top load9 o ning",
textColor: ColorsB + A G } N n T.white,p J $
color: Color(0xff/ 9 x / w X l I kffc900),
onPressed: () {
print("Loading...");
},
clickEffect: truF / |  _ [ ) 3 Ae,
cr A s w ^ + Rorner: FButtonCorner.all(9),
lo@ s t 9adingSize: 15,
imageMargin: 6,
loadingStrokeWidth: 2,
clickLoading: true,
loadingColor: Colors.white,
loaM A q 0 ) 6 ldingText: "Loading...",
imageAlignment: ImageAlignment.top,
),
// #2
FButton(
width: 170,
height: 70,
effect: true,
text: "Click to l0 f [ Zoading",
textColor: Colors.white,
color: Color(0xffffc900),
onP# B & sresseP a Gd: () {
printQ H R I ,("Loading...");
},
clicF E }kEffect: true,
corner: FButtonCorner.all(9),
image: Icon7 z / s(
Icons.cloud_download,
size: 18,
con F Wlor: Colors.white,
),
imageMargiE ~ zn: 8,
loadingSize: 15,
loadingStL w 9rokeWidtu o V / X Nh: 2,
click5 Z 5 ) 3 Z mLoading: true,
loadingColor: Colors.white,
loadingText: "Loading...",
hideTexte F g 3 T ; O x 5OnLoading: true,
),

FButton 集成了 Loading 功能，这真是..太棒$ ^ $ N I了 。

FSwitch

可用状况 & 暗影

为精美，FButton&FSwitch

FSwitch(
onChans G * 5ged: (bool value) {
valuc [ ze_{ A w 6 ! I1 = value;
},
open: value_1,
eP e y ; | v *nable: enable_1,
shadow! o V 6 u YColor: Colors.black.withOpacity(0.5),
shadowBlur: 3.0,
),

FSwitch 供给p } s了可用状况装备W 7 w X V的基础才能，同时可以支撑非常快捷的暗影装备。

提示

为精美，FButton&FSwitch

/// #1
FSwitch(
width: 65.0,
height: 35.54 .    P38,
onChanged: (v) {},
closeChild: TextE X p d C + J ; N(
"Off",
style: TextStyle(
coloS h F / + { x C *r: Colors.white, fontSizeF p S _ 1 c: 11),
),
openCT @ J | H z * U GhilB / / o : k s vd: Text(
"On",
style: TextStyle(
color: Colors.white, foO Q HntR ? [ T ! J | O ?Size: 11),
),
),
...

在 FSwitch 中，你可以分别为翻开/关闭状况装备不同的提示样式，并且他们完成起来很简单。

Slider 装修

为精美，FButton&FSwitch

FSwitch(
width: 300,
height: 38,
onChanged: (A x + m ? ] U qbool value) {},
sliderChild: Text(
"",
style: TextStyle(fontSize: 20),
),
)

一个风趣的 FSwitch 当然会为你准备风趣的装备选项。

如何运用？

在项目 pubspec.yaml 文件中添加依靠：

pub 依靠方法b y j 6

  • FButton
dependencies:
fbutton: ^<版本号>

⚠️ 留意，请到 pub 获取 FButton 最新版本号

  • FSwitch
depend B e : xencies:
fswitch: ^<版本号>

⚠️ 留意，请到 pub 获取 FSwitch 最新版本号

git 依靠方法

  • FButton
dependencies:
fbuk : ~ `tton:
git:
url: 'git@github.com:Fliggy-Android-Team/fbutton.git'
ref: '<分支号 或 tag>'

⚠️ 留意，分支号 或 tag 请以 FButton 官方项目@ 4 h 5 Z c为准。

  • FSwitch
dependencies:
fswitch:
git:
url: 'git@github.com:Fliggy-Android-Team/fswitch.git'
ref: '<分支号 或 tag>'

⚠️ 留意，分支号 或 tag 请以 FSwitch 官方项目为准。

为精美，FButton&FSwitch

感觉 《FButton》 还不错？到 《FButton》的 Github 主页投出您认可的一个 Star 吧, R – /！

感觉《FSwitch》还不错？到 《FSwitch》的 Github 主页投出您认可的一个 Star 吧！