flutter_button

Flutter 自定义、文本、3D、社交媒体按钮包。

flutter_button 扩展包含

  • 3D按钮,
  • 动漫按下按钮、悬停按钮、点赞按钮、透明度按钮
  • 自定义FAB、星型FAB。
  • Facebook授权按钮, Circle FB授权按钮, Magical FB授权按钮, Google授权按钮, Circle GG授权按钮, Magical GG授权按钮, Github授权按钮, Circle GI授权按钮, Magical Gi授权按钮, Twitter授权按钮, Circle TW授权按钮, Magical TW授权按钮,
  • 文本按钮,渐变文本按钮。

3D

social

custom

text

fab

安装与使用。

在pubspec.yaml中添加此行

dependencies:
  ...
  flutter_button: ^0.0.2

好的，让我们开始使用flutter_button吧？

? 3D按钮使用

默认模式

import 'package:flutter_button/3d/3d_button.dart';

Button3D(
 onPressed: () {},
 child: Text("3d Button"),
),

带自定义属性的3D按钮

import 'package:flutter_button/3d/3d_button.dart';

 Button3D(
 style: StyleOf3dButton(
    backColor: Colors.red[900],
    topColor: Colors.red[400],
    borderRadius: BorderRadius.circular(30),
 ),
  height: 100,
  width: 200,
  onPressed: () {},
  child: Text("3d Button"),
),

⚛︎ 社交授权按钮

Facebook授权按钮的默认模式

import 'package:flutter_button/social/facebook_auth_button.dart';

 FacebookAuthButton(
  onTap: () {},
  borderRadius: BorderRadius.circular(30),
),

带自定义属性的Facebook授权按钮

import 'package:flutter_button/social/facebook_auth_button.dart';

FacebookAuthButton(
 onTap: () {},
 wGradientColors: true,
 wOpacity: true,
 borderRadius: BorderRadius.circular(30),
 opacityValue: .4,
 gradientColors: [
  Colors.black,
  Colors.blueGrey,
],
shadows: [
  BoxShadow(
   spreadRadius: 1.5,
   blurRadius: 10,
   offset: Offset(2, 8),
   color: Colors.black,
  ),
 ],
)   ,

Google授权按钮的默认模式

import 'package:flutter_button/social/google_auth_button.dart';

GoogleAuthButton(
 onTap: () {},
 borderRadius: BorderRadius.circular(30),
 shadows: [
   BoxShadow(
    spreadRadius: 1.5,
    blurRadius: 10,
    offset: Offset(2, 7),
    color: Color(0xff4285F4),
 ),
]
,),

带自定义属性的Google授权按钮

import 'package:flutter_button/social/google_auth_button.dart';

GoogleAuthButton(
 onTap: () {},
 wGradientColors: true,
 wOpacity: true,
 upperCasedTitle: true,
 iconColor: Colors.white,
 titleColor: Colors.white,
 borderRadius: BorderRadius.circular(30),
 opacityValue: .5,
 gradientColors: [
   Colors.black,
   Colors.blueGrey,
 ],
 shadows: [
   BoxShadow(
    spreadRadius: 1.5,
    blurRadius: 10,
    offset: Offset(2, 7),
    color: Color(0xff4285F4),
  ),
 ]
),

Github授权按钮的默认模式

import 'package:flutter_button/social/github_auth_button.dart';

GithubAuthButton(
 borderRadius: BorderRadius.circular(30),
 onTap: () {},
),

带自定义属性的Github授权按钮

import 'package:flutter_button/social/github_auth_button.dart';

GithubAuthButton(
 onTap: () {},
 wGradientColors: true,
 wOpacity: true,
 iconColor: Colors.black,
 titleColor: Colors.black,
 iconSize: 30,
 borderRadius: BorderRadius.circular(30),
 opacityValue: .4,
 gradientColors: [
  Colors.white,
  Colors.white,
 ],
 shadows: [
    BoxShadow(
      spreadRadius: 1.5,
      blurRadius: 10,
      offset: Offset(0.5, 6),
      color: Colors.black,
    ),
  ],
),

Twitter授权按钮的默认模式

import 'package:flutter_button/social/twitter_auth_button.dart';

TwitterAuthButton(
  borderRadius: BorderRadius.circular(30),
  onTap: () {},
),

带自定义属性的Twitter授权按钮

import 'package:flutter_button/social/twitter_auth_button.dart';

