# Button

Buttons include some widgets that based on existing FlatButton & RaisedButton, and also added FLGradientButton which supports gradient background and FLLoadingButton which supports loading animation.

# FLFlatButton

FLFlatButton is based on FlatButton, it has a new property 'expanded' and a factory method 'icon' to specify where the icon is located in the button.

# expanded:

FLFlatButton(
    expanded: true,
    color: Color(0xFF0F4C81),
    textColor: Colors.white,
    child: Text('Expanded Button', textAlign: TextAlign.center),
    onPressed: () => print('on click'),
),

# icon:

FLFlatButton.icon(
    padding: const EdgeInsets.all(5),
    textColor: Color(0xFF0F4C81),
    onPressed: () => print('on click'),
    icon: Icon(Icons.account_box, color: mainColor),
    label: Text('Click to change icon position'),
    spacing: 5,
    iconPosition: FLPosition.right,
)

# FLRaisedButton

FLRaisedButton is based on RaisedButton, it also adds 'expanded' and 'icon'. The usage is the same as FLFlatButton.

# FLGradientButton

FLGradientButton supports gradient backgrounds. There are three factory methods to display different types of gradients: linear, sweep and radial.

# linear

FLGradientButton.linear(
    textColor: Colors.white,
    child: Text('Linear Gradient Button'),
    colors: [Colors.lightBlueAccent, Color(0xFF0F4C81)],
    onPressed: () => print('on click'),
)

# sweep

FLGradientButton.sweep(
    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
    center: FractionalOffset.center,
    startAngle: 0.0,
    endAngle: math.pi * 2,
    colors: const <Color>[
        Color(0xFF4285F4), // blue
        Color(0xFF34A853), // green
        Color(0xFFFBBC05), // yellow
        Color(0xFFEA4335), // red
        Color(0xFF4285F4), // blue again to seamlessly transition to the start
    ],
    stops: const <double>[0.0, 0.25, 0.5, 0.75, 1.0],
    textColor: Colors.white,
    child: Text('Sweep Gradient Button'),
    onPressed: () => print('on click'),
)

# radial

FLGradientButton.radial(
    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
    center: const Alignment(0.7, -0.6), // near the top right
    radius: 0.2,
    colors: [
        const Color(0xFFFFFF00), // yellow sun
        const Color(0xFF0099FF), // blue sky
    ],
    stops: [0.4, 1.0],
    textColor: Colors.white,
    child: Text('Radial Gradient Button'),
    onPressed: () => print('on click'),
)

# FLLoadingButton

FLLoadingButton controls whether to display the indicator by setting the loading property. It also provides properties to style the indicator.

# text & indicator

FLLoadingButton(
    child: Text('Login'),
    color: Color(0xFF0F4C81),
    disabledColor: Color(0xFF0F4C81),
    indicatorColor: Colors.white,
    disabledTextColor: Colors.grey.withAlpha(40),
    textColor: Colors.white,
    loading: _loading,
    minWidth: 200,
    onPressed: () {
        setState(() => _loading = true);
        Future.delayed(Duration(seconds: 3), () => setState(() => _loading = false));
    },
)

# only indicator

FLLoadingButton(
    child: Text('Login'),
    color: Color(0xFF0F4C81),
    disabledColor: Color(0xFF0F4C81),
    indicatorColor: Colors.white,
    textColor: Colors.white,
    loading: _loading,
    minWidth: 200,
    indicatorOnly: true,
    onPressed: () {
        setState(() => _loading = true);
        Future.delayed(Duration(seconds: 3), () => setState(() => _loading = false));
    }
)

# API

# FLFlatButton

property	description	type	default value
expanded	expand size	bool	false

# FLFlatButton.icon

property	description	type
iconPosition	icon's position in button	FLPosition
spacing	the space between icon and label	double
icon	icon widget	Widget
label	text widget	Widget

# FLRaisedButton

property	description	type	default value
expanded	expand size	bool	false

# FLRaisedButton.icon

property	description	type
iconPosition	icon's position in button	FLPosition
spacing	the space between icon and label	double
icon	icon widget	Widget
label	text widget	Widget

# FLGradientButton

# FLGradientButton.linear

property	description	type	default value
colors	gradient color list	List<Color>
stops	a list of values from 0.0 to 1.0 that denote fractions along the gradient	List<double>
begin	the offset at which stop 0.0 of the gradient is placed	AlignmentGeometry	Alignment.centerLeft
end	the offset at which stop 1.0 of the gradient is placed	AlignmentGeometry	Alignment.centerRight
tileMode	how this gradient should tile the plane beyond in the region before	TileMode	TileMode.clamp

# FLGradientButton.sweep

property	description	type	default value
colors	gradient color list	List<Color>
stops	a list of values from 0.0 to 1.0 that denote fractions along the gradient	List<double>
center	the center of the gradient	AlignmentGeometry	Alignment.center
startAngle	the angle in radians at which stop 0.0 of the gradient is placed	double	0.0
endAngle	the angle in radians at which stop 1.0 of the gradient is placed	double	math.pi * 2
tileMode	how this gradient should tile the plane beyond in the region before	TileMode	TileMode.clamp

# FLGradientButton.radial

property	description	type	default value
colors	gradient color list	List<Color>
stops	a list of values from 0.0 to 1.0 that denote fractions along the gradient	List<double>
center	the center of the gradient	AlignmentGeometry	Alignment.center
radius	the radius of the gradient	double	0.5
tileMode	how this gradient should tile the plane beyond in the region before	TileMode	TileMode.clamp
focal	the focal point of the gradient	AlignmentGeometry
focalRadius	the radius of the focal point of gradient	double	0.0

# FLLoadingButton

property	description	type	default value
indicatorColor	the color of indicator	Color	Theme.of(context).accentColor
indicatorSize	the size of indicator	double
indicatorOnly	only show indicator or not	bool	false
loading	loading state	bool	false

Label →