fbutton 2.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 87

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(coorchice.cb@alibaba-inc.com)

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 #

ParamTypeNecessaryDefaultdesc
onPressedVoidCallbacktruenullClick callback. If null, FButton will enter an unavailable state
onPressedDownVoidCallbackfalsenullCallback when pressed
onPressedUpVoidCallbackfalsenullCallback when lifted
onPressedCancelVoidCallbackfalsenullCallback when cancel is pressed
heightdoublefalsenullheight
widthdoublefalsenullwidth
styleTextStylefalsenulltext style
disableStyleTextStylefalsenullUnavailable text style
alignmentAlignmentfalsenullalignment
textStringfalsenullbutton text
colorColorfalsenullButton color
disabledColorColorfalsenullColor when FButton is unavailable
paddingEdgeInsetsGeometryfalsenullFButton internal spacing
cornerFCornerfalsenullConfigure corners of Widget
cornerStyleFCornerStylefalseFCornerStyle.roundConfigure the corner style of Widget. round-rounded corners, bevel-beveled
strokeColorColorfalseColors.blackBorder color
strokeWidthdoublefalse0Border width. The border will appear when strokeWidth > 0
gradientGradientfalsenullConfigure gradient colors. Will override the color
activeMaskColorColorColors.transparentThe color of the mask when pressed
surfaceStyleFSurfacefalseFSurface.FlatSurface style. Default [FSurface.Flat]. See [FSurface] for details

💫 Effect parameters #

ParamTypeNecessaryDefaultdesc
clickEffectboolfalsefalseWhether to enable click effects
hoverColorColorfalsenullFButton color when hovering
onHoverValueChangedfalsenullCallback when the mouse enters/exits the component range
highlightColorColorfalsenullThe color of the FButton when touched. effect:true required

🔳 Shadow parameters #

ParamTypeNecessaryDefaultdesc
shadowColorColorfalseColors.greyShadow color
shadowOffsetOffsetfalseOffset.zeroShadow offset
shadowBlurdoublefalse1.0Shadow blur degree, the larger the value, the larger the shadow range

🖼 Icon & Loading parameters #

ParamTypeNecessaryDefaultdesc
imageWidgetfalsenullAn icon can be configured for FButton
imageMargindoublefalse6.0Spacing between icon and text
imageAlignmentImageAlignmentfalseImageAlignment.leftRelative position of icon and text
loadingboolfalsefalseWhether to enter the Loading state
loadingWidgetWidgetfalsenullLoading widget in loading state. Will override the default Loading effect
clickLoadingboolfalsefalseWhether to enter Loading state after clicking FButton
loadingColorColorfalsenullLoading colors
loadingStrokeWidthdoublefalse4.0Loading width
hideTextOnLoadingboolfalsefalseWhether to hide text in the loading state
loadingTextStringfalsenullLoading text
loadingSizedoublefalse12Loading size

🍭 Neumorphism Style #

ParamTypeNecessaryDefaultdesc
isSupportNeumorphismboolfalsefalseWhether to support the Neumorphism style. Open this item [highlightColor] will be invalid
lightOrientationFLightOrientationfalseFLightOrientation.LeftTopValid 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
highlightShadowColorColorfalsenullAfter 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 andonPressed, 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, throughimageAlignment.

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 overwritetext 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 theimageAlignment attribute.

When hideTextOnLoading: true, if FButton is inloading 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: 'git@github.com: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 <alitrip_android@list.alibaba-inc.com>.

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

2.0.0 #

  • Delete the following parameters and use style instead:

    • textColor
    • fontSize
    • fontStyle
    • fontHeight
    • textWeight
  • Delete the following parameters:

    • splashColor
    • focusNode
    • autofocus
  • Delete the effect parameter

  • Delete disabledTextColor and use disableStyle instead

  • FButtonCorner changed to FCorner

  • FButtonCornerStyle changed to FornerStyle

  • Add the activeMaskColor parameter. The color of the mask when the button is pressed. Adjust the alpha of the color value to ensure that the view behind can be displayed.

  • Add Hover support.

    • The color in hover state can be configured through hoverColor.
    • onHover can help developers perceive hover state changes.
  • Add onPressedDown and onPressedUp and onPressedCancel to help developers to make corresponding changes when pressing, lifting or canceling the press.

  • Add loadingWidget parameter, so that developers can define their own loading style

  • Add Neumorphism style support.

    • Neumorphism style support can be turned on/off through the isSupportNeumorphism parameter
    • The highlightShadowColor parameter can configure the bright shadow color after enabling the Neumorphism style
    • The lightOrientation parameter can adjust the direction of the light source
  • Add surfaceStyle parameter to support the definition of surface style.

    • Flat
    • Convex
    • Concave

