picture_button 0.0.3

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]/example/assets/

grant assets path from pubspec.yaml
path : [project]/example/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 image_button

import

import 'package:image_button/picture_button.dart';

Usage 🚀

parameter	required	type	default
onPressed	✔️	VoidCallback
onLongPressed	❌	VoidCallback?
image	✔️	ImageProvider
width	❌	double?	imageWidth
height	❌	double?	imageHieght
fit	❌	BoxFit	BoxFit.contain
opacity	❌	double	1.0
border	❌	Border?
borderRadius	❌	BorderRadius?
borderRadiusInk	❌	BorderRadius?
paddingInk	❌	EdgeInsetGeometry	EdgeInsets.zero
imageBacgroundColor	❌	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.
  ),