TwitterAuthButton(
  onTap: () {},
  wGradientColors: true,
  wOpacity: true,
  iconColor: Colors.black,
  titleColor: Colors.black,
  iconSize: 30,
  borderRadius: BorderRadius.circular(30),
  opacityValue: .4,
  gradientColors: [
    Colors.white,
    Colors.white,
  ],
  shadows: [
    BoxShadow(
      spreadRadius: 1.5,
      blurRadius: 10,
      offset: Offset(0.5, 6),
      color: Colors.black,
    ),
   ],
),

圆形授权按钮

Facebook

import 'package:flutter_button/social/facebook_auth_button.dart';

CircularFBAuthButton(
  borderRadius: BorderRadius.circular(30),
  onTap: () {},
  shadows: [
    BoxShadow(
     spreadRadius: 1.5,
     blurRadius: 10,
     offset: Offset(2, 6),
     color: Colors.black,
    ),
  ],
),

Google

import 'package:flutter_button/social/google_auth_button.dart';

CircularGGAuthButton(
  borderRadius: BorderRadius.circular(30),
  onTap: () {},
  shadows: [
    BoxShadow(
     spreadRadius: 1.5,
     blurRadius: 10,
     offset: Offset(2, 6),
     color: Color(0xff4285F4),
    ),
  ],
),

Github

import 'package:flutter_button/social/github_auth_button.dart';

CircularGIAuthButton(
  backgorundColor: Colors.white,
  opacityValue: .7,
  wOpacity: true,
  wBorder: true,
  iconColor: Colors.black,
  shadows: [
    BoxShadow(
      spreadRadius: 1,
      blurRadius: 10,
      offset: Offset(0.5, 3),
      color: Colors.black,
    ),
  ],
  borderRadius: BorderRadius.circular(30),
  onTap: () {},
),

Twitter

import 'package:flutter_button/social/twitter_auth_button.dart';

 CircularTWAuthButton(
  borderRadius: BorderRadius.circular(30),
  onTap: () {},
  wOpacity: true,
),
// you of course can customize for yourself this button button i like this button with the default style

魔法授权按钮

Facebook

import 'package:flutter_button/social/facebook_auth_button.dart';

MagicalFBButton(
  title: "Sign In With Facebook",
  opacityValue: .5,
  onTap: () {},
),

Google

import 'package:flutter_button/social/google_auth_button.dart';

MagicalGGButton(
  title: "Sign In With Google",
  opacityValue: .5,
  onTap: () {},
),

Github

import 'package:flutter_button/social/github_auth_button.dart';

MagicalGIButton(
 title: "Sign In With Google",
 opacityValue: .5,
 onTap: () {},
),

Twitter

import 'package:flutter_button/social/twitter_auth_button.dart';

MagicalTWButton(
 title: "Sign In With Twitter",
 opacityValue: .5,
 onTap: () {},
),

? 自定义按钮：悬停、点赞、透明度、动画、Insta双击点赞...

? 悬停按钮

默认模式

import 'package:flutter_button/custom/hover_button.dart';

HoverButton(
  title: "Hover Button",
  onTap: () {},
),

所有属性使用的版本

import 'package:flutter_button/custom/hover_button.dart';

HoverButton(
  onTap: () {},
  title: "Add To Cart",
  titleSize: 30,
  titleColor: Colors.orange[900],
  spashColor: Colors.yellow,
  tappedTitleColor: Colors.black,
  fontWeight: FontWeight.bold,
  borderColor: Colors.orange[900],
  borderRadius: BorderRadius.only(
  bottomLeft: Radius.circular(30),
  topRight: Radius.circular(30),
 ),
),

? 动画悬停按钮

默认模式

import 'package:flutter_button/custom/hover_button.dart';

AnimatedHoverButton(
  title: "Animated Hover Button",
  onTap: () {},
),

所有属性使用的版本

import 'package:flutter_button/custom/hover_button.dart';

AnimatedHoverButton(
 onTap: () {},
 title: "Add To Cart",
 titleSize: 30,
 duration: Duration(milliseconds: 500),
 titleColor: Colors.orange[900],
 spashColor: Colors.yellow,
 tappedTitleColor: Colors.black,
 fontWeight: FontWeight.bold,
 borderColor: Colors.orange[900],
 borderRadius: BorderRadius.only(
  bottomLeft: Radius.circular(30),
  topRight: Radius.circular(30),
 ),
),

