@@ -22,6 +22,63 @@ import 'store.dart';
22
22
import 'text.dart' ;
23
23
import 'theme.dart' ;
24
24
25
+ /// Compose-box styles that differ between light and dark theme.
26
+ ///
27
+ /// These styles will animate on theme changes (with help from [lerp] ).
28
+ class ComposeBoxTheme extends ThemeExtension <ComposeBoxTheme > {
29
+ factory ComposeBoxTheme .light (BuildContext context) {
30
+ return ComposeBoxTheme ._(
31
+ boxShadow: null ,
32
+ );
33
+ }
34
+
35
+ factory ComposeBoxTheme .dark (BuildContext context) {
36
+ return ComposeBoxTheme ._(
37
+ boxShadow: [BoxShadow (
38
+ color: DesignVariables .dark.bgTopBar,
39
+ offset: const Offset (0 , - 4 ),
40
+ blurRadius: 16 ,
41
+ spreadRadius: 0 ,
42
+ )],
43
+ );
44
+ }
45
+
46
+ ComposeBoxTheme ._({
47
+ required this .boxShadow,
48
+ });
49
+
50
+ /// The [ComposeBoxTheme] from the context's active theme.
51
+ ///
52
+ /// The [ThemeData] must include [ComposeBoxTheme] in [ThemeData.extensions] .
53
+ static ComposeBoxTheme of (BuildContext context) {
54
+ final theme = Theme .of (context);
55
+ final extension = theme.extension < ComposeBoxTheme > ();
56
+ assert (extension != null );
57
+ return extension ! ;
58
+ }
59
+
60
+ final List <BoxShadow >? boxShadow;
61
+
62
+ @override
63
+ ComposeBoxTheme copyWith ({
64
+ List <BoxShadow >? boxShadow,
65
+ }) {
66
+ return ComposeBoxTheme ._(
67
+ boxShadow: boxShadow ?? this .boxShadow,
68
+ );
69
+ }
70
+
71
+ @override
72
+ ComposeBoxTheme lerp (ComposeBoxTheme other, double t) {
73
+ if (identical (this , other)) {
74
+ return this ;
75
+ }
76
+ return ComposeBoxTheme ._(
77
+ boxShadow: BoxShadow .lerpList (boxShadow, other.boxShadow, t)! ,
78
+ );
79
+ }
80
+ }
81
+
25
82
const double _composeButtonSize = 44 ;
26
83
27
84
/// A [TextEditingController] for use in the compose box.
@@ -1056,7 +1113,9 @@ class _ComposeBoxContainer extends StatelessWidget {
1056
1113
// the message list itself
1057
1114
return Container (width: double .infinity,
1058
1115
decoration: BoxDecoration (
1059
- border: Border (top: BorderSide (color: designVariables.borderBar))),
1116
+ border: Border (top: BorderSide (color: designVariables.borderBar)),
1117
+ boxShadow: ComposeBoxTheme .of (context).boxShadow,
1118
+ ),
1060
1119
// TODO(#720) try a Stack for the overlaid linear progress indicator
1061
1120
child: Material (
1062
1121
color: designVariables.composeBoxBg,
0 commit comments