From then on, developers only need to master one Button component, which is enough.

Related tags

Templates fbutton
Overview

FButton

From then on, developers only need to master one Button component, which is enough.

Support corners, borders, icons, special effects, loading mode, high-quality Neumorphism style.

Author:Newton([email protected])

English | 简体中文

Like it? Please cast your Star 🥰

Features

  • Rich corner effect

  • Exquisite border decoration

  • Gradient effect

  • Flexible icon support

  • Intimate Loading mode

  • Cool interaction Special effects

  • More sense of space Shadow

  • High-quality Neumorphism style

🛠 Guide

⚙️ Parameters

🔩 Basic parameters

Param Type Necessary Default desc
onPressed VoidCallback true null Click callback. If null, FButton will enter an unavailable state
onPressedDown VoidCallback false null Callback when pressed
onPressedUp VoidCallback false null Callback when lifted
onPressedCancel VoidCallback false null Callback when cancel is pressed
height double false null height
width double false null width
style TextStyle false null text style
disableStyle TextStyle false null Unavailable text style
alignment Alignment false null alignment
text String false null button text
color Color false null Button color
disabledColor Color false null Color when FButton is unavailable
padding EdgeInsetsGeometry false null FButton internal spacing
corner FCorner false null Configure corners of Widget
cornerStyle FCornerStyle false FCornerStyle.round Configure the corner style of Widget. round-rounded corners, bevel-beveled
strokeColor Color false Colors.black Border color
strokeWidth double false 0 Border width. The border will appear when strokeWidth > 0
gradient Gradient false null Configure gradient colors. Will override the color
activeMaskColor Color Colors.transparent The color of the mask when pressed
surfaceStyle FSurface false FSurface.Flat Surface style. Default [FSurface.Flat]. See [FSurface] for details

💫 Effect parameters

Param Type Necessary Default desc
clickEffect bool false false Whether to enable click effects
hoverColor Color false null FButton color when hovering
onHover ValueChanged false null Callback when the mouse enters/exits the component range
highlightColor Color false null The color of the FButton when touched. effect:true required

🔳 Shadow parameters

Param Type Necessary Default desc
shadowColor Color false Colors.grey Shadow color
shadowOffset Offset false Offset.zero Shadow offset
shadowBlur double false 1.0 Shadow blur degree, the larger the value, the larger the shadow range

🖼 Icon & Loading parameters

Param Type Necessary Default desc
image Widget false null An icon can be configured for FButton
imageMargin double false 6.0 Spacing between icon and text
imageAlignment ImageAlignment false ImageAlignment.left Relative position of icon and text
loading bool false false Whether to enter the Loading state
loadingWidget Widget false null Loading widget in loading state. Will override the default Loading effect
clickLoading bool false false Whether to enter Loading state after clicking FButton
loadingColor Color false null Loading colors
loadingStrokeWidth double false 4.0 Loading width
hideTextOnLoading bool false false Whether to hide text in the loading state
loadingText String false null Loading text
loadingSize double false 12 Loading size

🍭 Neumorphism Style

Param Type Necessary Default desc
isSupportNeumorphism bool false false Whether to support the Neumorphism style. Open this item [highlightColor] will be invalid
lightOrientation FLightOrientation false FLightOrientation.LeftTop Valid when [isSupportNeumorphism] is true. The direction of the light source is divided into four directions: upper left, lower left, upper right, and lower right. Used to control the illumination direction of the light source, which will affect the highlight direction and shadow direction
highlightShadowColor Color false null After the Neumorphism style is turned on, the bright shadow color

📺 Demo

🔩 Basic Demo

// FButton #1
FButton(
  height: 40,
  alignment: Alignment.center,
  text: "FButton #1",
  style: TextStyle(color: Colors.white),
  color: Color(0xffffab91),
  onPressed: () {},
)

// FButton #2
FButton(
  padding: const EdgeInsets.fromLTRB(12, 8, 12, 8),
  text: "FButton #2",
  style: TextStyle(color: Colors.white),
  color: Color(0xffffab91),
  corner: FCorner.all(6.0),
)

// FButton #3
FButton(
  padding: const EdgeInsets.fromLTRB(12, 8, 12, 8),
  text: "FButton #3",
  style: TextStyle(color: Colors.white),
  disableStyle: TextStyle(color: Colors.black38),
  color: Color(0xffF8AD36),

  /// set disable Color
  disabledColor: Colors.grey[300],
  corner: FCorner.all(6.0),
)

By simply configuring text and onPressed, you can construct an available FButton.

