Commit 6067b306 authored by Adam Barth's avatar Adam Barth

Fix Input padding to match the material spec

Also, handle the case of "dense" input widgets that have less margin.

Fixes #626
parent 6fbe39e2
...@@ -12,16 +12,13 @@ import 'theme.dart'; ...@@ -12,16 +12,13 @@ import 'theme.dart';
export 'package:flutter/rendering.dart' show ValueChanged; export 'package:flutter/rendering.dart' show ValueChanged;
export 'package:flutter/services.dart' show KeyboardType; export 'package:flutter/services.dart' show KeyboardType;
// TODO(eseidel): This isn't right, it's 16px on the bottom:
// http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field
const EdgeDims _kTextfieldPadding = const EdgeDims.symmetric(vertical: 8.0);
class Input extends Scrollable { class Input extends Scrollable {
Input({ Input({
GlobalKey key, GlobalKey key,
this.initialValue: '', this.initialValue: '',
this.placeholder, this.placeholder,
this.hideText: false, this.hideText: false,
this.isDense: false,
this.onChanged, this.onChanged,
this.keyboardType: KeyboardType.TEXT, this.keyboardType: KeyboardType.TEXT,
this.onSubmitted this.onSubmitted
...@@ -35,6 +32,7 @@ class Input extends Scrollable { ...@@ -35,6 +32,7 @@ class Input extends Scrollable {
final KeyboardType keyboardType; final KeyboardType keyboardType;
final String placeholder; final String placeholder;
final bool hideText; final bool hideText;
final bool isDense;
final ValueChanged<String> onChanged; final ValueChanged<String> onChanged;
final ValueChanged<String> onSubmitted; final ValueChanged<String> onSubmitted;
...@@ -123,15 +121,21 @@ class InputState extends ScrollableState<Input> { ...@@ -123,15 +121,21 @@ class InputState extends ScrollableState<Input> {
onSizeChanged: _handleContainerSizeChanged, onSizeChanged: _handleContainerSizeChanged,
child: new Container( child: new Container(
child: new Stack(textChildren), child: new Stack(textChildren),
padding: _kTextfieldPadding, margin: config.isDense ?
decoration: new BoxDecoration(border: new Border( const EdgeDims.symmetric(vertical: 4.0) :
bottom: new BorderSide( const EdgeDims.symmetric(vertical: 8.0),
color: focusHighlightColor, padding: const EdgeDims.symmetric(vertical: 8.0),
width: focused ? 2.0 : 1.0 decoration: new BoxDecoration(
border: new Border(
bottom: new BorderSide(
color: focusHighlightColor,
width: focused ? 2.0 : 1.0
)
) )
)) )
) )
), ),
behavior: HitTestBehavior.opaque,
onPointerDown: (_) { onPointerDown: (_) {
// TODO(ianh): https://github.com/flutter/engine/issues/1530 // TODO(ianh): https://github.com/flutter/engine/issues/1530
if (Focus.at(context, config)) { if (Focus.at(context, config)) {
......
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