All 7 Flutter Material Design Components questions
More in Flutter Material Design Components
What is Material Design, and how does Flutter's built in Material widget library let you quickly build an app that follows Google's own well established design guidelines? What is the Scaffold widget in Flutter, and how does it provide the basic overall visual structure for a typical Material Design screen, including an app bar, a body area, and a floating action button? How do Card and ListTile work together as commonly used Material widgets specifically for displaying a clean, well structured, scrollable list of individual items, such as a list of orders or messages? How does Material 3, the considerably newer version of Google's Material Design system, differ meaningfully from the earlier Material 2 in terms of its own specific visual style and available components? How can you properly build a fully custom Material component by directly composing together several lower level Material building blocks, such as InkWell and Material, rather than simply relying entirely on a fully pre built higher level widget? How should a large team properly establish and consistently enforce their own genuinely specific Material Design component usage guidelines and conventions across a genuinely large, actively shared Flutter codebase?
Advertisement
Flutter › Flutter Material Design Components

What is the difference between ElevatedButton, TextButton, and OutlinedButton in Material Design, and how does each one's own distinct specific visual style typically indicate a genuinely different relative level of visual importance or emphasis?

Intermediate

Answer

Material Design intentionally provides several distinct button styles specifically to help visually communicate a genuinely different relative level of importance or emphasis for a given action, with ElevatedButton featuring a prominent filled background and a subtle shadow specifically intended for a screen's single most important primary action, OutlinedButton featuring just a visible border without any filled background specifically intended for a secondary, though still genuinely meaningful, action, and TextButton featuring no border or filled background whatsoever, appearing as simple plain styled text specifically intended for the genuinely lowest emphasis actions, such as a simple cancel option.
Row(children: [
  TextButton(onPressed: cancel, child: Text('Cancel')),
  ElevatedButton(onPressed: confirm, child: Text('Confirm')),
])
Real-world example A confirmation dialog properly uses an ElevatedButton for its primary confirm action and a considerably lower emphasis TextButton for the cancel action, correctly and visually guiding the user's attention naturally toward the screen's genuinely intended primary action.

Common follow-ups: How do you properly customize a specific button's own particular color while still consistently following your app's own overall central theme?;What is the specific difference between FilledButton and ElevatedButton in the considerably newer Material 3 design system?

App Theming & Dark Mode;Custom Widgets & Reusable Components
All 7 Flutter Material Design Components questions