If onPressed is not set, FButton will be automatically recognized as not unavailable. At this time, ** FButton ** will have a default unavailable status style.

You can also freely configure the style of FButton when it is not available via the disabledXXX attribute.

🎈 Corner & Stroke

// #1
FButton(
  width: 130,
  text: "FButton #1",
  style: TextStyle(color: Colors.white),
  color: Color(0xffFF7043),
  onPressed: () {},
  clickEffect: true,
  
  /// 配置边角大小
  ///
  /// set corner size
  corner: FCorner.all(25),
),

// #2
FButton(
  width: 130,
  text: "FButton #2",
  style: TextStyle(color: Colors.white),
  color: Color(0xffFFA726),
  onPressed: () {},
  clickEffect: true,
  corner: FCorner(
    leftBottomCorner: 40,
    leftTopCorner: 6,
    rightTopCorner: 40,
    rightBottomCorner: 6,
  ),
),

// #3
FButton(
  width: 130,
  text: "FButton #3",
  style: TextStyle(color: Colors.white),
  color: Color(0xffFFc900),
  onPressed: () {},
  clickEffect: true,
  corner: FCorner(leftTopCorner: 10),
  
  /// 设置边角风格
  ///
  /// set corner style
  cornerStyle: FCornerStyle.bevel,
  strokeWidth: 0.5,
  strokeColor: Color(0xffF9A825),
),

// #4
FButton(
  width: 130,
  padding: EdgeInsets.fromLTRB(6, 16, 30, 16),
  text: "FButton #4",
  style: TextStyle(color: Colors.white),
  color: Color(0xff00B0FF),
  onPressed: () {},
  clickEffect: true,
  corner: FCorner(
      rightTopCorner: 25,
      rightBottomCorner: 25),
  cornerStyle: FCornerStyle.bevel,
  strokeWidth: 0.5,
  strokeColor: Color(0xff000000),
),

You can add rounded corners to FButton via the corner property. You can even control each fillet individually。

By default, the corners of FButton are rounded. By setting cornerStyle: FCornerStyle.bevel, you can get a bevel effect.

FButton supports control borders, provided that strokeWidth> 0 can get the effect 🥳 .

🌈 Gradient

FButton(
  width: 100,
  height: 60,
  text: "#1",
  style: TextStyle(color: Colors.white),
  color: Color(0xffFFc900),
  
  /// 配置渐变色
  ///
  /// set gradient
  gradient: LinearGradient(colors: [
    Color(0xff00B0FF),
    Color(0xffFFc900),
  ]),
  onPressed: () {},
  clickEffect: true,
  corner: FCorner.all(8),
)

Through the gradient attribute, you can build FButton with gradient colors. You can freely build many types of gradient colors.

🍭 Icon

FButton(
  width: 88,
  height: 38,
  padding: EdgeInsets.all(0),
  text: "Back",
  style: TextStyle(color: Colors.white),
  color: Color(0xffffc900),
  onPressed: () {
    toast(context, "Back!");
  },
  clickEffect: true,
  corner: FCorner(
    leftTopCorner: 25,
    leftBottomCorner: 25,),
  
  /// 配置图标
  /// 
  /// set icon
  image: Icon(
    Icons.arrow_back_ios,
    color: Colors.white,
    size: 12,
  ),

  /// 配置图标与文字的间距
  ///
  /// Configure the spacing between icon and text
  imageMargin: 8,
),

FButton(
  onPressed: () {},
  image: Icon(
    Icons.print,
    color: Colors.grey,
  ),
  imageMargin: 8,

  /// 配置图标与文字相对位置
  ///
  /// Configure the relative position of icons and text
  imageAlignment: ImageAlignment.top,
  text: "Print",
  style: TextStyle(color: textColor),
  color: Colors.transparent,
),

The image property can set an image for FButton and you can adjust the position of the image relative to the text, through imageAlignment.

If the button does not need a background, just set color: Colors.transparent.

🔥 Effect

FButton(
  width: 200,
  text: "Try Me!",
  style: TextStyle(color: textColor),
  color: Color(0xffffc900),
  onPressed: () {},
  clickEffect: true,
  corner: FCorner.all(9),
  
  /// 配置按下时颜色
  ///
  /// set pressed color
  highlightColor: Color(0xffE65100).withOpacity(0.20),
  
  /// 配置 hover 状态时颜色
  ///
  /// set hover color
  hoverColor: Colors.redAccent.withOpacity(0.16),
),

The highlight color of FButton can be configured through the highlightColor property。

hoverColor can configure the color when the mouse moves to the range of FButton, which will be used during Web development.

🔆 Loading

