Question 177936 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to use MaterialStateTextStyle?

Flutter has abandonded its easy applicability, in particular for TextButtons.

I would like to have a transparent TextButton with a red text color. How do I implement that here and could you explain, why and how you use MaterialStateTextStyle here?

TextButton.icon(
    style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent),
              textStyle:  MaterialStateTextStyle(color : Colors.red) // wrong
                        ),
                        onPressed: () {},
                        icon: Icon(Icons.search),
                        label: Text('Search'),
                      );
Tags:

3

Answers


  1. 0

    This code can be used to make a transparent TextButton with red text color.

    TextButton.icon(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.transparent),
foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
),
onPressed: () {},
icon: const Icon(Icons.search),
label: const Text('Search'),
);
    Login or Signup to reply.
  2. 0 
    I hope this helps     



         TextButton(
                  onPressed: () {
                    // Handle button press
                  },
                  style: ButtonStyle(
                    foregroundColor: MaterialStateColor.resolveWith(
                        (states) => Colors.red),
                    overlayColor: MaterialStateColor.resolveWith(
                        (states) => Colors.transparent),
                  ),
                  child: Text('Search'),
                ),
    Login or Signup to reply.
  3. 0

    You can add color using parameter in Text and Icon like this:

    TextButton.icon(
      style: ButtonStyle(
        backgroundColor:
            MaterialStateProperty.all<Color>(Colors.transparent),
      ),
      onPressed: () {},
      icon: Icon(
        Icons.search,
        color: Colors.red,
      ),
      label: Text(
        'Search',
        style: TextStyle(color: Colors.red),
      ),
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search