picture_button 0.0.9

Flutter PictureButton Widget, If you just put the image inside PictureButton, you can use it like a other 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/

add

flutter pub add picture_button

import

import 'package:picture_button/picture_button.dart';

Update 🍭

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,
    imageSelected: Image.asset("assets/icon_flutter_other.png").image,
  )

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"),
 ),

👨‍👨‍👧‍👦 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 Effect(Ripple) 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,
   ...
 )