FButton(
  text: "Click top loading",
  style: TextStyle(color: textColor),
  color: Color(0xffffc900),
  ...

  /// 配置 loading 大小
  /// 
  /// set loading size
  loadingSize: 15,

  /// 配置 loading 与文本的间距
  ///
  // Configure the spacing between loading and text
  imageMargin: 6,
  
  /// 配置 loading 的宽
  ///
  /// set loading width
  loadingStrokeWidth: 2,

  /// 是否支持点击自动开始 loading
  /// 
  /// Whether to support automatic loading by clicking
  clickLoading: true,

  /// 配置 loading 的颜色
  ///
  /// set loading color
  loadingColor: Colors.white,

  /// 配置 loading 状态时的文本
  /// 
  /// set loading text
  loadingText: "Loading...",

  /// 配置 loading 与文本的相对位置
  ///
  /// Configure the relative position of loading and text
  imageAlignment: ImageAlignment.top,
),

// #2
FButton(
  width: 170,
  height: 70,
  text: "Click to loading",
  style: TextStyle(color: textColor),
  color: Color(0xffffc900),
  onPressed: () { },
  ...
  imageMargin: 8,
  loadingSize: 15,
  loadingStrokeWidth: 2,
  clickLoading: true,
  loadingColor: Colors.white,
  loadingText: "Loading...",

  /// loading 时隐藏文本
  ///
  /// Hide text when loading
  hideTextOnLoading: true,
)


FButton(
  width: 170,
  height: 70,
  alignment: Alignment.center,
  text: "Click to loading",
  style: TextStyle(color: Colors.white),
  color: Color(0xff90caf9),
  ...
  imageMargin: 8,
  clickLoading: true,
  hideTextOnLoading: true,

  /// 配置自定义 loading 样式
  ///
  /// Configure custom loading style
  loadingWidget: CupertinoActivityIndicator(),
),

Through the loading attribute, you can configure Loading effects for ** FButton **.

When FButton is in Loading state, FButton will enter an unavailable state, onPress will no longer be triggered, and unavailable styles will also be applied.

At the same time loadingText will overwrite text if it is not null.

The click start Loading effect can be achieved through the clickLoading attribute.

The position of loading will be affected by the imageAlignment attribute.

When hideTextOnLoading: true, if FButton is in loading state, its text will be hidden.

Through loadingWidget, developers can set completely customized loading styles.

Shadow

FButton(
  width: 200,
  text: "Shadow",
  textColor: Colors.white,
  color: Color(0xffffc900),
  onPressed: () {},
  clickEffect: true,
  corner: FCorner.all(28),
  
  /// 配置阴影颜色
  ///
  /// set shadow color
  shadowColor: Colors.black87,

  /// 设置组件高斯与阴影形状卷积的标准偏差。
  /// 
  /// Sets the standard deviation of the component's Gaussian convolution with the shadow shape.
  shadowBlur: _shadowBlur,
),

FButton allows you to configure the color, size, and position of the shadow.

🍭 Neumorphism Style

FButton(

  /// 开启 Neumorphism 支持
  ///
  /// Turn on Neumorphism support
  isSupportNeumorphism: true,

  /// 配置光源方向
  ///
  /// Configure light source direction
  lightOrientation: lightOrientation,

  /// 配置亮部阴影
  ///
  /// Configure highlight shadow
  highlightShadowColor: Colors.white,

  /// 配置暗部阴影
  ///
  /// Configure dark shadows
  shadowColor: mainShadowColor,
  strokeColor: mainBackgroundColor,
  strokeWidth: 3.0,
  width: 190,
  height: 60,
  text: "FWidget",
  style: TextStyle(
      color: mainTextTitleColor, fontSize: neumorphismSize_2_2),
  alignment: Alignment.center,
  color: mainBackgroundColor,
  ...
)

FButton brings an incredible, ultra-high texture Neumorphism style to developers.

Developers only need to configure the isSupportNeumorphism parameter to enable and disable the Neumorphism style.

If you want to adjust the style of Neumorphism, you can make subtle adjustments through several attributes related to Shadow, among which:

  • shadowColor: configure the shadow of the shadow

  • highlightShadowColor: configure highlight shadow

FButton also provides lightOrientation parameters, and even allows developers to adjust the care angle, and has obtained different Neumorphism effects.

😃 How to use?

Add dependencies in the project pubspec.yaml file:

🌐 pub dependency

dependencies:
  fbutton: ^<version number>

