Skip to content

Material 3 dialog with hero icon #104882

@Craftplacer

Description

@Craftplacer

Use case

Tried to adopt the new Material 3 dialog spec and found that Flutter does not "natively" support it and requires adding unintended widgets (like Column, Icon and SizedBox) in the title parameter to replicate it.

Proposal

Additional parameter/field heroIcon, causing the AlertDialog to adopt the "hero style".

Expected sample code mimicking Material spec render:

AlertDialog(
  heroIcon: Icon(Icons.mobile_friendly),
  title: Text('Dialog with hero icon'),
  content: Text(
    'A dialog is a type of modal window that '
    'appears in front of app content to provide '
    'critical information, or ask for a decision.',
  ),
  actions: [
    TextButton(child: Text("Enabled"), onPressed: () {}),
    TextButton(child: Text("Enabled"), onPressed: () {}),
  ]
),

By observing the Material specs following things should happen:

  • title should inherit textAlign: TextAlign.center when a heroIcon is provided.
  • heroIcon should use ThemeData.colorScheme.secondary as its color.

As defined by https://m3.material.io/components/dialogs/specs#23e479cf-c5a6-4a8b-87b3-1202d51855ac

Metadata

Metadata

Assignees

Labels

c: new featureNothing broken; request for a new capabilityc: proposalA detailed proposal for a change to Flutterf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions