Flutter's Three Main Material Buttons

WHY IT EXISTS: Material Design provides a standard set of buttons to create consistent, intuitive user interfaces. Instead of manually styling every button for every situation, Flutter gives you pre-built widgets that cover the most common use cases, each with a clear, built-in level of visual importance.

THE MENTAL MODEL: Think of buttons as a hierarchy of emphasis, not just different styles. An ElevatedButton is for the most important action on the screen. An OutlinedButton is for an important, but not primary, action. A TextButton is for the least important, tertiary actions. Your choice guides the user's attention.

HOW IT WORKS: ElevatedButton, OutlinedButton, and TextButton are all Flutter widgets. You use them by providing an onPressed callback function that executes when tapped, and a child widget, which is typically a Text widget for the label. Their default appearance is determined by your app's ThemeData, ensuring consistency. ElevatedButton is filled and has a shadow, signaling high importance. OutlinedButton has a border and a transparent fill, for medium importance. TextButton is just text, for low importance.

WHEN TO USE IT: Use ElevatedButton for the single most important action a user can take, like 'Sign In' on a login screen or 'Save' in a form. Use OutlinedButton for secondary positive actions, like 'Next Step' in a multi-page flow. Use TextButton for optional or low-stakes actions, such as 'Cancel' in a dialog or a 'Learn More' link.

WHEN NOT TO USE IT: Don't use multiple ElevatedButtons next to each other; this creates visual noise and confuses the user about which action is primary. Avoid using an ElevatedButton for a destructive or 'cancel' action, as its prominence can lead to accidental taps. The choice should be based on semantic meaning, not just aesthetics.

ONE CANONICAL EXAMPLE: In a login form, the 'Sign In' action is the primary goal, so it should be an ElevatedButton. An option like 'Forgot Password?' is a secondary, less common path, making it a perfect candidate for a TextButton. This visual hierarchy clearly communicates the intended user flow without any extra words.