Browse Source

Added support for iOS keyboard appearance (#230)

Anatoly Pulyaevskiy 5 years ago
parent
commit
cab33e8823
No account linked to committer's email address

+ 1
- 0
packages/zefyr/example/lib/src/full_page.dart View File

94
             focusNode: _focusNode,
94
             focusNode: _focusNode,
95
             mode: _editing ? ZefyrMode.edit : ZefyrMode.select,
95
             mode: _editing ? ZefyrMode.edit : ZefyrMode.select,
96
             imageDelegate: CustomImageDelegate(),
96
             imageDelegate: CustomImageDelegate(),
97
+            keyboardAppearance: Brightness.dark,
97
           ),
98
           ),
98
         ),
99
         ),
99
       ),
100
       ),

+ 13
- 3
packages/zefyr/lib/src/widgets/editable_text.dart View File

40
     this.mode = ZefyrMode.edit,
40
     this.mode = ZefyrMode.edit,
41
     this.padding = const EdgeInsets.symmetric(horizontal: 16.0),
41
     this.padding = const EdgeInsets.symmetric(horizontal: 16.0),
42
     this.physics,
42
     this.physics,
43
+    this.keyboardAppearance = Brightness.light,
43
   })  : assert(mode != null),
44
   })  : assert(mode != null),
44
         assert(controller != null),
45
         assert(controller != null),
45
         assert(focusNode != null),
46
         assert(focusNode != null),
47
+        assert(keyboardAppearance != null),
46
         super(key: key);
48
         super(key: key);
47
 
49
 
48
   /// Controls the document being edited.
50
   /// Controls the document being edited.
75
   /// Padding around editable area.
77
   /// Padding around editable area.
76
   final EdgeInsets padding;
78
   final EdgeInsets padding;
77
 
79
 
80
+  /// The appearance of the keyboard.
81
+  ///
82
+  /// This setting is only honored on iOS devices.
83
+  ///
84
+  /// If unset, defaults to the brightness of [Brightness.light].
85
+  final Brightness keyboardAppearance;
86
+
78
   @override
87
   @override
79
   _ZefyrEditableTextState createState() => _ZefyrEditableTextState();
88
   _ZefyrEditableTextState createState() => _ZefyrEditableTextState();
80
 }
89
 }
103
   /// keyboard become visible.
112
   /// keyboard become visible.
104
   void requestKeyboard() {
113
   void requestKeyboard() {
105
     if (_focusNode.hasFocus) {
114
     if (_focusNode.hasFocus) {
106
-      _input.openConnection(widget.controller.plainTextEditingValue);
115
+      _input.openConnection(
116
+          widget.controller.plainTextEditingValue, widget.keyboardAppearance);
107
     } else {
117
     } else {
108
       FocusScope.of(context).requestFocus(_focusNode);
118
       FocusScope.of(context).requestFocus(_focusNode);
109
     }
119
     }
293
   }
303
   }
294
 
304
 
295
   void _handleFocusChange() {
305
   void _handleFocusChange() {
296
-    _input.openOrCloseConnection(
297
-        _focusNode, widget.controller.plainTextEditingValue);
306
+    _input.openOrCloseConnection(_focusNode,
307
+        widget.controller.plainTextEditingValue, widget.keyboardAppearance);
298
     _cursorTimer.startOrStop(_focusNode, selection);
308
     _cursorTimer.startOrStop(_focusNode, selection);
299
     updateKeepAlive();
309
     updateKeepAlive();
300
   }
310
   }

+ 13
- 0
packages/zefyr/lib/src/widgets/editor.dart View File

27
     this.imageDelegate,
27
     this.imageDelegate,
28
     this.selectionControls,
28
     this.selectionControls,
29
     this.physics,
29
     this.physics,
30
+    this.keyboardAppearance,
30
   })  : assert(mode != null),
31
   })  : assert(mode != null),
31
         assert(controller != null),
32
         assert(controller != null),
32
         assert(focusNode != null),
33
         assert(focusNode != null),
69
   /// Padding around editable area.
70
   /// Padding around editable area.
70
   final EdgeInsets padding;
71
   final EdgeInsets padding;
71
 
72
 
73
+  /// The appearance of the keyboard.
74
+  ///
75
+  /// This setting is only honored on iOS devices.
76
+  ///
77
+  /// If unset, defaults to the brightness of [ThemeData.primaryColorBrightness].
78
+  final Brightness keyboardAppearance;
79
+
72
   @override
80
   @override
73
   _ZefyrEditorState createState() => _ZefyrEditorState();
