mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
24a53815a0
To accomplish this, I made the following changes:
1) Material is now in charge of drawing the material shadows.
2) In order to mix in the style for the shadow, Element now takes a list of
Styles instead of a single style.
3) Update all clients of Element#style to understand that we now have a list.
4) Update components that drawer shadows to have Material do that work instead.
a) One exception: FloatingActionButton draws its own shadow because of its
crazy clip requirements. We'll probably want to find a better way for
FloatingActionButton to clip in the future.
I've also added a widgets-fn example to demo the fn material widgets.
This CL introduces a bug into Drawer whereby you can get ink splashes
everywhere in the drawer. In the future, we'll need to separate out the
different material aspects to get non-splashable materials.
R=rafaelw@chromium.org
Review URL: https://codereview.chromium.org/1003553002
92 lines
2.2 KiB
Dart
92 lines
2.2 KiB
Dart
// Copyright 2015 The Chromium 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 '../editing/editable_string.dart';
|
|
import '../editing/editable_text.dart';
|
|
import '../editing/keyboard.dart';
|
|
import '../fn.dart';
|
|
import '../theme/colors.dart';
|
|
|
|
typedef void ValueChanged(value);
|
|
|
|
class Input extends Component {
|
|
static final Style _style = new Style('''
|
|
display: paragraph;
|
|
transform: translateX(0);
|
|
margin: 8px;
|
|
padding: 8px;
|
|
border-bottom: 1px solid ${Grey[200]};
|
|
align-self: center;
|
|
height: 1.2em;
|
|
white-space: pre;
|
|
overflow: hidden;'''
|
|
);
|
|
|
|
static final Style _placeholderStyle = new Style('''
|
|
top: 8px;
|
|
left: 8px;
|
|
color: ${Grey[200]};
|
|
position: absolute;'''
|
|
);
|
|
|
|
static final String _focusedInlineStyle = '''
|
|
padding: 7px;
|
|
border-bottom: 2px solid ${Blue[500]};''';
|
|
|
|
ValueChanged onChanged;
|
|
String placeholder;
|
|
bool focused = false;
|
|
|
|
String _value = '';
|
|
bool _isAttachedToKeyboard = false;
|
|
EditableString _editableValue;
|
|
|
|
Input({Object key,
|
|
this.placeholder,
|
|
this.onChanged,
|
|
this.focused})
|
|
: super(key: key, stateful: true) {
|
|
_editableValue = new EditableString(text: _value,
|
|
onUpdated: _handleTextUpdated);
|
|
}
|
|
|
|
void _handleTextUpdated() {
|
|
setState(() {});
|
|
if (_value != _editableValue.text) {
|
|
_value = _editableValue.text;
|
|
if (onChanged != null)
|
|
onChanged(_value);
|
|
}
|
|
}
|
|
|
|
void didUnmount() {
|
|
if (_isAttachedToKeyboard)
|
|
keyboard.hide();
|
|
}
|
|
|
|
Node build() {
|
|
if (focused && !_isAttachedToKeyboard) {
|
|
keyboard.show(_editableValue.stub);
|
|
_isAttachedToKeyboard = true;
|
|
}
|
|
|
|
List<Node> children = [];
|
|
|
|
if (placeholder != null && _value.isEmpty) {
|
|
children.add(new Container(
|
|
styles: [_placeholderStyle],
|
|
children: [new Text(placeholder)]
|
|
));
|
|
}
|
|
|
|
children.add(new EditableText(value: _editableValue, focused: focused));
|
|
|
|
return new Container(
|
|
styles: [_style],
|
|
inlineStyle: focused ? _focusedInlineStyle : null,
|
|
children: children
|
|
);
|
|
}
|
|
}
|