⚠️ Attention,please go to [pub] (https://pub.dev/packages/fbutton) to get the latest version number of FButton

🖥 git dependencies

dependencies:
  fbutton:
    git:
      url: '[email protected]:Fliggy-Mobile/fbutton.git'
      ref: '<Branch number or tag number>'

⚠️ Attention,please refer to [FButton] (https://github.com/Fliggy-Mobile/fbutton) official project for branch number or tag.

💡 License

Copyright 2020-present Fliggy Android Team <[email protected]>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Like it? Please cast your Star 🥰


How to run Demo project?

  1. clone project to local

  2. Enter the project example directory and run the following command

flutter create .
  1. Run the demo in example
Comments
  • FButton的text文字不能正常显示

    FButton的text文字不能正常显示

    你好,我在给FButton设置了height属性,text文字无法正常显示

    appBar: AppBar(
            actions: _topBarActions,
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(44.0),
              child: ListTile(
                leading: Image.asset("images/holder.png"),
                trailing: FButton(
                  text: "编辑资料",
                  width: 120,
                  height: 28.0,
                  effect: true,
                  textColor: Colors.white,
                  color: Color.fromARGB(0, 0, 0, 0),
                  strokeWidth: 1,
                  corner: FButtonCorner.all(2.0),
                  strokeColor: Colors.white,
                  onPressed: () {},
                ),
              ),
            ),
          )
    

    经过多次测试,当我设置了height属性后,文字就丢失了。

    opened by Francis-ChinaFeng 4
  • _buildTextLayer的小错误

    _buildTextLayer的小错误

    v 1.1.0

    loading状态下loadingText没有显示

    查看源码发现是由于_buildTextLayer 没有使用方法入参text导致的

    Text _buildTextLayer(String text, Color _textColor, ThemeData themeData) {
        return Text(
          widget.text ?? "",
          style: widget.style ??
              TextStyle(
                  color: _textColor,
                  fontWeight: widget.fontWeight,
                  height: widget.fontHeight,
                  fontSize: widget.fontSize ?? themeData.textTheme.button.fontSize,
                  fontStyle:
                      widget.fontStyle ?? themeData.textTheme.button.fontStyle),
        );
      }
    
    opened by 39251474 1
  • onpressed method always throws exception `Null check operator used on a null value`

    onpressed method always throws exception `Null check operator used on a null value`

    my simple code:

    FButton(
                    text: "开始",
                    style: ButtonTextNormal,
                    color: PrimaryPink,
                    height: 48,
                    alignment: Alignment.center,
                    corner: FCorner.all(8),
                    onPressed: () {
                      Get.to(() => const LoginPage());
                    },
                  )
    

    always throw exception Null check operator used on a null value

    ======== Exception caught by gesture ===============================================================
    The following _CastError was thrown while handling a gesture:
    Null check operator used on a null value
    
    When the exception was thrown, this was the stack: 
    #0      _FButton.build.<anonymous closure> (package:fbutton_nullsafety/fbutton_nullsafety.dart:450:38)
    #1      FControlState._updateState (package:fcontrol_nullsafety/fcontrol.dart:438:35)
    #2      FControlState._controlGestureHandlerForState (package:fcontrol_nullsafety/fcontrol.dart:431:5)
    #3      FControlState.build.<anonymous closure> (package:fcontrol_nullsafety/fcontrol.dart:264:11)
    #4      TapGestureRecognizer.handleTapDown.<anonymous closure> (package:flutter/src/gestures/tap.dart:581:61)
    #5      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:198:24)
    #6      TapGestureRecognizer.handleTapDown (package:flutter/src/gestures/tap.dart:581:11)
    #7      BaseTapGestureRecognizer._checkDown (package:flutter/src/gestures/tap.dart:287:5)
    #8      BaseTapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:265:7)
    #9      GestureArenaManager._resolveByDefault (package:flutter/src/gestures/arena.dart:251:25)
    #10     GestureArenaManager._tryToResolveArena.<anonymous closure> (package:flutter/src/gestures/arena.dart:232:31)
    (elided 10 frames from dart:async)
    Handler: "onTapDown"
    Recognizer: TapGestureRecognizer#54356
      debugOwner: GestureDetector
      state: possible
      button: 1
    ====================================================================================================
    
    opened by imwangji 1
  • 'FCorner'  not recognized

    'FCorner' not recognized

    After updating to "null safety", the "FCorner" class is not recognized: I get this error: The getter 'FCorner' isn't defined for the class 'DefaultButton'.

    opened by L4wr3nc3Dc 3
  • Choppy scrolling of elements consisting FButton

    Choppy scrolling of elements consisting FButton

    Hey,

    As I've mentioned in my previous request to add the long-press support I like the button a lot. However, I will probably stop using it in an app I've been working on. There a problem with scrolling performance if your button is in a sliver, a scroll view or a list view. The scrolling becomes choppy even on the 2 years old iPhone Xs Max.

    I don't have time to do the profiling but it would be great if you look into it.

    opened by matthewfx 1
Owner
Fliggy Mobile
We create legends
Fliggy Mobile
The one and only Docker Tool you will ever need again

# container_tool A new Flutter project. ## Getting Started This project is a starting point for a Flutter application. A few resources to get you

null 1 Nov 17, 2021
Magpie-fly is a component library produced by 58 Group, which encapsulates a variety of common components to meet the needs of developers

[toc] magpie_fly Magpie-fly 是58集体出品组件库,封装了多种常用组件,以满足开发者需求。(Magpie-fly is a component library produced by 58 Group, which encapsulates a variety of com

Wuba 40 Mar 18, 2022
Master Channel cannot use Glass Floating Action Button

Problem Master Channel cannot use GlassFloatingActionButton. About This package

null 7 Oct 2, 2022
Gallery with thousands of photos, no time to organize, no way to search and not enough space

Artificial Intelligence-Powered Gallery Overview Gallery with thousands of photos, no time to organize, no way to search and not enough space; these a

Abd al-Rahman al-Ktefane 4 Jul 25, 2022
Deepak Sharma 149 Dec 10, 2022
DEVS: Developer Board and Jobs Listing | For Developers, By Developers

devs Setup Currently, this DEVS project is using the master channel of the Flutter SDK. TODO: Migrate to beta Clone the project git clone https://gith

Flutter Philippines Community 40 Apr 16, 2022
Swipeable button view - Create Ripple Animated Pages With Swipeable Button View

swipeable_button_view You can create ripple animated pages with swipeable_button

cemreonur 3 Apr 22, 2022
Slider Master Animation Flutter Dart

Flutter-animated-Slider ?? ?? untitled.1.mp4 Firt you need to add this in pub yamel : dependencies: carousel_slider: ^4.0.0 Finally import 'package

Hmida 8 Sep 10, 2022
Academic master is E-learning app where students can share their doubts wiith their peers they can chat and also they can find their notes

Academic Master is E-learning App. Features:- 1) You can post real Post query in Images and video formates. 2) We will Provide notes,books and previou

