Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aloisdeniel/sleek_button
A simple but yet customizable button.
https://github.com/aloisdeniel/sleek_button
button flat flutter simple
Last synced: 11 days ago
JSON representation
A simple but yet customizable button.
- Host: GitHub
- URL: https://github.com/aloisdeniel/sleek_button
- Owner: aloisdeniel
- License: other
- Created: 2020-03-24T11:47:13.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-03-29T12:47:33.000Z (over 4 years ago)
- Last Synced: 2024-10-12T22:43:20.061Z (27 days ago)
- Topics: button, flat, flutter, simple
- Language: Dart
- Homepage:
- Size: 257 KB
- Stars: 65
- Watchers: 5
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
A simple but yet customizable button.
## Install
Add the dependency to your `pubspec.yaml` :
```yaml
dependencies:
sleek_button:
```
## Quick start
```dart
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
```dart
SleekButton(
onTap: () {
print('tapped!');
},
style:
child: const Text('Save'),,
)
```
```dart
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.
```dart
SleekButton(
onTap: () {
print('tapped!');
},
style: <style>
child: const Icon(Icons.check),
)
```
### Styles
#### Flat
<img height="132" src="https://github.com/aloisdeniel/sleek_button/raw/master/images/style_flat.png">
```dart
SleekButtonStyle.flat(
context: context,
)
```
```dart
SleekButtonStyle.flat(
size: SleekButtonSize.small,
context: context,
)
```
```dart
SleekButtonStyle.flat(
inverted: true,
context: context,
)
```
```dart
SleekButtonStyle.flat(
rounded: true,
context: context,
)
```
```dart
SleekButtonStyle.flat(
size: SleekButtonSize.medium,
rounded: true,
context: context,
)
```
#### Outlined
<img height="132" src="https://github.com/aloisdeniel/sleek_button/raw/master/images/style_outlined.png">
```dart
SleekButtonStyle.outlined(
context: context,
)
```
```dart
SleekButtonStyle.outlined(
size: SleekButtonSize.small,
context: context,
)
```
```dart
SleekButtonStyle.outlined(
inverted: true,
context: context,
)
```
```dart
SleekButtonStyle.outlined(
rounded: true,
context: context,
)
```
```dart
SleekButtonStyle.outlined(
size: SleekButtonSize.medium,
rounded: true,
context: context,
)
```
#### Light
<img height="77" src="https://github.com/aloisdeniel/sleek_button/raw/master/images/style_light.png">
```dart
SleekButtonStyle.light(
context: context,
)
```
```dart
SleekButtonStyle.light(
size = SleekButtonSize.small,
context: context,
)
```
```dart
SleekButtonStyle.light(
rounded = true,
context: context,
)
```
```dart
SleekButtonStyle.light(
size: SleekButtonSize.medium,
rounded = true,
context: context,
)
```
#### Colors
<img height="54" src="https://github.com/aloisdeniel/sleek_button/raw/master/images/style_colors.png">
If you give a `color`, all variants (dark, light, invert) will be calculated with the help of the [derived_colors](https://github.com/aloisdeniel/derived_colors) package.
```dart
SleekButtonStyle.flat(
color: const Color(0xFF)
context: context,
)
```
```dart
SleekButtonStyle.light(
color: const Color(0xFFFFC369),
context: context,
)
```
```dart
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.
```dart
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](https://bulma.io) framework team for the inspiration.