FWidgets takes care to provide elegant components to help you build elegant applications.

Hey developers, stop building Old GUI!

If you’ve noticed, we need more fancy New GUIs!

To help developers build modern applications with elegant GUIs in comfort, [Alibaba-Fliggy Mobile Technology team] launched the FWidgets family of components.

Just a few days ago, we launched our first FWidgets widget, FSuper, which has received great feedback from developers in the community and has already received 214 stars from developers.

Now, I’ll introduce you to FButton and FSwitch.

While FButton helps you build colorful button elements, FSwitch gives you switch elements that interact well.

✨ features

🧩 FButton

  • Rich edge effect

  • Exquisite border decoration

  • The gradient effect is no problem

  • Flexible icon support

  • Intimate Loading mode

  • Cool interactive effects

  • More spatial shadows

🧩 FSwitch

  • Support open and close prompt

  • Supports setting decorations for Sliders

  • Supports flexible configuration availability

  • More spatial shadows

  • Good switch interaction experience

🛸 transfer zone

🛸[Portal: FButton Github home page – Thanks to Star 🌟]

📖 [Portal: FButton documentation]

🛸[Portal: FSwitch Github home page – Thanks to Star 🌟]

📖 [Portal: FSwitch documentation]

🧩 FButton

🎈 Rounded corners and borders

// # 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,
  ),
),

...

Copy the code

FButton makes it easy to create a button element with rounded corners and borders.

🌈 gradients

// # 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),
)
Copy the code

With the gradient property, you can build an FButton with gradients. You can build many types of gradients freely.

With FButton, you can ask, ask, and 😄

🍭 icon

// # 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,
),

Copy the code

FButton allows you to configure ICONS relative to text, flexible enough, and simple.

💫The special effects

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 (0 xffe65100). WithOpacity (0.20), hoverColor: Colors. RedAccent. WithOpacity (0.16),),Copy the code

Whether it’s plain Old buttons or interactive buttons with special effects, FButton is all you need to know.

shadow

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,
),
Copy the code

FButton will of course provide you with quick shadow properties.

🔆 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,),Copy the code

FButton integrates Loading, which is really… That’s great 🎉.

🧩 FSwitch

Available states & shadows

FSwitch(
  onChanged: (bool value) {
    value_1 = value;
  },
  open: value_1,
  enable: enable_1,
  shadowColor: Colors.black.withOpacity(0.5),
  shadowBlur: 3.0,
),
Copy the code

The FSwitch provides the basic capability for usable state configuration, while supporting very convenient shadow configuration.

🌝 prompt

/// # 1FSwitch(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),
  ),
),

...

Copy the code

In FSwitch, you can configure different prompt styles for the on/off state, and they are easy to implement.

👀 Slider decoration

FSwitch(
  width: 300,
  height: 38,
  onChanged: (bool value) {},
  sliderChild: Text(
    "😃",
    style: TextStyle(fontSize: 20),
  ),
)
Copy the code

An interesting FSwitch will certainly have interesting configuration options ready for you.

How do I use 😃?

Add dependencies to the project pubspec.yaml file:

🌐 pub Dependent mode

  • FButton
Dependencies: fbutton: ^Copy the code

⚠️ Note, please go to pub to obtain the latest version number of FButton

  • FSwitch
Dependencies: fswitch: ^Copy the code

⚠️ Note, please go to pub to obtain the latest version number of FSwitch

🖥 Git dependency mode

  • FButton
dependencies:
  fbutton:
    git:
      url: '[email protected]:Fliggy-Android-Team/fbutton.git'
      ref: '< branch number or tag>'
Copy the code

⚠️ Note that the branch number or tag is subject to the official project of FButton.

  • FSwitch
dependencies:
  fswitch:
    git:
      url: '[email protected]:Fliggy-Android-Team/fswitch.git'
      ref: '< branch number or tag>'
Copy the code

⚠️ Note That the branch number or tag is subject to the official FSwitch project.

Feeling good about FButton? Go to FButton’s Github homepage to submit a Star you like 🌟!

Feeling good about FSwitch? Go to FSwitch’s Github page and submit a Star of your choice 🌟!