flutter selector - InkWell change background color when user pressed
 
Searhing keywords
- flutter button selector
- flutter inkwell selector
- flutter when pressed button change container background color

Solution
1- Widget should be StatefullWidget.
2- We are using InkWell onHighlightChanged method.
3- I create custom InkWell widget. Class name: cButtonIconable

CODE
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class cButtonIconable extends StatefulWidget {

  final Function onClick;
  final String iconPath;
  final String text;
  final Color textColor;
  final Color iconColor;
  final Color bgColor;
  final double fontSize;
  final FontStyle fontStyle;

  const cButtonIconable({
    Key key,
    @required this.onClick,
    @required this.iconPath,
    @required this.text,
    this.textColor,
    this.iconColor,
    @required this.bgColor,
    this.fontSize = 14,
    this.fontStyle = FontStyle.normal
  }) : super(key: key);

  @override
  _cButtonIconableState createState() => _cButtonIconableState();
}

class _cButtonIconableState extends State<cButtonIconable>{
  bool isPressed = false;
  @override
  Widget build(BuildContext context) {
    return InkWell(
      highlightColor: Colors.transparent,
      splashColor: Colors.transparent,
      onHighlightChanged: (param){
        setState((){
          isPressed = param;
        });
      },
      onTap: () {
        widget.onClick();
      },
      child: Container(
          margin: EdgeInsets.symmetric(vertical: 5),
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
          decoration: BoxDecoration(
              color: isPressed ? Colors.red : widget.bgColor,
              borderRadius: BorderRadius.all(Radius.circular(10))),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Image.asset(
                widget.iconPath,
                width: 20,
                color: widget.iconColor != null ? widget.iconColor : null,
              ),
              SizedBox(
                width: 5,
              ),
              Text(
                widget.text,
                style: TextStyle(color: widget.textColor != null ? widget.textColor : null, fontSize: widget.fontSize, fontStyle: widget.fontStyle),
              )
            ],
          )),
    );
  }

}


Custom widget Using on SignInPage.dart
                              
cButtonIconable(
	onClick: () async {
	  //Test();
	  // await LoginWithFacebook();
	},
	iconPath: ConstantsImagePath.facebook,
	text: ResourceKey.loginWithFacebook,
	textColor: ColorDark2,
	iconColor: ColorFacebook,
	bgColor: ColorPrimaryLight2,
	fontSize: 15,
  )


Screenshot Gif


 

Author: Engin ATALAY
Date: 31.01.2021 13:18:40
View Count: 1687
 
 

COMMENTS
 
No comments yet. Be the first to comment who you are.
 
 
 
 
 
 
 
WRITE COMMENT
 
 
Your Name :
 
 
 
E-mail :
 
 
 
Your Message :
 
 
 
 
 
 
 
This project : ASP.NET MVC , RAZOR, Entity Framework , CSS , HTML , JQUERY(2.0.2) , AJAX the C# side-tier architecture was developed with logic.
 
Yukarı Çık