Skip to content

Commit b8734b1

Browse files
authored
Add Material 3 Dialog examples and update existing Dialog examples (#101508)
1 parent f4875ae commit b8734b1

11 files changed

Lines changed: 418 additions & 24 deletions

File tree

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
// Flutter code sample for AlertDialog
6+
7+
import 'package:flutter/material.dart';
8+
9+
void main() => runApp(const MyApp());
10+
11+
class MyApp extends StatelessWidget {
12+
const MyApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return MaterialApp(
17+
home: Scaffold(
18+
appBar: AppBar(title: const Text('AlertDialog Sample')),
19+
body: const Center(
20+
child: DialogExample(),
21+
),
22+
),
23+
);
24+
}
25+
}
26+
27+
class DialogExample extends StatelessWidget {
28+
const DialogExample({Key? key}) : super(key: key);
29+
30+
@override
31+
Widget build(BuildContext context) {
32+
return TextButton(
33+
onPressed: () => showDialog<String>(
34+
context: context,
35+
builder: (BuildContext context) => AlertDialog(
36+
title: const Text('AlertDialog Title'),
37+
content: const Text('AlertDialog description'),
38+
actions: <Widget>[
39+
TextButton(
40+
onPressed: () => Navigator.pop(context, 'Cancel'),
41+
child: const Text('Cancel'),
42+
),
43+
TextButton(
44+
onPressed: () => Navigator.pop(context, 'OK'),
45+
child: const Text('OK'),
46+
),
47+
],
48+
),
49+
),
50+
child: const Text('Show Dialog'),
51+
);
52+
}
53+
}

examples/api/lib/material/dialog/alert_dialog.1.dart

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,22 @@ void main() => runApp(const MyApp());
1111
class MyApp extends StatelessWidget {
1212
const MyApp({Key? key}) : super(key: key);
1313

14-
static const String _title = 'Flutter Code Sample';
15-
1614
@override
1715
Widget build(BuildContext context) {
1816
return MaterialApp(
19-
title: _title,
17+
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
2018
home: Scaffold(
21-
appBar: AppBar(title: const Text(_title)),
19+
appBar: AppBar(title: const Text('AlertDialog Sample')),
2220
body: const Center(
23-
child: MyStatelessWidget(),
21+
child: DialogExample(),
2422
),
2523
),
2624
);
2725
}
2826
}
2927

