picture_button 0.0.4

Flutter PictureButton Widget, If you just put the image inside PictureButton, you can use it like a other button

f<!-- This README describes the package. If you publish this package to pub.dev, this README's contents appear on the landing page for your package.

For information about how to write a good package README, see the guide for writing package pages.

For general information about developing packages, see the Dart guide for creating packages and the Flutter guide for developing packages and plugins. -->

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