v min read

The TextButton widget in Palpitate is used to show the less-prominent action. It is more often than not used inside the UI elements such equally Dialog and Cards. The TextButton is the replacement of the FlatButton and makes information technology like shooting fish in a barrel to customize without affecting the other buttons. While working on the Palpitate app, you may desire to customize it to match your design. Then in this tutorial, nosotros larn how to change the Text Button color in Flutter. We'll likewise explore changing the color when Text Button is disabled, hovered, and when it is inside the AboutDialog.

Here'southward what we'll cover:

  • The Problem
  • Steps to Change the Text Button Color in Flutter
  • How to Alter the Background Color of the Text Button
  • Customize the Text Button Color for Disable State
  • Changing the Text Button Border Color
  • Setting Text Button Color on Hover
  • Changing Text Button Color inside AboutDialog

The Problem

When you add together the Text Button widget in your app, the colour given to information technology, is by default the primarySwatch color. If you but started with the new app, you may see the Text Button with the Blueish color. 

Code Case 1: 

MaterialApp(   title: 'Flutter Demo',   theme: ThemeData(     primarySwatch: Colors.blue,   ),   domicile: TextButtonColorDemo(), ); TextButton(   onPressed: () {},   child: const Text(     'Text Button ',     way: TextStyle(fontSize: 24),   ), )

Trouble 1:

text button color problem

Sometimes, you lot may desire to set the color to Text Button which is different from the primarySwatch colour. For case, changing the text button color inside the AboutDialog or Bill of fare.

Code Example two: 

MaterialApp(   title: 'Flutter Demo',   theme: ThemeData(     primarySwatch: Colors.blueish,   ),   dwelling house: TextButtonColorDemo(), ); const AboutListTile(   kid: Center(       child: Text(     'About app',     manner: TextStyle(fontSize: 24),   )),   applicationIcon: Icon(     Icons.local_play,   ),   applicationName: 'My Cool App',   applicationVersion: '1.0.25',   applicationLegalese: '© 2019 Company',   aboutBoxChildren: [     ///Content goes hither...   ], )

Problem 2:

text button color problem inside about dialog

Steps to Change the Text Button Color in Palpitate

To change the Text Push button color in Flutter, simply add the style parameter inside the Text Button and assign the TextButton.styleFrom() with the primary property prepare to any color of your choice.

Hither's is how you practice that:

Step ane: Add the way parameter (inside TextButton) and assign the TextButton.styleFrom() .

Pace 2: Inside the TextButton.styleFrom(), Add together the main parameter and assign any color.

Step 3: Run the App.

Code Example: 

TextButton(   onPressed: () {},   mode: TextButton.styleFrom(     primary: Colors.purpleAccent, // Text Colour   ),   child: const Text(     'Text Button ',     mode: TextStyle(fontSize: 24),   ), )

Output:

change text button color

How to Change the Background Color of the Text Button

To change the backgroundColor of the Text Button, you can add the backgroundColor property inside the TextButton.styleFrom() and give information technology a proper colour

Here's are the steps:

  • Add together the style parameter (inside TextButton) and assign the TextButton.styleFrom() .
  • Inside the TextButton.styleFrom(), Add the backgroundColor parameter and assign any color.

Code Instance: 

TextButton(   onPressed: () {},   fashion: TextButton.styleFrom(       principal: Colors.purpleAccent,       backgroundColor: Colors.black, // Background Color ),   child: const Text(     'Text Push ',     manner: TextStyle(fontSize: 24),   ), )

Output:

change text button background color

Customize the Text Button Color for Disable State

To change the Text Push button Color when it is disabled:

  • Just add the onSurface property inside the Text Button and set the suitable colour.

Code Example: 

TextButton(   onPressed: nothing,   fashion: TextButton.styleFrom(     primary: Colors.purpleAccent,     onSurface: Colors.greyness, // Disable color   ),   child: const Text(     'Text Button ',     manner: TextStyle(fontSize: 24),   ), )

Hint: Make certain y'all pass the null to onPressed property while testing the disable color.

Output:

text button background color when disabled

Changing the Text Push Border Color

To change the Text Button Border Colour, you must add the border first and then customize it.

Here's how you add together border and change color:

  • Add together the side property, and ready the BorderSide().
  • Inside the BorderSide() add the width and color holding with appropriate values.

Lawmaking Example: 

TextButton(   onPressed: () {},   manner: TextButton.styleFrom(     primary: Colors.purpleAccent,     side: BorderSide(colour: Colors.cerise, width: 5),   ),   kid: const Text(     'Text Push button ',     manner: TextStyle(fontSize: 24),   ), )

Output:

text button border color

Setting Text Button Color on Hover

If yous are developing the spider web app in Flutter, you lot may want to highlight the Text Button when the mouse hovers over it.

To set hover over color:

  • Within the Manner property, add the ButtonStyle().
  • Now, within the ButtonStyle() add the foregroundColor or backgroundColor and decide which color to show based on the MaterialState.

Code Example: 

TextButton(   onPressed: () {},   manner: ButtonStyle(     foregroundColor: MaterialStateProperty.resolveWith<Color>(         (Prepare<MaterialState> states) {       if (states.contains(MaterialState.hovered))         return Colors.green;       return Colors           .purpleAccent;     }),   ),   kid: const Text(     'Text Button ',     mode: TextStyle(fontSize: 24),   ), )

Output:

text button color on hover

Changing Text Push button Color within AboutDialog

If yous accept added the AboutDialog in your Palpitate app, when the dialog gets open up, you see the text color of the button is the same as the primarySwatch of the app.

To change the colour of the text button inside AboutDialog:

  • Go to your principal.dart file.
  • Inside the MaterialApp, find the ThemeData widget.
  • Add the textButtonTheme property.
  • Add together the style property and change the colour as you would change it for normal TextButton.
  • Open the AboutDialog and see the result.

Code Instance: 

MaterialApp(   championship: 'Flutter Demo',   theme: ThemeData(     primarySwatch: Colors.blue,     textButtonTheme: TextButtonThemeData(       style: TextButton.styleFrom(         chief: Colors.purpleAccent, // This is a custom color variable       ),     ),   ),   dwelling: TextButtonColorDemo(), ); @override Widget build(BuildContext context) {   return Scaffold(     appBar: ...     body: Eye(       child: Cavalcade(         children: [           SizedBox(             peak: 50,           ),           const AboutListTile(             child: Center(                 child: Text(               'About app',               style: TextStyle(fontSize: 24),             )),             applicationIcon: Icon(               Icons.local_play,             ),             applicationName: 'My Cool App',             applicationVersion: '1.0.25',             applicationLegalese: '© 2019 Visitor',             aboutBoxChildren: [               ///Content goes hither...             ],           )         ],       ),     ),   ); }

Output:

text button color inside about dialog

That'south it. Thanks!

Conclusion

In this tutorial, we learned how to change the Text Button color in Flutter with a practical case. We as well saw how to modify the color when Text Push button is disabled, hovered. Nosotros learned the way to change the text button color when it is within the AboutDialog.

Would you like to bank check other interesting Palpitate tutorials?