A simple but yet customizable button.
Install
Add the dependency to your pubspec.yaml :
dependencies:
sleek_button: <version>
Quick start
SleekButton (
onTap: () {
print ('tapped!' );
},
style: SleekButtonStyle .flat (
color: swatch.primary,
inverted: true ,
rounded: true ,
size: SleekButtonSize .big,
context: context,
),
child: const Icon (Icons .format_bold),
)
Usage
Widget
SleekButton (
onTap: () {
print ('tapped!' );
},
style: <style>
child: const Text ('Save' ),,
)
SleekButton (
onTap: () {
print ('tapped!' );
},
style: <style>
child: Row (
mainAxisSize: MainAxisSize .min,
children: <Widget >[
const Icon (Icons .check),
const SizedBox (width: 6 ),
const Text ('Save' ),
],
),
)
If the direct child is an Icon, the button will be a square.
SleekButton (
onTap: () {
print ('tapped!' );
},
style: <style>
child: const Icon (Icons .check),
)
Styles
Flat
SleekButtonStyle .flat (
context: context,
)
SleekButtonStyle .flat (
size: SleekButtonSize .small,
context: context,
)
SleekButtonStyle .flat (
inverted: true ,
context: context,
)
SleekButtonStyle .flat (
rounded: true ,
context: context,
)
SleekButtonStyle .flat (
size: SleekButtonSize .medium,
rounded: true ,
context: context,
)
Outlined
SleekButtonStyle .outlined (
context: context,
)
SleekButtonStyle .outlined (
size: SleekButtonSize .small,
context: context,
)
SleekButtonStyle .outlined (
inverted: true ,
context: context,
)
SleekButtonStyle .outlined (
rounded: true ,
context: context,
)
SleekButtonStyle .outlined (
size: SleekButtonSize .medium,
rounded: true ,
context: context,
)
Light
SleekButtonStyle .light (
context: context,
)
SleekButtonStyle .light (
size = SleekButtonSize .small,
context: context,
)
SleekButtonStyle .light (
rounded = true ,
context: context,
)
SleekButtonStyle .light (
size: SleekButtonSize .medium,
rounded = true ,
context: context,
)
Colors
If you give a color, all variants (dark, light, invert) will be calculated with the help of the derived_colors package.
SleekButtonStyle .flat (
color: const Color (0xFF )
context: context,
)
SleekButtonStyle .light (
color: const Color (0xFFFFC369 ),
context: context,
)
SleekButtonStyle .outlined (
color: const Color (0xFF323232 ),
context: context,
)
Theme
You can customize the default appearance of the button by adding a SleekButtonTheme in the tree. If a Theme is in the tree,
it will use it tu deduce a default theme.
SleekButtonTheme (
data: const SleekButtonThemeData (
padding: 24 ,
textStyle: TextStyle (fontSize: 11 ),
cornerRadius: 8.0 ,
iconTheme: IconThemeData (size: 10 ),
fill: Color (0xFFFF0000 ),
borderWidth: 2 ,
),
child: app,
)
Thanks
Thanks to the bulma framework team for the inspiration.
