Unlock the Power of New Material Buttons in Flutter

What’s New?

The new Material buttons in Flutter are designed to replace the old button classes, bringing your app up-to-date with the latest Material Design spec guidelines. These new buttons are easier to understand and use, making it simple to define common themes at the app and widget levels.

Meet the New Material Buttons

• TextButton: Perfect for places like AppBars and dialogs, TextButton is ideal for closing screens or confirming actions.
• ElevatedButton: Best suited for direct user actions, such as booking tickets or confirming orders, ElevatedButton demands attention.
• OutlinedButton: A medium-emphasis button that combines the best of TextButton and ElevatedButton, OutlinedButton is perfect for important but non-crucial actions.

How Do They Differ?

Each new Material button has its own theme, giving you more flexibility than the old Flutter buttons.

What Can You Do with the New Material Buttons?

The new Material buttons offer a range of customization options:

• Overriding Properties: Change the color of the text inside the button using the style property and ButtonStyle class.
• Customizing Buttons: Use MaterialStateProperty to define colors based on different button states, such as pressed, hover, focused, and disabled.
• Setting Defaults at the App Level: Change the text color of TextButton without affecting other buttons using the textButtonTheme property.

TextButton(
  child: Text('Click me'),
  style: ButtonStyle(
    textStyle: MaterialStateProperty.all(TextStyle(fontSize: 18)),
  ),
)

Why Should You Use the New Material Buttons?

The new buttons in Flutter v1.22 can save you a ton of time, allowing you to focus on developing your app rather than finding fixes for simple solutions. With more control over button defaults at the app level, you can create a seamless user experience.

Take advantage of the new Material buttons to take your app to the next level!