Unverified Commit 1a08ce74 authored by Hans Muller's avatar Hans Muller Committed by GitHub

Updated the remaining obsolete button references in flutter_gallery (#67437)

parent 4fa4f91d
......@@ -6,23 +6,23 @@ import 'package:flutter/material.dart';
import '../../gallery/demo.dart';
const String _raisedText =
'Raised buttons add dimension to mostly flat layouts. They emphasize '
const String _elevatedText =
'Elevated buttons add dimension to mostly flat layouts. They emphasize '
'functions on busy or wide spaces.';
const String _raisedCode = 'buttons_raised';
const String _elevatedCode = 'buttons_elevated';
const String _flatText = 'A flat button displays an ink splash on press '
'but does not lift. Use flat buttons on toolbars, in dialogs and '
const String _textText = 'A text button displays an ink splash on press '
'but does not lift. Use text buttons on toolbars, in dialogs and '
'inline with padding';
const String _flatCode = 'buttons_flat';
const String _textCode = 'buttons_text';
const String _outlineText =
'Outline buttons become opaque and elevate when pressed. They are often '
'paired with raised buttons to indicate an alternative, secondary action.';
const String _outlinedText =
'Outlined buttons become opaque and elevate when pressed. They are often '
'paired with elevated buttons to indicate an alternative, secondary action.';
const String _outlineCode = 'buttons_outline';
const String _outlinedCode = 'buttons_outlined';
const String _dropdownText =
"A dropdown button displays a menu that's used to select a value from a "
......@@ -53,44 +53,31 @@ class ButtonsDemo extends StatefulWidget {
}
class _ButtonsDemoState extends State<ButtonsDemo> {
ShapeBorder _buttonShape;
OutlinedBorder _buttonShape;
@override
Widget build(BuildContext context) {
final ButtonThemeData buttonTheme = ButtonTheme.of(context).copyWith(
shape: _buttonShape
);
final List<ComponentDemoTabData> demos = <ComponentDemoTabData>[
ComponentDemoTabData(
tabName: 'RAISED',
description: _raisedText,
demoWidget: ButtonTheme.fromButtonThemeData(
data: buttonTheme,
child: buildRaisedButton(),
),
exampleCodeTag: _raisedCode,
documentationUrl: 'https://docs.flutter.io/flutter/material/RaisedButton-class.html',
tabName: 'ELEVATED',
description: _elevatedText,
demoWidget: buildElevatedButton(_buttonShape),
exampleCodeTag: _elevatedCode,
documentationUrl: 'https://docs.flutter.io/flutter/material/ElevatedButton-class.html',
),
ComponentDemoTabData(
tabName: 'FLAT',
description: _flatText,
demoWidget: ButtonTheme.fromButtonThemeData(
data: buttonTheme,
child: buildFlatButton(),
),
exampleCodeTag: _flatCode,
documentationUrl: 'https://docs.flutter.io/flutter/material/FlatButton-class.html',
tabName: 'TEXT',
description: _textText,
demoWidget: buildTextButton(_buttonShape),
exampleCodeTag: _textCode,
documentationUrl: 'https://docs.flutter.io/flutter/material/TextButton-class.html',
),
ComponentDemoTabData(
tabName: 'OUTLINE',
description: _outlineText,
demoWidget: ButtonTheme.fromButtonThemeData(
data: buttonTheme,
child: buildOutlineButton(),
),
exampleCodeTag: _outlineCode,
documentationUrl: 'https://docs.flutter.io/flutter/material/OutlineButton-class.html',
tabName: 'OUTLINED',
description: _outlinedText,
demoWidget: buildOutlinedButton(_buttonShape),
exampleCodeTag: _outlinedCode,
documentationUrl: 'https://docs.flutter.io/flutter/material/OutlinedButton-class.html',
),
ComponentDemoTabData(
tabName: 'DROPDOWN',
......@@ -131,7 +118,8 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
);
}
Widget buildRaisedButton() {
Widget buildElevatedButton(OutlinedBorder shape) {
final ButtonStyle style = ElevatedButton.styleFrom(shape: shape);
return Align(
alignment: const Alignment(0.0, -0.2),
child: Column(
......@@ -140,13 +128,14 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(
child: const Text('RAISED BUTTON', semanticsLabel: 'RAISED BUTTON 1'),
ElevatedButton(
style: style,
child: const Text('ELEVATED BUTTON', semanticsLabel: 'ELEVATED BUTTON 1'),
onPressed: () {
// Perform some action
},
),
const RaisedButton(
const ElevatedButton(
child: Text('DISABLED', semanticsLabel: 'DISABLED BUTTON 1'),
onPressed: null,
),
......@@ -155,14 +144,16 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton.icon(
ElevatedButton.icon(
style: style,
icon: const Icon(Icons.add, size: 18.0),
label: const Text('RAISED BUTTON', semanticsLabel: 'RAISED BUTTON 2'),
label: const Text('ELEVATED BUTTON', semanticsLabel: 'ELEVATED BUTTON 2'),
onPressed: () {
// Perform some action
},
),
RaisedButton.icon(
ElevatedButton.icon(
style: style,
icon: const Icon(Icons.add, size: 18.0),
label: const Text('DISABLED', semanticsLabel: 'DISABLED BUTTON 2'),
onPressed: null,
......@@ -174,7 +165,8 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
);
}
Widget buildFlatButton() {
Widget buildTextButton(OutlinedBorder shape) {
final ButtonStyle style = ElevatedButton.styleFrom(shape: shape);
return Align(
alignment: const Alignment(0.0, -0.2),
child: Column(
......@@ -183,13 +175,14 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton(
child: const Text('FLAT BUTTON', semanticsLabel: 'FLAT BUTTON 1'),
TextButton(
style: style,
child: const Text('TEXT BUTTON', semanticsLabel: 'TEXT BUTTON 1'),
onPressed: () {
// Perform some action
},
),
const FlatButton(
const TextButton(
child: Text('DISABLED', semanticsLabel: 'DISABLED BUTTON 3',),
onPressed: null,
),
......@@ -198,15 +191,17 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FlatButton.icon(
icon: const Icon(Icons.add_circle_outline, size: 18.0),
label: const Text('FLAT BUTTON', semanticsLabel: 'FLAT BUTTON 2'),
TextButton.icon(
style: style,
icon: const Icon(Icons.add_circle_outlined, size: 18.0),
label: const Text('TEXT BUTTON', semanticsLabel: 'TEXT BUTTON 2'),
onPressed: () {
// Perform some action
},
),
FlatButton.icon(
icon: const Icon(Icons.add_circle_outline, size: 18.0),
TextButton.icon(
style: style,
icon: const Icon(Icons.add_circle_outlined, size: 18.0),
label: const Text('DISABLED', semanticsLabel: 'DISABLED BUTTON 4'),
onPressed: null,
),
......@@ -217,7 +212,8 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
);
}
Widget buildOutlineButton() {
Widget buildOutlinedButton(OutlinedBorder shape) {
final ButtonStyle style = ElevatedButton.styleFrom(shape: shape);
return Align(
alignment: const Alignment(0.0, -0.2),
child: Column(
......@@ -226,14 +222,16 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
OutlineButton(
child: const Text('OUTLINE BUTTON', semanticsLabel: 'OUTLINE BUTTON 1'),
OutlinedButton(
style: style,
child: const Text('OUTLINED BUTTON', semanticsLabel: 'OUTLINED BUTTON 1'),
onPressed: () {
// Perform some action
},
),
const OutlineButton(
child: Text('DISABLED', semanticsLabel: 'DISABLED BUTTON 5'),
OutlinedButton(
style: style,
child: const Text('DISABLED', semanticsLabel: 'DISABLED BUTTON 5'),
onPressed: null,
),
],
......@@ -241,14 +239,15 @@ class _ButtonsDemoState extends State<ButtonsDemo> {
ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
OutlineButton.icon(
OutlinedButton.icon(
style: style,
icon: const Icon(Icons.add, size: 18.0),
label: const Text('OUTLINE BUTTON', semanticsLabel: 'OUTLINE BUTTON 2'),
label: const Text('OUTLINED BUTTON', semanticsLabel: 'OUTLINED BUTTON 2'),
onPressed: () {
// Perform some action
},
),
OutlineButton.icon(
OutlinedButton.icon(
icon: const Icon(Icons.add, size: 18.0),
label: const Text('DISABLED', semanticsLabel: 'DISABLED BUTTON 6'),
onPressed: null,
......
......@@ -94,7 +94,7 @@ class DialogDemoState extends State<DialogDemo> {
body: ListView(
padding: const EdgeInsets.symmetric(vertical: 24.0, horizontal: 72.0),
children: <Widget>[
RaisedButton(
ElevatedButton(
child: const Text('ALERT'),
onPressed: () {
showDemoDialog<DialogDemoAction>(
......@@ -105,11 +105,11 @@ class DialogDemoState extends State<DialogDemo> {
style: dialogTextStyle,
),
actions: <Widget>[
FlatButton(
TextButton(
child: const Text('CANCEL'),
onPressed: () { Navigator.pop(context, DialogDemoAction.cancel); },
),
FlatButton(
TextButton(
child: const Text('DISCARD'),
onPressed: () { Navigator.pop(context, DialogDemoAction.discard); },
),
......@@ -118,7 +118,7 @@ class DialogDemoState extends State<DialogDemo> {
);
},
),
RaisedButton(
ElevatedButton(
child: const Text('ALERT WITH TITLE'),
onPressed: () {
showDemoDialog<DialogDemoAction>(
......@@ -130,11 +130,11 @@ class DialogDemoState extends State<DialogDemo> {
style: dialogTextStyle,
),
actions: <Widget>[
FlatButton(
TextButton(
child: const Text('DISAGREE'),
onPressed: () { Navigator.pop(context, DialogDemoAction.disagree); },
),
FlatButton(
TextButton(
child: const Text('AGREE'),
onPressed: () { Navigator.pop(context, DialogDemoAction.agree); },
),
......@@ -143,7 +143,7 @@ class DialogDemoState extends State<DialogDemo> {
);
},
),
RaisedButton(
ElevatedButton(
child: const Text('SIMPLE'),
onPressed: () {
showDemoDialog<String>(
......@@ -173,7 +173,7 @@ class DialogDemoState extends State<DialogDemo> {
);
},
),
RaisedButton(
ElevatedButton(
child: const Text('CONFIRMATION'),
onPressed: () {
showTimePicker(
......@@ -190,7 +190,7 @@ class DialogDemoState extends State<DialogDemo> {
});
},
),
RaisedButton(
ElevatedButton(
child: const Text('FULLSCREEN'),
onPressed: () {
Navigator.push(context, MaterialPageRoute<DismissDialogAction>(
......
......@@ -119,7 +119,7 @@ class CollapsibleBody extends StatelessWidget {
children: <Widget>[
Container(
margin: const EdgeInsets.only(right: 8.0),
child: FlatButton(
child: TextButton(
onPressed: onCancel,
child: const Text('CANCEL', style: TextStyle(
color: Colors.black54,
......@@ -130,9 +130,8 @@ class CollapsibleBody extends StatelessWidget {
),
Container(
margin: const EdgeInsets.only(right: 8.0),
child: FlatButton(
child: TextButton(
onPressed: onSave,
textTheme: ButtonTextTheme.accent,
child: const Text('SAVE'),
),
),
......
......@@ -17,7 +17,7 @@ class ModalBottomSheetDemo extends StatelessWidget {
actions: <Widget>[MaterialDemoDocumentationButton(routeName)],
),
body: Center(
child: RaisedButton(
child: ElevatedButton(
child: const Text('SHOW BOTTOM SHEET'),
onPressed: () {
showModalBottomSheet<void>(context: context, builder: (BuildContext context) {
......
......@@ -62,7 +62,7 @@ class _PersistentBottomSheetDemoState extends State<PersistentBottomSheetDemo> {
return AlertDialog(
content: const Text('You tapped the floating action button.'),
actions: <Widget>[
FlatButton(
TextButton(
onPressed: () {
Navigator.pop(context);
},
......@@ -93,7 +93,7 @@ class _PersistentBottomSheetDemoState extends State<PersistentBottomSheetDemo> {
),
),
body: Center(
child: RaisedButton(
child: ElevatedButton(
onPressed: _showBottomSheetCallback,
child: const Text('SHOW BOTTOM SHEET'),
),
......
......@@ -40,7 +40,7 @@ class _SnackBarDemoState extends State<SnackBarDemo> {
const Text(_text1),
const Text(_text2),
Center(
child: RaisedButton(
child: ElevatedButton(
child: const Text('SHOW A SNACKBAR'),
onPressed: () {
final int thisSnackBarIndex = _snackBarIndex++;
......
......@@ -150,11 +150,11 @@ class TextFormFieldDemoState extends State<TextFormFieldDemo> {
title: const Text('This form has errors'),
content: const Text('Really leave this form?'),
actions: <Widget> [
FlatButton(
TextButton(
child: const Text('YES'),
onPressed: () { Navigator.of(context).pop(true); },
),
FlatButton(
TextButton(
child: const Text('NO'),
onPressed: () { Navigator.of(context).pop(false); },
),
......@@ -279,7 +279,7 @@ class TextFormFieldDemoState extends State<TextFormFieldDemo> {
),
const SizedBox(height: 24.0),
Center(
child: RaisedButton(
child: ElevatedButton(
child: const Text('SUBMIT'),
onPressed: _handleSubmitted,
),
......
......@@ -84,10 +84,11 @@ class _LoginPageState extends State<LoginPage> {
children: <Widget>[
ButtonBar(
children: <Widget>[
FlatButton(
child: const Text('CANCEL'),
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
TextButton(
style: TextButton.styleFrom(
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
onPressed: () {
// The login screen is immediately displayed on top of
......@@ -96,16 +97,19 @@ class _LoginPageState extends State<LoginPage> {
// of Shrine completely.
Navigator.of(context, rootNavigator: true).pop();
},
child: const Text('CANCEL'),
),
RaisedButton(
child: const Text('NEXT'),
elevation: 8.0,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 8.0,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
onPressed: () {
Navigator.pop(context);
},
child: const Text('NEXT'),
),
],
),
......
......@@ -75,12 +75,13 @@ class _ShoppingCartPageState extends State<ShoppingCartPage> {
bottom: 16.0,
left: 16.0,
right: 16.0,
child: RaisedButton(
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: kShrinePink100,
shape: const BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(7.0)),
),
),
color: kShrinePink100,
splashColor: kShrineBrown600,
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 12.0),
child: Text('CLEAR CART'),
......
......@@ -13,9 +13,9 @@ class ButtonsDemo {
void buttons() {
// START buttons_raised
// Create a raised button.
RaisedButton(
// START buttons_elevated
// Create an elevated button.
ElevatedButton(
child: const Text('BUTTON TITLE'),
onPressed: () {
// Perform some action
......@@ -25,14 +25,14 @@ RaisedButton(
// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
const RaisedButton(
const ElevatedButton(
child: Text('BUTTON TITLE'),
onPressed: null,
);
// Create a button with an icon and a
// title.
RaisedButton.icon(
ElevatedButton.icon(
icon: const Icon(Icons.add, size: 18.0),
label: const Text('BUTTON TITLE'),
onPressed: () {
......@@ -41,9 +41,9 @@ RaisedButton.icon(
);
// END
// START buttons_outline
// Create an outline button.
OutlineButton(
// START buttons_outlined
// Create an outlined button.
OutlinedButton(
child: const Text('BUTTON TITLE'),
onPressed: () {
// Perform some action
......@@ -53,14 +53,14 @@ OutlineButton(
// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
const OutlineButton(
const OutlinedButton(
child: Text('BUTTON TITLE'),
onPressed: null,
);
// Create a button with an icon and a
// title.
OutlineButton.icon(
OutlinedButton.icon(
icon: const Icon(Icons.add, size: 18.0),
label: const Text('BUTTON TITLE'),
onPressed: () {
......@@ -69,9 +69,9 @@ OutlineButton.icon(
);
// END
// START buttons_flat
// Create a flat button.
FlatButton(
// START buttons_text
// Create a text button.
TextButton(
child: const Text('BUTTON TITLE'),
onPressed: () {
// Perform some action
......@@ -81,7 +81,7 @@ FlatButton(
// Create a disabled button.
// Buttons are disabled when onPressed isn't
// specified or is null.
const FlatButton(
const TextButton(
child: Text('BUTTON TITLE'),
onPressed: null,
);
......
......@@ -158,7 +158,7 @@ class _ActionItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
return _OptionsItem(
child: _FlatButton(
child: _TextButton(
onPressed: onTap,
child: Text(text),
),
......@@ -166,21 +166,23 @@ class _ActionItem extends StatelessWidget {
}
}
class _FlatButton extends StatelessWidget {
const _FlatButton({ Key key, this.onPressed, this.child }) : super(key: key);
class _TextButton extends StatelessWidget {
const _TextButton({ Key key, this.onPressed, this.child }) : super(key: key);
final VoidCallback onPressed;
final Widget child;
@override
Widget build(BuildContext context) {
return FlatButton(
padding: EdgeInsets.zero,
onPressed: onPressed,
child: DefaultTextStyle(
style: Theme.of(context).primaryTextTheme.subtitle1,
child: child,
final ThemeData theme = Theme.of(context);
return TextButton(
style: TextButton.styleFrom(
primary: theme.colorScheme.onPrimary,
textStyle: theme.textTheme.subtitle1,
padding: EdgeInsets.zero,
),
onPressed: onPressed,
child: child,
);
}
}
......
......@@ -21,7 +21,7 @@ ThemeData _buildDarkTheme() {
final ColorScheme colorScheme = const ColorScheme.dark().copyWith(
primary: primaryColor,
secondary: secondaryColor,
onPrimary: secondaryColor,
onPrimary: Colors.white,
);
final ThemeData base = ThemeData(
brightness: Brightness.dark,
......@@ -30,7 +30,6 @@ ThemeData _buildDarkTheme() {
primaryColor: primaryColor,
primaryColorDark: const Color(0xFF0050a0),
primaryColorLight: secondaryColor,
buttonColor: primaryColor,
indicatorColor: Colors.white,
toggleableActiveColor: const Color(0xFF6997DF),
accentColor: secondaryColor,
......@@ -38,10 +37,6 @@ ThemeData _buildDarkTheme() {
scaffoldBackgroundColor: const Color(0xFF202124),
backgroundColor: const Color(0xFF202124),
errorColor: const Color(0xFFB00020),
buttonTheme: ButtonThemeData(
colorScheme: colorScheme,
textTheme: ButtonTextTheme.primary,
),
);
return base.copyWith(
textTheme: _buildTextTheme(base.textTheme),
......@@ -62,7 +57,6 @@ ThemeData _buildLightTheme() {
accentColorBrightness: Brightness.dark,
colorScheme: colorScheme,
primaryColor: primaryColor,
buttonColor: primaryColor,
indicatorColor: Colors.white,
toggleableActiveColor: const Color(0xFF1E88E5),
splashColor: Colors.white24,
......@@ -72,10 +66,6 @@ ThemeData _buildLightTheme() {
scaffoldBackgroundColor: Colors.white,
backgroundColor: Colors.white,
errorColor: const Color(0xFFB00020),
buttonTheme: ButtonThemeData(
colorScheme: colorScheme,
textTheme: ButtonTextTheme.primary,
),
);
return base.copyWith(
textTheme: _buildTextTheme(base.textTheme),
......
......@@ -52,13 +52,13 @@ class UpdaterState extends State<Updater> {
title: const Text('Update Flutter Gallery?'),
content: Text('A newer version is available.', style: dialogTextStyle),
actions: <Widget>[
FlatButton(
TextButton(
child: const Text('NO THANKS'),
onPressed: () {
Navigator.pop(context, false);
},
),
FlatButton(
TextButton(
child: const Text('UPDATE'),
onPressed: () {
Navigator.pop(context, true);
......
......@@ -478,14 +478,12 @@ void main() {
group('All material demos meet text contrast guidelines', () {
final List<ThemeData> themes = <ThemeData>[
kLightGalleryTheme,
ThemeData.light(),
ThemeData.dark(),
kDarkGalleryTheme,
];
const List<String> themeNames = <String>[
'kLightGalleryTheme',
'ThemeData.light()',
'ThemeData.dark()',
'kDarkGalleryTheme',
];
for (int themeIndex = 0; themeIndex < themes.length; themeIndex += 1) {
......
......@@ -10,7 +10,7 @@ void main() {
testWidgets('validates name field correctly', (WidgetTester tester) async {
await tester.pumpWidget(const MaterialApp(home: TextFormFieldDemo()));
final Finder submitButton = find.widgetWithText(RaisedButton, 'SUBMIT');
final Finder submitButton = find.widgetWithText(ElevatedButton, 'SUBMIT');
expect(submitButton, findsOneWidget);
final Finder nameField = find.widgetWithText(TextFormField, 'Name *');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment