picture_button 0.0.5

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';

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