1.1.0 #

  • Add style parameter to configure text style. The following parameters will be removed in subsequent versions:

    • textColor
    • fontSize
    • fontStyle
    • fontHeight
    • textWeight
  • Add the alignment parameter to cancel the default centering

  • Remove default Padding

  • Remove the default background color

  • `onPress' is no longer a required parameter

1.0.4 #

  • add @immutable to fbutton.dart

  • minSDK 2.2

1.0.3 #

  • Remove a few bad attributes

  • Increase text configurability

example/lib/main.dart

import 'package:fcontrol/fdefine.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fbutton/fbutton.dart';
import 'package:fradio/fradio.dart';
import 'dart:math' as math;
import 'package:fcommon/fcommon.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FButtonPage(),
    );
  }
}

class FButtonPage extends StatefulWidget {
  @override
  _FButtonPageState createState() => _FButtonPageState();
}

class _FButtonPageState extends State<FButtonPage> {
  var _shadowBlur;

  @override
  void initState() {
    _shadowBlur = 5.0;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: mainBackgroundColor,
        appBar: AppBar(
          backgroundColor: mainBackgroundColor,
          title: const Text(
            'FButton',
            style: TextStyle(color: mainTextTitleColor),
          ),
          centerTitle: true,
        ),
        body: SingleChildScrollView(
          child: Container(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  /// Normal FButton
                  buildTitle("FButton"),
                  buildSmallMargin(),

                  /// Normal FButton 1
                  buildNormalButton1(),
                  buildMiddleMargin(),

                  /// Normal FButton 2
                  buildNormalButton2(),
                  buildMiddleMargin(),

                  /// Normal FButton 3
                  buildNormalButton3(),
                  buildMiddleMargin(),

                  buildTitle("Corner"),
                  buildSmallMargin(),

                  /// Corner FButton
                  buildCornerButton1(),
                  buildBigMargin(),

                  /// Corner FButton
                  buildCornerButton2(),
                  buildMiddleMargin(),

                  buildTitle("Gradient"),
                  buildSmallMargin(),

                  /// Gradient FButton
                  buildGradientButton1(),
                  buildMiddleMargin(),

                  /// Gradient FButton
                  buildGradientButton2(),
                  buildMiddleMargin(),

                  /// Gradient FButton
                  buildGradientButton3(),
                  buildMiddleMargin(),

                  /// Stroke FButton
                  buildTitle("Stroke"),
                  buildSmallMargin(),
                  buildStrokeButton(),
                  buildMiddleMargin(),

                  buildTitle("Image"),
                  buildSmallMargin(),

                  /// Image
                  buildImageButton1(context),
                  buildBigMargin(),

                  /// Image
                  buildImageButton2(),
                  buildBigMargin(),
                  buildTitle("Loading"),
                  buildMiddleMargin(),

                  /// Loading
                  buildLoadingButton1(),
                  buildMiddleMargin(),

                  /// Loading
                  buildLoadingButton2(),
                  buildSmallMargin(),

                  /// Effect FButton
                  buildTitle("Effect"),
                  buildSmallMargin(),

                  /// Hover
                  buildEffectButton(),
                  buildMiddleMargin(),
                  buildTitle("Shadow"),
                  buildSmallMargin(),

                  /// Shadow
                  buildShadowButton(),
                  ///////
                  buildBigMargin(),
                  buildTitle("Neumorphism Style"),
                  buildMiddleMargin(),
                  buildMiddleMargin(),

                  /// Neumorphism
                  neumorphismDemo(),

                  buildBiggestMargin(),
                  buildBiggestMargin(),
                ],
              ),
            ),
          ),
        ));
  }

  Stack neumorphismDemo() {
    return Stack(
      children: [
        Padding(
          padding: EdgeInsets.only(left: 20, right: 20, top: 50, bottom: 50),
          child: Column(
            children: [
              /// Neumorphism Style 1
              neumorphismDemo_1(),
              buildMiddleMargin(),
              buildMiddleMargin(),

              /// Neumorphism Style 2
              neumorphismDemo_2(),
            ],
          ),
        ),
        Positioned(
            left: 25,
            top: 0,
            child: Transform.rotate(
              angle: -math.pi / 4.0,
              alignment: Alignment.center,
              child: FRadio.custom(
                value: FLightOrientation.LeftTop,
                groupValue: lightOrientation,
                normal: Image.asset("assets/icon_light_unselected.png"),
                selected: Image.asset("assets/icon_light_selected.png"),
                onChanged: (value) {
                  setState(() {
                    lightOrientation = value;
                  });
                },
              ),
            )),
        Positioned(
            right: 25,
            top: 0,
            child: Transform.rotate(
              angle: math.pi / 4.0,
              alignment: Alignment.center,
              child: FRadio.custom(
                value: FLightOrientation.RightTop,
                groupValue: lightOrientation,
                normal: Image.asset("assets/icon_light_unselected.png"),
                selected: Image.asset("assets/icon_light_selected.png"),
                onChanged: (value) {
                  setState(() {
                    lightOrientation = value;
                  });
                },
              ),
            )),
        Positioned(
            right: 25,
            bottom: 0,
            child: Transform.rotate(
              angle: -math.pi / (3.0 / 4.0),
              alignment: Alignment.center,
              child: FRadio.custom(
                value: FLightOrientation.RightBottom,
                groupValue: lightOrientation,
                normal: Image.asset("assets/icon_light_unselected.png"),
                selected: Image.asset("assets/icon_light_selected.png"),
                onChanged: (value) {
                  setState(() {
                    lightOrientation = value;
                  });
                },
              ),
            )),
        Positioned(
            left: 25,
            bottom: 0,
            child: Transform.rotate(
              angle: math.pi / (3.0 / 4.0),
              alignment: Alignment.center,
              child: FRadio.custom(
                value: FLightOrientation.LeftBottom,
                groupValue: lightOrientation,
                normal: Image.asset("assets/icon_light_unselected.png"),
                selected: Image.asset("assets/icon_light_selected.png"),
                onChanged: (value) {
                  setState(() {
                    lightOrientation = value;
                  });
                },
              ),
            )),
      ],
    );
  }

  FLightOrientation lightOrientation = FLightOrientation.LeftTop;
  double neumorphismSize_1 = 30;
  double neumorphismSize_2 = 30;
  double neumorphismSize_3 = 30;

  Widget neumorphismDemo_1() {
    return StatefulBuilder(builder: (context, setState) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          FButton(
            lightOrientation: lightOrientation,

            /// 开启 Neumorphism 支持
            isSupportNeumorphism: true,
            highlightShadowColor: Colors.white,
            shadowColor: mainShadowColor,
            width: 60,
            height: 60,
            image: Icon(
              Icons.call,
              color: mainTextTitleColor,
              size: neumorphismSize_1,
            ),
            alignment: Alignment.center,
            color: mainBackgroundColor,
            corner: FCorner.all(8.0),
            onPressed: () {},
            onPressedDown: () {
              setState(() {
                neumorphismSize_1 = 26;
              });
            },
            onPressedUp: () {
              setState(() {
                neumorphismSize_1 = 30;
              });
            },
            onPressedCancel: () {
              setState(() {
                neumorphismSize_1 = 30;
              });
            },
          ),
          FButton(
            lightOrientation: lightOrientation,

            /// 开启 Neumorphism 支持
            isSupportNeumorphism: true,
            highlightShadowColor: Colors.white,
            shadowColor: mainShadowColor,
            width: 60,
            height: 60,
            image: Icon(
              Icons.mic,
              color: mainTextTitleColor,
              size: neumorphismSize_2,
            ),
            alignment: Alignment.center,
            color: mainBackgroundColor,
            corner: FCorner.all(8.0),
            onPressed: () {},
            onPressedDown: () {
              setState(() {
                neumorphismSize_2 = 26;
              });
            },
            onPressedUp: () {
              setState(() {
                neumorphismSize_2 = 30;
              });
            },
            onPressedCancel: () {
              setState(() {
                neumorphismSize_2 = 30;
              });
            },
          ),
          FButton(
            lightOrientation: lightOrientation,

            /// 开启 Neumorphism 支持
            isSupportNeumorphism: true,
            strokeColor: mainBackgroundColor,
            strokeWidth: 3.0,
            highlightShadowColor: Colors.white,
            shadowColor: mainShadowColor,
            width: 60,
            height: 60,
            image: Icon(
              Icons.photo_camera,
              color: mainTextTitleColor,
              size: neumorphismSize_3,
            ),
            alignment: Alignment.center,
            color: mainBackgroundColor,
            corner: FCorner.all(8.0),
            onPressed: () {},
            onPressedDown: () {
              setState(() {
                neumorphismSize_3 = 26;
              });
            },
            onPressedUp: () {
              setState(() {
                neumorphismSize_3 = 30;
              });
            },
            onPressedCancel: () {
              setState(() {
                neumorphismSize_3 = 30;
              });
            },
          ),
        ],
      );
    });
  }

  double neumorphismSize_2_1 = 30;
  double neumorphismSize_2_2 = 18;

  Widget neumorphismDemo_2() {
    return StatefulBuilder(builder: (context, setState) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          FButton(
            lightOrientation: lightOrientation,

            /// 开启 Neumorphism 支持
            isSupportNeumorphism: true,
            highlightShadowColor: Colors.white,
            shadowColor: mainShadowColor,
            strokeColor: mainBackgroundColor,
            strokeWidth: 3.0,
            width: 60,
            height: 60,
            image: Icon(
              Icons.play_arrow,
              color: mainTextTitleColor,
              size: neumorphismSize_2_1,
            ),
            alignment: Alignment.center,
            color: mainBackgroundColor,
            corner: FCorner.all(30.0),
            onPressed: () {},
            onPressedDown: () {
              setState(() {
                neumorphismSize_2_1 = 26;
              });
            },
            onPressedUp: () {
              setState(() {
                neumorphismSize_2_1 = 30;
              });
            },
            onPressedCancel: () {
              setState(() {
                neumorphismSize_2_1 = 30;
              });
            },
          ),
          FButton(
            /// 配置光源方向
            ///
            /// Configure light source direction
            lightOrientation: lightOrientation,

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

            /// 配置亮部阴影
            ///
            /// 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,
            corner: FCorner.all(30.0),
            onPressed: () {},
            onPressedDown: () {
              setState(() {
                neumorphismSize_2_2 = 16;
              });
            },
            onPressedUp: () {
              setState(() {
                neumorphismSize_2_2 = 18;
              });
            },
            onPressedCancel: () {
              setState(() {
                neumorphismSize_2_2 = 18;
              });
            },
          ),
        ],
      );
    });
  }

  Widget buildShadowButton() {
    return StatefulBuilder(builder: (context, setState) {
      return Column(
        children: <Widget>[
          buildMiddleMargin(),
          FButton(
            width: 200,
            height: 50,
            alignment: Alignment.center,
            text: "Shadow",
            style: TextStyle(color: Colors.white),
            color: Color(0xffb39ddb),
            onPressed: () {},
            clickEffect: true,
            corner: FCorner.all(28),
            shadowColor: Color(0xff3754AA).withOpacity(0.78),
            shadowBlur: _shadowBlur,
          ),
          buildMiddleMargin(),
          Container(
            width: 200,
            child: Slider(
              label: _shadowBlur.toString(),
              value: _shadowBlur,
              min: 0.0,
              max: 20,
              divisions: 40,
              activeColor: Color(0xff9fa8da),
              inactiveColor: Color(0xff9fa8da).withOpacity(0.38),
              onChanged: (v) {
                setState(() {
                  _shadowBlur = v;
                });
              },
            ),
          ),
        ],
      );
    });
  }

  FButton buildEffectButton() {
    return FButton(
      width: 200,
      height: 50,
      alignment: Alignment.center,
      text: "Try Me!",
      style: TextStyle(color: Colors.white),
      color: Color(0xff81d4fa),
      onPressed: () {},
      clickEffect: true,
      corner: FCorner.all(9),
      highlightColor: Color(0xffff8a65),
      hoverColor: Color(0xff80deea),
      shadowColor: mainShadowColor,
      shadowBlur: 6.0,
      shadowOffset: Offset(2.0, 2.0),
    );
  }

  Widget buildLoadingButton2() {
    return StatefulBuilder(builder: (context, setState) {
      return Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FButton(
                padding: EdgeInsets.all(12.0),
                text: "Click left loading",
                style: TextStyle(color: Colors.white),
                color: Color(0xffffab91),
                onPressed: () {
                  print("Loading...");
                },
                clickEffect: true,
                corner: FCorner.all(9),
                loadingSize: 15,
                imageMargin: 16,
                loadingStrokeWidth: 2,
                clickLoading: true,
                loadingColor: Colors.white,
                loadingText: "Loading...",
              ),
              SizedBox(
                width: 10,
              ),
              FButton(
                padding: EdgeInsets.all(12.0),
                text: "Click top loading",
                style: TextStyle(color: Colors.white),
                color: Color(0xffb39ddb),
                onPressed: () {
                  print("Loading...");
                },
                clickEffect: true,
                corner: FCorner.all(9),
                loadingSize: 15,
                imageMargin: 6,
                loadingStrokeWidth: 2,
                clickLoading: true,
                loadingColor: Colors.white,
                loadingText: "Loading...",
                imageAlignment: ImageAlignment.top,
                loadingWidget: RefreshProgressIndicator(),
              ),
            ],
          ),
          buildMiddleMargin(),
          FButton(
            width: 170,
            height: 70,
            alignment: Alignment.center,
            text: "Click to loading",
            style: TextStyle(color: Colors.white),
            color: Color(0xff90caf9),
            onPressed: () {
              print("Loading...");
            },
            clickEffect: true,
            corner: FCorner.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,
            loadingWidget: CupertinoActivityIndicator(),
          ),
          buildMiddleMargin(),
          FButton(
            width: 100,
            height: 30,
            alignment: Alignment.center,
            text: "Reset",
            style: TextStyle(color: mainTextTitleColor),
            corner: FCorner.all(25),
            onPressed: () {
              setState(() {});
            },
            color: Color(0xffffab91),
//            clickEffect: true,
            highlightShadowColor: Color(0xfffbe9e7),
            shadowColor: Color(0xffff7043),
            isSupportNeumorphism: true,
            shadowBlur: 10.0,
          ),
        ],
      );
    });
  }

  Widget buildLoadingButton1() {
    return FButton(
      width: 200,
      height: 50,
      text: "loading",
      style: TextStyle(color: Colors.white),
      color: Color(0xffa5d6a7),
      onPressed: () {
        print("Loading...");
      },
      clickEffect: true,
      corner: FCorner.all(30),
      loadingSize: 15,
      imageMargin: 16,
      loadingStrokeWidth: 2,
      loading: true,
      loadingColor: Colors.white,
      loadingText: "Loading...",
    );
  }

  Row buildImageButton2() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FButton(
          onPressed: () {},
          image: Icon(
            Icons.add_a_photo,
            color: Color(0xffff8a65),
          ),
          imageMargin: 8,
          text: "Take Photo",
          style: TextStyle(color: mainTextTitleColor),
          color: Colors.transparent,
        ),
        SizedBox(
          width: 36,
        ),
        FButton(
          onPressed: () {},
          image: Icon(
            Icons.print,
            color: Colors.grey,
          ),
          imageMargin: 8,
          imageAlignment: ImageAlignment.top,
          text: "Print",
          style: TextStyle(color: mainTextTitleColor),
          color: Colors.transparent,
        ),
      ],
    );
  }

  Row buildImageButton1(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FButton(
          width: 88,
          height: 38,
          padding: EdgeInsets.all(0),
          text: "Back",
          style: TextStyle(color: Colors.white),
          color: Color(0xff9ccc65),
          onPressed: () {
            toast(context, "Back!");
          },
          clickEffect: true,
          corner: FCorner(leftTopCorner: 25, leftBottomCorner: 25),
          image: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
            size: 12,
          ),
          imageMargin: 8,
        ),
        Container(
            height: 38,
            child: VerticalDivider(width: 0.25, color: Colors.black)),
        FButton(
          width: 88,
          height: 38,
          padding: EdgeInsets.all(0),
          text: "Forward",
          style: TextStyle(color: Colors.white),
          color: Color(0xffd4e157),
          onPressed: () {
            toast(context, "Forward!");
          },
          corner: FCorner(rightTopCorner: 25, rightBottomCorner: 25),
          image: Icon(
            Icons.arrow_forward_ios,
            color: Colors.white,
            size: 12,
          ),
          imageMargin: 8,
          imageAlignment: ImageAlignment.right,
        ),
        Padding(
          padding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
          child: FButton(
            width: 38,
            height: 38,
            padding: EdgeInsets.all(0),
            color: Color(0xff26c6da),
            onPressed: () {
              toast(context, "Search!");
            },
            clickEffect: true,
            corner: FCorner.all(19),
            image: Icon(
              Icons.search,
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }

  Padding buildStrokeButton() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(28, 0, 28, 0),
      child: FButton(
        text: "Stroke FButton",
        style: TextStyle(color: Colors.black87),
        color: Colors.white,
        onPressed: () {},
        clickEffect: true,
        corner: FCorner.all(6),
        strokeWidth: 1,
        strokeColor: Colors.black87,
        padding: EdgeInsets.all(10.0),
      ),
    );
  }

  Padding buildGradientButton3() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
      child: FButton(
        width: 200,
        height: 50,
        alignment: Alignment.center,
        text: "RadialGradient FButton",
        style: TextStyle(color: Colors.white),
        gradient: RadialGradient(
          center: const Alignment(0.6, 0.2),
          radius: 0.2,
          colors: [
            const Color(0xFF0099FF),
            const Color(0xffff7043),
          ],
          stops: [0.4, 1.0],
        ),
        onPressed: () {},
        clickEffect: true,
        corner: FCorner.all(9),
      ),
    );
  }

  Padding buildGradientButton2() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
      child: FButton(
        width: 200,
        height: 90,
        alignment: Alignment.center,
        text: "SweepGradient FButton",
        style: TextStyle(color: Colors.white),
        color: Colors.black54,
        gradient: SweepGradient(
          center: Alignment.center,
          startAngle: 0.0,
          endAngle: math.pi * 2,
          colors: const <Color>[
            Colors.blue,
            Colors.green,
            Colors.yellow,
            Colors.red,
            Colors.blueAccent,
          ],
        ),
        onPressed: () {},
        clickEffect: true,
        corner: FCorner.all(9),
      ),
    );
  }

  Padding buildGradientButton1() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
      child: FButton(
        width: 200,
        height: 50,
        alignment: Alignment.center,
        text: "LinearGradient FButton",
        style: TextStyle(color: Colors.white),
        color: Color(0xffFFc900),
        gradient: LinearGradient(colors: [
          Color(0xff00B0FF),
          Color(0xffFFc900),
        ]),
        onPressed: () {},
        clickEffect: true,
        corner: FCorner.all(9),
      ),
    );
  }

  Widget buildCornerButton2() {
    return Container(
      width: 360,
      padding: const EdgeInsets.fromLTRB(18, 0, 18, 0),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              FButton(
                width: 150,
                height: 50,
                alignment: Alignment.center,
                text: "Corner FButton",
                style: TextStyle(color: Colors.white),
                color: Color(0xffFF7043),
                onPressed: () {},
                clickEffect: true,
                corner: FCorner(leftTopCorner: 10),
                cornerStyle: FCornerStyle.bevel,
                strokeWidth: 0.5,
                strokeColor: Color(0xffD84315),
              ),
              FButton(
                width: 150,
                height: 50,
                alignment: Alignment.center,
                text: "Corner FButton",
                style: TextStyle(color: Colors.white),
                color: Color(0xffFFA726),
                onPressed: () {},
                clickEffect: true,
                corner: FCorner(
                  leftBottomCorner: 40,
                  leftTopCorner: 6,
                  rightTopCorner: 40,
                  rightBottomCorner: 6,
                ),
                cornerStyle: FCornerStyle.bevel,
                strokeWidth: 0.5,
                strokeColor: Color(0xffEF6C00),
              ),
            ],
          ),
          buildSmallMargin(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              FButton(
                width: 150,
                height: 50,
                alignment: Alignment.center,
                text: "Corner FButton",
                style: TextStyle(color: Colors.white),
                color: Color(0xffFFc900),
                onPressed: () {},
                clickEffect: true,
                corner: FCorner(rightTopCorner: 25, rightBottomCorner: 25),
                cornerStyle: FCornerStyle.bevel,
                strokeWidth: 0.5,
                strokeColor: Color(0xffF9A825),
              ),
              FButton(
                width: 150,
                height: 50,
                alignment: Alignment.center,
                text: "Corner FButton",
                style: TextStyle(color: Colors.white),
                color: Color(0xff00B0FF),
                onPressed: () {},
                clickEffect: true,
                corner: FCorner(leftTopCorner: 35, rightTopCorner: 35),
                cornerStyle: FCornerStyle.bevel,
                strokeWidth: 0.5,
                strokeColor: Color(0xff0288D1),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget buildCornerButton1() {
    return Container(
      width: 360,
      padding: const EdgeInsets.fromLTRB(18, 0, 18, 0),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              FButton(
                width: 150,
                height: 50,
                alignment: Alignment.center,
                text: "Corner FButton",
                style: TextStyle(color: Colors.white),
                color: Color(0xffFF7043),
                onPressed: () {},
                clickEffect: true,
                corner: FCorner(leftTopCorner: 18),
              ),
              FButton(
                width: 150,
                height: 50,
                alignment: Alignment.center,
                text: "Corner FButton",
                style: TextStyle(color: Colors.white),
                color: Color(0xffFFA726),
                onPressed: () {},
                clickEffect: true,
                corner: FCorner(
                  leftBottomCorner: 40,
                  leftTopCorner: 6,
                  rightTopCorner: 40,
                  rightBottomCorner: 6,
                ),
              ),
            ],
          ),
          buildSmallMargin(),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              FButton(
                width: 150,
                height: 50,
                alignment: Alignment.center,
                text: "Corner FButton",
                style: TextStyle(color: Colors.white),
                color: Color(0xffFFc900),
                onPressed: () {},
                clickEffect: true,
                corner: FCorner(leftTopCorner: 25, leftBottomCorner: 25),
              ),
              FButton(
                width: 150,
                height: 50,
                alignment: Alignment.center,
                text: "Corner FButton",
                style: TextStyle(color: Colors.white),
                color: Color(0xff00B0FF),
                onPressed: () {},
                clickEffect: true,
                corner: FCorner(leftTopCorner: 35, rightTopCorner: 35),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Padding buildNormalButton3() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
      child: 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),
        disabledColor: Colors.grey[300],
        corner: FCorner.all(6.0),
      ),
    );
  }

  Padding buildNormalButton2() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
      child: 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),
      ),
    );
  }

  Widget buildNormalButton1() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
      child: FButton(
        height: 40,
        alignment: Alignment.center,
        text: "FButton #1",
        style: TextStyle(color: Colors.white),
        color: Color(0xffffab91),
        onPressed: () {},
        clickEffect: true,
        highlightColor: Colors.red,
        hoverColor: Colors.blue,
        corner: FCorner.all(6.0),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  fbutton: ^2.0.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:fbutton/fbutton.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
74
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
87
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • fbutton that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.0 <3.0.0
fcontrol ^1.0.0 1.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test