Skip to content

Commit

Permalink
M3 snackbar [re-land] (#116218)
Browse files Browse the repository at this point in the history
* Add M2 defaults and template skeleton

* add MaterialStateColor functionality to ActionTextColor (issue #110402)

* Add M2 defaults and template skeleton

* updated material 3 tokens

* Updated snackbar demo

* add theme tests

* add gen defaults

* formatting

* more whitespace fixes

* add widget type

* update docs

* code review changes

* Add line overflow functionality

* whitespace fixes

* update M3 animation

* whitespace fixes

* add insetPadding param

* Modifed icon parameter to showCloseIcon

* white space fixes

* test fixes

* rename iconColor to closeIconColor

* debug test fix

* de-britishification

* g3fix

* g3fix

* debug test fix
  • Loading branch information
esouthren committed Nov 30, 2022
1 parent 24b3c38 commit 29422d2
Show file tree
Hide file tree
Showing 9 changed files with 801 additions and 94 deletions.
2 changes: 2 additions & 0 deletions dev/tools/gen_defaults/bin/gen_defaults.dart
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import 'package:gen_defaults/progress_indicator_template.dart';
import 'package:gen_defaults/radio_template.dart';
import 'package:gen_defaults/segmented_button_template.dart';
import 'package:gen_defaults/slider_template.dart';
import 'package:gen_defaults/snackbar_template.dart';
import 'package:gen_defaults/surface_tint.dart';
import 'package:gen_defaults/switch_template.dart';
import 'package:gen_defaults/tabs_template.dart';
Expand Down Expand Up @@ -162,6 +163,7 @@ Future<void> main(List<String> args) async {
ProgressIndicatorTemplate('ProgressIndicator', '$materialLib/progress_indicator.dart', tokens).updateFile();
RadioTemplate('Radio<T>', '$materialLib/radio.dart', tokens).updateFile();
SegmentedButtonTemplate('SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile();
SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();
SurfaceTintTemplate('SurfaceTint', '$materialLib/elevation_overlay.dart', tokens).updateFile();
SwitchTemplate('Switch', '$materialLib/switch.dart', tokens).updateFile();
Expand Down
76 changes: 76 additions & 0 deletions dev/tools/gen_defaults/lib/snackbar_template.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'template.dart';

class SnackbarTemplate extends TokenTemplate {
const SnackbarTemplate(
this.tokenGroup, super.blockName, super.fileName, super.tokens, {
super.colorSchemePrefix = '_colors.'
});

final String tokenGroup;

@override
String generate() => '''
class _${blockName}DefaultsM3 extends SnackBarThemeData {
_${blockName}DefaultsM3(this.context);
final BuildContext context;
late final ThemeData _theme = Theme.of(context);
late final ColorScheme _colors = _theme.colorScheme;
@override
Color get backgroundColor => ${componentColor("$tokenGroup.container")};
@override
Color get actionTextColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return ${componentColor("$tokenGroup.action.pressed.label-text")};
}
if (states.contains(MaterialState.pressed)) {
return ${componentColor("$tokenGroup.action.pressed.label-text")};
}
if (states.contains(MaterialState.hovered)) {
return ${componentColor("$tokenGroup.action.hover.label-text")};
}
if (states.contains(MaterialState.focused)) {
return ${componentColor("$tokenGroup.action.focus.label-text")};
}
return ${componentColor("$tokenGroup.action.label-text")};
});
@override
Color get disabledActionTextColor =>
${componentColor("$tokenGroup.action.pressed.label-text")};
@override
TextStyle get contentTextStyle =>
${textStyle("$tokenGroup.supporting-text")}!.copyWith
(color: ${componentColor("$tokenGroup.supporting-text")},
);
@override
double get elevation => ${elevation("$tokenGroup.container")};
@override
ShapeBorder get shape => ${shape("$tokenGroup.container")};
@override
SnackBarBehavior get behavior => SnackBarBehavior.fixed;
@override
EdgeInsets get insetPadding => const EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 10.0);
@override
bool get showCloseIcon => false;
@override
Color get iconColor => _colors.onInverseSurface;
}
''';
}
168 changes: 168 additions & 0 deletions examples/api/lib/material/snack_bar/snack_bar.2.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/// Flutter code sample for [SnackBar] with Material 3 specifications.
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

// A Material 3 [SnackBar] demonstrating an optional icon, in either floating
// or fixed format.
class MyApp extends StatelessWidget {
const MyApp({super.key});

static const String _title = 'Flutter Code Sample';

@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
theme: ThemeData(useMaterial3: true),
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: SnackBarExample(),
),
),
);
}
}

