flutter_button
flutter custom, text, 3d, social media button’s package.
flutter_button extension contains:
- 3d button,
- anime press button, hover button, like button, opacity button
- custom fab, star fab.
- facebook auth button, circle fb auth button, magical fb auth button, google auth button, circle gg auth button, magical gg auth button, github auth button, circle gi auth button, magical gi auth button, twitter auth button, circle tw auth button, magical tw auth button,
- text button, gradient text button.
installation and usage.
add this line on the pubspec.yaml
dependencies:
...
flutter_button: ^0.0.2
oki let’s start using flutter_button ��
�� 3d button usage
default mode
import 'package:flutter_button/3d/3d_button.dart';
button3d(
onpressed: () {},
child: text("3d button"),
),
3d buttons with the custom properties
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"),
),
⚛︎ social auth buttons
default mode of facebook auth button
import 'package:flutter_button/social/facebook_auth_button.dart';
facebookauthbutton(
ontap: () {},
borderradius: borderradius.circular(30),
),
facebook auth button with custom properties
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,
),
],
) ,
default mode of google auth button
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 auth button with custom properties
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),
),
]
),
default mode of github auth button
import 'package:flutter_button/social/github_auth_button.dart';
githubauthbutton(
borderradius: borderradius.circular(30),
ontap: () {},
),
github auth button with custom properties
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,
),
],
),
default mode of twitter auth button
import 'package:flutter_button/social/twitter_auth_button.dart';
twitterauthbutton(
borderradius: borderradius.circular(30),
ontap: () {},
),
twitter auth button with custom properties
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,
),
],
),
circular auth buttons
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,
),
],
),
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),
),
],
),
<em/em>
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: () {},
),
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
magical auth buttons
import 'package:flutter_button/social/facebook_auth_button.dart';
magicalfbbutton(
title: "sign in with facebook",
opacityvalue: .5,
ontap: () {},
),
import 'package:flutter_button/social/google_auth_button.dart';
magicalggbutton(
title: "sign in with google",
opacityvalue: .5,
ontap: () {},
),
<em/em>
import 'package:flutter_button/social/github_auth_button.dart';
magicalgibutton(
title: "sign in with google",
opacityvalue: .5,
ontap: () {},
),
import 'package:flutter_button/social/twitter_auth_button.dart';
magicaltwbutton(
title: "sign in with twitter",
opacityvalue: .5,
ontap: () {},
),
�� custom buttons: hover, like, opacity, animation, insta doubletap like…
�� hover button:
default mode
import 'package:flutter_button/custom/hover_button.dart';
hoverbutton(
title: "hover button",
ontap: () {},
),
all properties used version
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),
),
),
�� animated hover button:
default mode
import 'package:flutter_button/custom/hover_button.dart';
animatedhoverbutton(
title: "animated hover button",
ontap: () {},
),
all properties used version
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),
),
),
❤️ like button:
default mode
import 'package:flutter_button/custom/like_button.dart';
likebutton(
ontap: () {},
),
all properties used version
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: () {},
),
�� opacity button:
import 'package:flutter_button/custom/opacity_button.dart';
opacitybutton(
ontap: () {},
opacityvalue: .3,
child: image.network(
'https://picsum.photos/id/1/200/300',
height: 60,
),
),
⭐️ animation button:
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 doubletap love button:
default usage
import 'package:flutter_button/custom/insta_love_button.dart';
instalovebutton(
image: networkimage("https://picsum.photos/200/300"),
ontap: () {},
),
all properties used mode and with asset’s image
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: () {},
),
�� text buttons
normal text button:
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
),
��️�� gradient text button:
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
),
�� floating action buttons
⚫️ custom fab
default mode
import 'package:flutter_button/fabs/custom_fab.dart';
customfab(
child: icon(icons.add),
ontap: () {},
)
custom fab with all properties
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:]
),
⭐️ star fab
default mode
import 'package:flutter_button/fabs/star_fab.dart';
starfab(
child: icon(icons.add),
ontap: () {},
),
custom fab with all properties
import 'package:flutter_button/fabs/star_fab.dart';
starfab(
backgroundcolor: colors.black,
child: icon(icons.add),
splashcolor: colors.red,
elevation: 5,
ontap: () {},
),
if you wanna to look this package’s full usage exapmle, check the example repo which one is down to this package’s repository: example repository.
Comments are closed.