amit singh 25 Dec 14, 2022
Dialog flowtter-master - A Flutter implementation of DialogFlow, improved

A Flutter implementation of DialogFlow, improved. Build your integrations with D

null 0 Jan 3, 2022
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

null 3 Oct 4, 2022
Bwo-master - An infinity procedural online game using Flutter and flames with NodeJS and Firebase for the back-end

Borderless World Online (BWO) An infinity procedural online game using Flutter a

null 17 Nov 29, 2022
Bwo-master - An infinity procedural online game using Flutter and flames with NodeJS and Firebase for the back-end

Borderless World Online (BWO) An infinity procedural online game using Flutter a

null 0 Feb 2, 2022
Be together, whenever. A simple way to text chat and plan things all in one place for flutter developers.

Flutterdevconnect Be together, whenever. A simple way to text chat and plan things all in one place for flutter developers. Android IOS Web PWA Androi

Sanskar Tiwari 69 Aug 27, 2022
A simple button that gives you the possibility to transform into a circular one and shows a progress indicator

Progress Button A simple button that gives you the possibility to transform into

Daniel B Schneider 0 Dec 22, 2021
Learn how to build a tensorflow model on Techable Machine and then run it on flutter app.

Ml With Flutter Learn how to build a tensorflow model on Techable Machine and then run it on flutter app. Youtube Tutorial Show Support Recommend Me O

Sanskar Tiwari 133 Jan 3, 2023
Flutter plugin for auto resize widgets to get then "responsives".

Responsive Widgets This plugin helps to create responsive widgets, that makes auto-size with the proportion between reference screen size (width, heig

Lucas Henrique Polazzo 45 Nov 3, 2022
A Flutter plugin for fetching Firestore documents with read from cache first then server.

Firestore Cache A Flutter plugin for fetching Firestore documents with read from cache first then server. This plugin is mainly designed for applicati

null 22 Nov 24, 2022
This is a MVP our app's. The app get the song's list on firebase and display then you can be listen App features.

music_app Requirements: flutter version 3.0.3 Dart 2.17.5 Firebase CLI 11.1.0 flutter sdk: >= 2.15.1 < 3.0.0 flutter dependentcies: http: 0.13.4 mvvm:

Lê Hồng Minh 3 Aug 2, 2022