picture_button

Description:

picture button

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/
copied to clipboard
Add
flutter pub add picture_button
copied to clipboard
Import
import 'package:picture_button/picture_button.dart';
copied to clipboard


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.
),
copied to clipboard

Usage 🚀 #



parameter
required
type
default




onPressed
✔️
VoidCallback



onLongPressed
❌
VoidCallback?



onSelectChanged
❌
Function(bool isSelected)?



image
✔️
ImageProvider



imagePressed
❌
ImageProvider?



imageSelected
❌
ImageProvider?



width
❌
double?
imageWidth


height
❌
double?
imageHeight


fit
❌
BoxFit
BoxFit.contain


margin
❌
EdgeInsets?



opacity
❌
double
1.0


border
❌
Border?



borderRadius
❌
BorderRadius?



borderRadiusInk
❌
BorderRadius?



paddingInk
❌
EdgeInsetGeometry
EdgeInsets.zero


backgroundColor
❌
Color?



splashColor
❌
Color?



highlightColor
❌
Color?



focusColor
❌
Color?



hoverColor
❌
Color?



enabled
❌
bool
true


useBubbleEffect
❌
bool
false


bubbleEffect
❌
PictureBubbleEffect?
PictureBubbleEffect.shrink


child
❌
Widget?





👨‍👩‍👧‍👦 AssetImage(..), NetworkImage(..), FileImage(..), MemoryImage(..)
PictureButton(
onPressed: () {

},
image: const AssetImage("assets/google_sign_image.png"),
),
copied to clipboard

👨‍👨‍👧‍👦 Image.asset(..), Image.network(..), Image.file(..), Image.memory(..)
Use later .image getter function.
PictureButton(
onPressed: () {

},
image: Image.asset("assets/google_sign_image.png").image,
),
copied to clipboard

🛀 Bubble Effect
useBubbleEffect: true
PictureButton(
onPressed: () {

},
image: Image.asset("assets/google_sign_image.png").image,
useBubbleEffect: true,
bubbleEffect: PictureBubbleEffect.shrink, // [shrink, expand]
),
copied to clipboard

🖌 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,
),
copied to clipboard

✂ 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.
),
copied to clipboard

🏈 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,
...
)
copied to clipboard

🌗 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,
)
copied to clipboard