30-
class MyStatelessWidget extends StatelessWidget {
31-
const MyStatelessWidget({Key? key}) : super(key: key);
28+
class DialogExample extends StatelessWidget {
29+
const DialogExample({Key? key}) : super(key: key);
3230

3331
@override
3432
Widget build(BuildContext context) {

examples/api/lib/material/dialog/show_dialog.0.dart

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,41 +11,63 @@ void main() => runApp(const MyApp());
1111
class MyApp extends StatelessWidget {
1212
const MyApp({Key? key}) : super(key: key);
1313

14-
static const String _title = 'Flutter Code Sample';
15-
1614
@override
1715
Widget build(BuildContext context) {
1816
return const MaterialApp(
19-
restorationScopeId: 'app',
20-
title: _title,
21-
home: MyStatelessWidget(),
17+
home: DialogExample(),
2218
);
2319
}
2420
}
2521

26-
class MyStatelessWidget extends StatelessWidget {
27-
const MyStatelessWidget({Key? key}) : super(key: key);
22+
class DialogExample extends StatelessWidget {
23+
const DialogExample({Key? key}) : super(key: key);
2824

2925
@override
3026
Widget build(BuildContext context) {
3127
return Scaffold(
28+
appBar: AppBar(title: const Text('showDialog Sample')),
3229
body: Center(
3330
child: OutlinedButton(
34-
onPressed: () {
35-
Navigator.of(context).restorablePush(_dialogBuilder);
36-
},
31+
onPressed: () => _dialogBuilder(context),
3732
child: const Text('Open Dialog'),
3833
),
3934
),
4035
);
4136
}
4237

43-
static Route<Object?> _dialogBuilder(
44-
BuildContext context, Object? arguments) {
45-
return DialogRoute<void>(
38+
Future<void> _dialogBuilder(BuildContext context) {
39+
return showDialog<void>(
4640
context: context,
47-
builder: (BuildContext context) =>
48-
const AlertDialog(title: Text('Material Alert!')),
41+
builder: (BuildContext context) {
42+
return AlertDialog(
43+
title: const Text('Basic dialog title'),
44+
content: const Text(
45+
'A dialog is a type of modal window that\n'
46+
'appears in front of app content to\n'
47+
'provide critical information, or prompt\n'
48+
'for a decision to be made.'),
49+
actions: <Widget>[
50+
TextButton(
51+
style: TextButton.styleFrom(
52+
textStyle: Theme.of(context).textTheme.labelLarge,
53+
),
54+
child: const Text('Disable'),
55+
onPressed: () {
56+
Navigator.of(context).pop();
57+
},
58+
),
59+
TextButton(
60+
style: TextButton.styleFrom(
61+
textStyle: Theme.of(context).textTheme.labelLarge,
62+
),
63+
child: const Text('Enable'),
64+
onPressed: () {
65+
Navigator.of(context).pop();
66+
},
67+
),
68+
],
69+
);
70+
},
4971
);
5072
}
5173
}
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
// Flutter code sample for showDialog
6+
7+
import 'package:flutter/material.dart';
8+
9+
void main() => runApp(const MyApp());
10+
11+
class MyApp extends StatelessWidget {
12+
const MyApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return MaterialApp(
17+
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
18+
home: const DialogExample(),
19+
);
20+
}
21+
}
22+
23+
class DialogExample extends StatelessWidget {
24+
const DialogExample({Key? key}) : super(key: key);
25+
26+
@override
27+
Widget build(BuildContext context) {
28+
return Scaffold(
29+
appBar: AppBar(title: const Text('showDialog Sample')),
30+
body: Center(
31+
child: OutlinedButton(
32+
onPressed: () => _dialogBuilder(context),
33+
child: const Text('Open Dialog'),
34+
),
35+
),
36+
);
37+
}
38+
39+
Future<void> _dialogBuilder(BuildContext context) {
40+
return showDialog<void>(
41+
context: context,
42+
builder: (BuildContext context) {
43+
return AlertDialog(
44+
title: const Text('Basic dialog title'),
45+
content: const Text(
46+
'A dialog is a type of modal window that\n'
47+
'appears in front of app content to\n'
48+
'provide critical information, or prompt\n'
49+
'for a decision to be made.'),
50+
actions: <Widget>[
51+
TextButton(
52+
style: TextButton.styleFrom(
53+
textStyle: Theme.of(context).textTheme.labelLarge,
54+
),
55+
child: const Text('Disable'),
56+
onPressed: () {
57+
Navigator.of(context).pop();
58+
},
59+
),
60+
TextButton(
61+
style: TextButton.styleFrom(
62+
textStyle: Theme.of(context).textTheme.labelLarge,
63+
),
64+
child: const Text('Enable'),
65+
onPressed: () {
66+
Navigator.of(context).pop();
67+
},
68+
),
69+
],
70+
);
71+
},
72+
);
73+
}
74+
}
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
// Flutter code sample for showDialog
6+
7+
import 'package:flutter/material.dart';
8+
9+
void main() => runApp(const MyApp());
10+
11+
class MyApp extends StatelessWidget {
12+
const MyApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return const MaterialApp(
17+
restorationScopeId: 'app',
18+
home: DialogExample(),
19+
);
20+
}
21+
}
22+
23+
class DialogExample extends StatelessWidget {
24+
const DialogExample({Key? key}) : super(key: key);
25+
26+
@override
27+
Widget build(BuildContext context) {
28+
return Scaffold(
29+
appBar: AppBar(title: const Text('AlertDialog Sample')),
30+
body: Center(
31+
child: OutlinedButton(
32+
onPressed: () {
33+
Navigator.of(context).restorablePush(_dialogBuilder);
34+
},
35+
child: const Text('Open Dialog'),
36+
),
37+
),
38+
);
39+
}
40+
41+
static Route<Object?> _dialogBuilder(
42+
BuildContext context, Object? arguments) {
43+
return DialogRoute<void>(
44+
context: context,
45+
builder: (BuildContext context) {
46+
return AlertDialog(
47+
title: const Text('Basic dialog title'),
48+
content: const Text(
49+
'A dialog is a type of modal window that\n'
50+
'appears in front of app content to\n'
51+
'provide critical information, or prompt\n'
52+
'for a decision to be made.'),
53+
actions: <Widget>[
54+
TextButton(
55+
style: TextButton.styleFrom(
56+
textStyle: Theme.of(context).textTheme.labelLarge,
57+
),
58+
child: const Text('Disable'),
59+
onPressed: () {
60+
Navigator.of(context).pop();
61+
},
62+
),
63+
TextButton(
64+
style: TextButton.styleFrom(
65+
textStyle: Theme.of(context).textTheme.labelLarge,
66+
),
67+
child: const Text('Enable'),
68+
onPressed: () {
69+
Navigator.of(context).pop();
70+
},
71+
),
72+
],
73+
);
74+
},
75+
);
76+
}
77+
}
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
import 'package:flutter_api_samples/material/dialog/alert_dialog.0.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('Show Alert dialog', (WidgetTester tester) async {
11+
const String dialogTitle = 'AlertDialog Title';
12+
await tester.pumpWidget(
13+
const MaterialApp(
14+
home: Scaffold(
15+
body: example.MyApp(),
16+
),
17+
),
18+
);
19+
20+
expect(find.text(dialogTitle), findsNothing);
21+
22+
await tester.tap(find.widgetWithText(TextButton, 'Show Dialog'));
23+
await tester.pumpAndSettle();
24+
expect(find.text(dialogTitle), findsOneWidget);
25+
26+
await tester.tap(find.text('OK'));
27+
await tester.pumpAndSettle();
28+
expect(find.text(dialogTitle), findsNothing);
29+
});
30+
}
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/material.dart';
6+
import 'package:flutter_api_samples/material/dialog/alert_dialog.1.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('Show Alert dialog', (WidgetTester tester) async {
11+
const String dialogTitle = 'AlertDialog Title';
12+
await tester.pumpWidget(
13+
const MaterialApp(
14+
home: Scaffold(
15+
body: example.MyApp(),
16+
),
17+
),
18+
);
19+
20+
expect(find.text(dialogTitle), findsNothing);
21+
22+
await tester.tap(find.widgetWithText(TextButton, 'Show Dialog'));
23+
await tester.pumpAndSettle();
24+
expect(find.text(dialogTitle), findsOneWidget);
25+
26+
await tester.tap(find.text('OK'));
27+
await tester.pumpAndSettle();
28+
expect(find.text(dialogTitle), findsNothing);
29+
});
30+
}

0 commit comments

Comments
 (0)