81
   _ZefyrEditorState createState() => _ZefyrEditorState();
74
 }
82
 }
178
 
186
 
179
   @override
187
   @override
180
   Widget build(BuildContext context) {
188
   Widget build(BuildContext context) {
189
+    final ThemeData themeData = Theme.of(context);
190
+    final Brightness keyboardAppearance =
191
+        widget.keyboardAppearance ?? themeData.primaryColorBrightness;
192
+
181
     Widget editable = ZefyrEditableText(
193
     Widget editable = ZefyrEditableText(
182
       controller: _scope.controller,
194
       controller: _scope.controller,
183
       focusNode: _scope.focusNode,
195
       focusNode: _scope.focusNode,
187
       mode: widget.mode,
199
       mode: widget.mode,
188
       padding: widget.padding,
200
       padding: widget.padding,
189
       physics: widget.physics,
201
       physics: widget.physics,
202
+      keyboardAppearance: keyboardAppearance,
190
     );
203
     );
191
 
204
 
192
     return ZefyrTheme(
205
     return ZefyrTheme(

+ 9
- 0
packages/zefyr/lib/src/widgets/field.dart View File

21
   final ZefyrImageDelegate imageDelegate;
21
   final ZefyrImageDelegate imageDelegate;
22
   final ScrollPhysics physics;
22
   final ScrollPhysics physics;
23
 
23
 
24
+  /// The appearance of the keyboard.
25
+  ///
26
+  /// This setting is only honored on iOS devices.
27
+  ///
28
+  /// If unset, defaults to the brightness of [ThemeData.primaryColorBrightness].
29
+  final Brightness keyboardAppearance;
30
+
24
   const ZefyrField({
31
   const ZefyrField({
25
     Key key,
32
     Key key,
26
     this.decoration,
33
     this.decoration,
32
     this.toolbarDelegate,
39
     this.toolbarDelegate,
33
     this.imageDelegate,
40
     this.imageDelegate,
34
     this.physics,
41
     this.physics,
42
+    this.keyboardAppearance,
35
   }) : super(key: key);
43
   }) : super(key: key);
36
 
44
 
37
   @override
45
   @override
50
       toolbarDelegate: widget.toolbarDelegate,
58
       toolbarDelegate: widget.toolbarDelegate,
51
       imageDelegate: widget.imageDelegate,
59
       imageDelegate: widget.imageDelegate,
52
       physics: widget.physics,
60
       physics: widget.physics,
61
+      keyboardAppearance: widget.keyboardAppearance,
53
     );
62
     );
54
 
63
 
55
     if (widget.height != null) {
64
     if (widget.height != null) {

+ 5
- 3
packages/zefyr/lib/src/widgets/input.dart View File

24
 
24
 
25
   /// Opens or closes input connection based on the current state of
25
   /// Opens or closes input connection based on the current state of
26
   /// [focusNode] and [value].
26
   /// [focusNode] and [value].
27
-  void openOrCloseConnection(FocusNode focusNode, TextEditingValue value) {
27
+  void openOrCloseConnection(FocusNode focusNode, TextEditingValue value,
28
+      Brightness keyboardAppearance) {
28
     if (focusNode.hasFocus && focusNode.consumeKeyboardToken()) {
29
     if (focusNode.hasFocus && focusNode.consumeKeyboardToken()) {
29
-      openConnection(value);
30
+      openConnection(value, keyboardAppearance);
30
     } else if (!focusNode.hasFocus) {
31
     } else if (!focusNode.hasFocus) {
31
       closeConnection();
32
       closeConnection();
32
     }
33
     }
33
   }
34
   }
34
 
35
 
35
-  void openConnection(TextEditingValue value) {
36
+  void openConnection(TextEditingValue value, Brightness keyboardAppearance) {
36
     if (!hasConnection) {
37
     if (!hasConnection) {
37
       _lastKnownRemoteTextEditingValue = value;
38
       _lastKnownRemoteTextEditingValue = value;
38
       _textInputConnection = TextInput.attach(
39
       _textInputConnection = TextInput.attach(
42
           obscureText: false,
43
           obscureText: false,
43
           autocorrect: true,
44
           autocorrect: true,
44
           inputAction: TextInputAction.newline,
45
           inputAction: TextInputAction.newline,
46
+          keyboardAppearance: keyboardAppearance,
45
           textCapitalization: TextCapitalization.sentences,
47
           textCapitalization: TextCapitalization.sentences,
46
         ),
48
         ),
47
       )..setEditingState(value);
49
       )..setEditingState(value);