Pub Version

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 ๐Ÿœ

GIF

Getting started ๐ŸŒฑ

my example image(google sign image)
path : [project]/assets/

Screenshot


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.

GIF
  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 :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 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.

GIF
 PictureButton(
   onPressed: () {
     
   },
   image: Image.asset("assets/icon_flutter_default.png").image,
   imagePressed: Image.asset("assets/icon_flutter_pressed.png").image,
   ...
 )

Libraries

picture_button