❤️ 点赞按钮

默认模式

import 'package:flutter_button/custom/like_button.dart';

LikeButton(
  onTap: () {},
),

所有属性使用的版本

import 'package:flutter_button/custom/like_button.dart';

LikeButton(
  icon: Icons.home,
  deactiveColor: Colors.grey,
  activeColor: Colors.purple,
  deactiveSize: 50,
  activeSize: 55,
  curve: Curves.easeInExpo,
  onTap: () {},
),

? 透明度按钮

import 'package:flutter_button/custom/opacity_button.dart';

OpacityButton(
  onTap: () {},
  opacityValue: .3,
  child: Image.network(
    'https://picsum.photos/id/1/200/300',
    height: 60,
  ),
),

⭐️ 动画按钮

import 'package:flutter_button/custom/anime_press_button.dart';

AnimePressButton(
  borderRadius: BorderRadius.circular(100),
  color: Colors.red,
  wGradient: true,
  gradientColors: [
    Colors.pink,
    Colors.purpleAccent,
  ],
  title: "Animation Button",
  titleColor: Colors.white,
),

❤️ Insta双击爱心按钮

默认用法

import 'package:flutter_button/custom/insta_love_button.dart';

InstaLoveButton(
  image: NetworkImage("https://picsum.photos/200/300"),
  onTap: () {},
),

所有属性使用的模式和带资源的图片

import 'package:flutter_button/custom/insta_love_button.dart';

InstaLoveButton(
  iconColor: Colors.red,
  icon: Icons.favorite_border,
  size: 80,
  height: 250,
  //width: MediaQuery.of(context).size.width,
  curve: Curves.bounceInOut,
  duration: Duration(seconds: 1),
  image: AssetImage("assets/photo.png"),
  //image: NetworkImage("https://picsum.photos/200/300"),
  onTap: () {},
),

? 文本按钮

普通文本按钮

import 'package:flutter_button/text/text_button.dart';

FlutterTextButton(
  onTap: () {},
  title: "Flutter Normal TextButton",
  defaultSize: 25,
  textAlign: TextAlign.center,
  pressedSize: 22,
  color: Colors.red[700],
  fontWeight: FontWeight.bold,
  // [locale:] Whathever you want
  // [fontFamily:] type your fontFamily
),

?️‍? 渐变文本按钮

import 'package:flutter_button/text/gradient_text_button.dart';

GradientTextButton(
  onTap: () {},
  title: "Gradient Text Button",
  gradientColors: [
    Colors.red,
    Colors.orange[800],
    Colors.yellow[700],
    Colors.limeAccent[400],
    Colors.blue[900],
    Colors.purple,
    Colors.purple[900]
  ],
  beginGradient: Alignment.topCenter,

  /// [endGradient: ...] also you can add this endGradient function
  defaultSize: 25,
  textAlign: TextAlign.center,
  pressedSize: 22,
  fontWeight: FontWeight.bold,
  /// [locale:] Whathever you wanna
  /// [fontFamily:] type your fontFamily
),

? 浮动操作按钮

⚫️ 自定义FAB

默认模式

import 'package:flutter_button/fabs/custom_fab.dart';

CustomFAB(
 child: Icon(Icons.add),
 onTap: () {},
)

带所有属性的自定义Fab

import 'package:flutter_button/fabs/custom_fab.dart';

CustomFAB(
 onTap: () {},
 child: Icon(Icons.add),
 backgroundColor: Colors.red,
 splashColor: Colors.black,
 hoverColor: Colors.blueGrey,
 topLeftRadius: 30,
 bottomRightRadius: 30,
 /// Also you can add this property [bottomLeftRadius:]
 /// And this [topRightRadius:]
),

⭐️ 星型Fab

默认模式

import 'package:flutter_button/fabs/star_fab.dart';

StarFAB(
 child: Icon(Icons.add),
 onTap: () {},
),

带所有属性的自定义Fab

import 'package:flutter_button/fabs/star_fab.dart';

StarFAB(
 backgroundColor: Colors.black,
 child: Icon(Icons.add),
 splashColor: Colors.red,
 elevation: 5,
 onTap: () {},
),

如果您想查看此软件包的完整使用示例，请查看此软件包存储库下方的示例存储库：示例存储库。

GitHub

https://github.com/theiskaa/flutter_button