Unlock the Power of New Material Buttons in Flutter
Are you tired of struggling with custom theming in your mobile app development? Look no further! With the release of Flutter v1.22, a “new universe” of Material buttons has arrived, revolutionizing the way you build mobile apps.
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. The table below shows the old widgets and themes alongside the new ones:
| Old Widget | Old Theme | New Widget | New Theme |
| — | — | — | — |
| FlatButton | ThemeData.buttonColor | TextButton | TextButtonTheme |
| RaisedButton | ThemeData.accentColor | ElevatedButton | ElevatedButtonTheme |
| OutlineButton | ThemeData.accentColor | OutlinedButton | OutlinedButtonTheme |
What Can You Do with the New Material Buttons?
- 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.
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. Don’t miss out on this opportunity to take your app to the next level!