PictureButton is setting only Image(ImageProvider type) and onPressed. like ButtonStyle.
I am very happy that I somehow seem to have deployed a useful widget.
Features ๐
Getting started ๐ฑ
My example image(google sign image)
path : [project]/assets/
Grant assets path from pubspec.yaml
path : [project]/pubspec.yaml
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
assets:
- assets/
Add
flutter pub add picture_button
Import
import 'package:picture_button/picture_button.dart';
Update ๐ญ
Add vibrate
parameter from 0.0.10
version.
You can set vibration effect.
It just input true
or false
parameter that is bool type.
That is default setting true
.
PictureButton(
onPressed: () {
},
image: const AssetImage("assets/google_sign_image.png"),
vibrate: false, // default, true.
),
Usage ๐
parameter | required | type | default |
---|---|---|---|
onPressed | :heavy_check_mark: | VoidCallback | |
onLongPressed | :x: | VoidCallback? | |
onSelectChanged | :x: | Function(bool isSelected)? | |
image | :heavy_check_mark: | ImageProvider | |
imagePressed | :x: | ImageProvider? | |
imageSelected | :x: | ImageProvider? | |
width | :x: | double? | imageWidth |
height | :x: | double? | imageHeight |
fit | :x: | BoxFit | BoxFit.contain |
margin | :x: | EdgeInsets? | |
opacity | :x: | double | 1.0 |
border | :x: | Border? | |
borderRadius | :x: | BorderRadius? | |
borderRadiusInk | :x: | BorderRadius? | |
paddingInk | :x: | EdgeInsetGeometry | EdgeInsets.zero |
backgroundColor | :x: | Color? | |
splashColor | :x: | Color? | |
highlightColor | :x: | Color? | |
focusColor | :x: | Color? | |
hoverColor | :x: | Color? | |
enabled | :x: | bool | true |
useBubbleEffect | :x: | bool | false |
bubbleEffect | :x: | PictureBubbleEffect? | PictureBubbleEffect.shrink |
child | :x: | Widget? |
๐จโ๐ฉโ๐งโ๐ฆ AssetImage(..), NetworkImage(..), FileImage(..), MemoryImage(..)
PictureButton(
onPressed: () {
},
image: const AssetImage("assets/google_sign_image.png"),
),
๐จโ๐จโ๐งโ๐ฆ Image.asset(..), Image.network(..), Image.file(..), Image.memory(..)
Use later .image
getter function.
PictureButton(
onPressed: () {
},
image: Image.asset("assets/google_sign_image.png").image,
),
๐ Bubble Effect
useBubbleEffect: true
PictureButton(
onPressed: () {
},
image: Image.asset("assets/google_sign_image.png").image,
useBubbleEffect: true,
bubbleEffect: PictureBubbleEffect.shrink, // [shrink, expand]
),
๐ If you don't want Effect(Ripple) Color (I said 'Ink')
splashColor: Colors.transparent
highlightColor: Colors.transparent
PictureButton(
onPressed: () {
},
image: Image.asset("assets/google_sign_image.png").image,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
),
โ Measure Ripple Effect BorderRadius
borderRadiusInk: BorderRadius.circular(8.0)
PictureButton(
onPressed: () {
},
image: Image.asset("assets/google_sign_image.png").image,
borderRadiusInk: BorderRadius.circular(8.0),
// paddingInk: EdgeInsets.all(8.0), if you want measure 'Ink' padding.
),
๐ Pressed Button Image
Add imagePressed
parameter from 0.0.8
version.
You can see the pressed image when you implement onPressed
event.
PictureButton(
onPressed: () {
},
image: Image.asset("assets/icon_flutter_default.png").image,
imagePressed: Image.asset("assets/icon_flutter_pressed.png").image,
...
)
๐ Toggle Button
Add imageSelected
and onSelectChanged
parameters from 0.0.9
version.
You can toggle action from this release.
When you want to see toggle action, Certainly define imageSelected
and onSelectChanged
parameters.
If you do not define one, there do not work.
PictureButton(
onPressed: () {
},
onSelectChanged: (isSelected) {
},
image: Image.asset("assets/icon_flutter_default.png").image,
imagePressed: Image.asset("assets/icon_flutter_pressed.png").image,
imageSelected: Image.asset("assets/icon_flutter_other.png").image,
)