class SnackBarExample extends StatefulWidget {
const SnackBarExample({super.key});

@override
State<SnackBarExample> createState() => _SnackBarExampleState();
}

class _SnackBarExampleState extends State<SnackBarExample> {
SnackBarBehavior? _snackBarBehavior = SnackBarBehavior.floating;
bool _withIcon = true;
bool _withAction = true;
bool _multiLine = false;
bool _longActionLabel = false;

Padding _configRow(List<Widget> children) => Padding(
padding: const EdgeInsets.all(8.0), child: Row(children: children));

@override
Widget build(BuildContext context) {
return Padding(padding: const EdgeInsets.only(left: 50.0), child: Column(
children: <Widget>[
_configRow(<Widget>[
Text('Snack Bar configuration',
style: Theme.of(context).textTheme.bodyLarge),
]),
_configRow(
<Widget>[
const Text('Fixed'),
Radio<SnackBarBehavior>(
value: SnackBarBehavior.fixed,
groupValue: _snackBarBehavior,
onChanged: (SnackBarBehavior? value) {
setState(() {
_snackBarBehavior = value;
});
},
),
const Text('Floating'),
Radio<SnackBarBehavior>(
value: SnackBarBehavior.floating,
groupValue: _snackBarBehavior,
onChanged: (SnackBarBehavior? value) {
setState(() {
_snackBarBehavior = value;
});
},
),
],
),
_configRow(
<Widget>[
const Text('Include Icon '),
Switch(
value: _withIcon,
onChanged: (bool value) {
setState(() {
_withIcon = !_withIcon;
});
},
),
],
),
_configRow(
<Widget>[
const Text('Include Action '),
Switch(
value: _withAction,
onChanged: (bool value) {
setState(() {
_withAction = !_withAction;
});
},
),
const SizedBox(width: 16.0),
const Text('Long Action Label '),
Switch(
value: _longActionLabel,
onChanged: !_withAction
? null
: (bool value) {
setState(() {
_longActionLabel = !_longActionLabel;
});
},
),
],
),
_configRow(
<Widget>[
const Text('Multi Line Text'),
Switch(
value: _multiLine,
onChanged: _snackBarBehavior == SnackBarBehavior.fixed ? null : (bool value) {
setState(() {
_multiLine = !_multiLine;
});
},
),
],
),
const SizedBox(height: 16.0),
ElevatedButton(
child: const Text('Show Snackbar'),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(_snackBar());
}
),
],
),
);
}

SnackBar _snackBar() {
final SnackBarAction? action = _withAction
? SnackBarAction(
label: _longActionLabel ? 'Long Action Text' : 'Action',
onPressed: () {
// Code to execute.
},
)
: null;
final double? width =
_snackBarBehavior == SnackBarBehavior.floating && _multiLine ? 400.0 : null;
final String label = _multiLine
? 'A Snack Bar with quite a lot of text which spans across multiple lines'
: 'Single Line Snack Bar';
return SnackBar(
content: Text(label),
showCloseIcon: _withIcon,
width: width,
behavior: _snackBarBehavior,
action: action,
duration: const Duration(seconds: 3),
);
}
}

0 comments on commit 29422d2

Please sign in to comment.