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.