How to remove the background when clicking on the text of a link?

user_9194525 0
Viewed 2157

I have a Text widget with a link to another screen, when clicked, the background appears. How do I remove the background when clicked? More in the photo

Align(                            
    alignment: AlignmentDirectional.topStart,
    child: FlatButton(
    //color: Colors.redAccent,
    onPressed: () => Navigator.of(context).push(
      new MaterialPageRoute(builder: (context){
      return new SettingPage();
    }
    ),
    ),           
    padding: EdgeInsets.only(left:20.0),
    child: Row(
      
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child:SvgPicture.asset(iconSvgS5, height: 30.0, color:Colors.blueAccent),
        ),
        Padding(
          padding: const EdgeInsets.only(left:20.0),
          child: GestureDetector(
            onTap: () => Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => FaqPage()),
          ),
          child:Text(
            "Вопросы и ответы", 
            style: TextStyle(
              fontSize: 18.0
            ),                            
          ),
          ),
        ),
      ],
    ), 
  ),

enter image description here

dart flutter
4 Answers

If you are wrapping your text widget inside of a button then the button by default have feedback to let users know when they are pressed, if you don't need the feedback consider wrapping the button with a GestureDetector widget, and passing a function to the onTap property

user_123410990

Removed the background color on click with this code:

splashColor: Colors.transparent,  
highlightColor: Colors.transparent,
user_91945250

You can use the hoverColor property of the FlatButton to set the hoverColor to your liking, here is the modified code that disables the hoverColor (simply sets it to transparent Colors.transparent) -

    Align(
      alignment: AlignmentDirectional.topStart,
      child: FlatButton(

        //setting the hover color to transparent.
        hoverColor : Colors.transparent,

        onPressed: () => Navigator.of(context).push(
          new MaterialPageRoute(builder: (context) {
            return new SettingPage();
          }),
        ),
        padding: EdgeInsets.only(left: 20.0),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: SvgPicture.asset(iconSvgS5,
                  height: 30.0, color: Colors.blueAccent),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 20.0),
              child: GestureDetector(
                onTap: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => FaqPage()),
                ),
                child: Text(
                  "Вопросы и ответы",
                  style: TextStyle(fontSize: 18.0),
                ),
              ),
            ),
          ],
        ),
      ),
    ),

Also side note having a GestureDetector inside of a FlatButton is redundant, and in your case it is ambiguous as well since they are do two separate navigation.

user_53878800

Set all color properties of the FlatButton to transparent. The example below also includes a convenient hack, how to make the clickable area wider, so if the user will press near the icon, the button will work. It improves button responsiveness.

Example

FlatButton(
  color: Colors.transparent,
  focusColor: Colors.transparent,
  hoverColor: Colors.transparent,
  highlightColor: Colors.transparent,
  splashColor: Colors.transparent,
  padding: const EdgeInsets.all(0.0),
  minWidth: 24,
  onPressed: () => Get.back(),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(
        CupertinoIcons.clear,
        color: Theme.of(context).colorScheme.pureBlack,
        size: 18,
      ),
    ],
  ),
),
user_71980060
Related