Documentation of Usage of Input Widget by dvdwasibi · Pull Request #277 · flutter/website

dvdwasibi · 2016-09-23T18:05:41Z

Adding richer documentation and examples of using the Input widget.

For issue #5987

sethladd · 2016-09-23T21:34:36Z

+
+This page describe how to setup basic text input for Flutter applications.
+
+The [`Input`](https://docs.flutter.io/flutter/material/Input-class.html) widget under [Material](https://docs.flutter.io/flutter/material/material-library.html) will probably satisfy most text-input use cases. However, `Input` is coupled with the Material Design style so there might be cases where you want to use [`RawInputLine`](https://docs.flutter.io/flutter/widgets/RawInputLine-class.html) to achieve desired interfaces outside of the Material Design language.


please line break this. makes review a lot easier.

sethladd · 2016-09-23T21:34:53Z

+Using the Input Widget
+---------
+
+Assuming that the input is already in focus, the basic data flow for retrieving user input will be:


global: line break at 80

sethladd · 2016-09-23T21:35:18Z

+Example
+---------
+
+This example is a `StatefulWidget` that mirrors the text inside an `Input`.


nit: space after this line, before the code sample

dvdwasibi · 2016-09-23T21:42:34Z

@sethladd Pushed new changes and fixed the merge issue.

sethladd · 2016-09-23T21:58:51Z

+
+## Introduction
+
+This page describe how to setup basic text input for Flutter applications.


Not sure if it's setup or "set up". cc @qchong

Seems like it should be "set up":
https://www.visualthesaurus.com/cm/wc/is-it-set-up-set-up-or-setup/

Fixed.

"set up" is correct.

sethladd · 2016-09-23T21:59:37Z

+[`Input`](https://docs.flutter.io/flutter/material/Input-class.html)
+widget under
+[Material](https://docs.flutter.io/flutter/material/material-library.html )
+will probably satisfy most text-input use cases. However, `Input` is coupled


s/will probably satisfy/satisfies

s/text-input/text input

sethladd · 2016-09-23T22:01:41Z

+[`Input`](https://docs.flutter.io/flutter/material/Input-class.html)
+widget under
+[Material](https://docs.flutter.io/flutter/material/material-library.html )
+will probably satisfy most text-input use cases. However, `Input` is coupled


The Input widget implements material design's style. If you want an input widget that does not use material design, see RawInputLine.

sethladd · 2016-09-23T22:02:30Z

+to achieve desired interfaces outside of the Material Design language.
+
+
+Using the Input Widget


I prefer prefixing headers with # or ## (depending on your needs). That way, you don't need to match the length of ----

sethladd · 2016-09-23T22:03:49Z

+to achieve desired interfaces outside of the Material Design language.
+
+
+Using the Input Widget


I like to use headers that are descriptive of solving a user problem.

The user problem isn't "I need to use an Input Widget", it's (in this case), "Retrieving user input".

sethladd · 2016-09-23T22:08:19Z

+3. Perform any necessary logic/validation on the current input value
+4. Update the `Input` widget accordingly.
+
+For most cases, you will probably want to use a `Input` within a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)


s/you will probably want/we recommend

sethladd · 2016-09-23T22:08:45Z

+4. Update the `Input` widget accordingly.
+
+For most cases, you will probably want to use a `Input` within a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)
+since you want to save the and operate on the current state of the input.


s/since you want to/so you can

sethladd · 2016-09-23T22:08:57Z

+4. Update the `Input` widget accordingly.
+
+For most cases, you will probably want to use a `Input` within a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)
+since you want to save the and operate on the current state of the input.


missing a word after "save the" ?

sethladd · 2016-09-23T22:09:20Z

+For most cases, you will probably want to use a `Input` within a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)
+since you want to save the and operate on the current state of the input.
+If you are unfamiliar with the `StatefulWidget` and managing state in Flutter,
+you should look at the


please read our guide on managing widget state.

sethladd · 2016-09-23T22:09:31Z

+you should look at the
+[managing state guide](https://flutter.io/widgets-intro/#managing-state) first.
+
+Example


nit: use # or ##

sethladd · 2016-09-23T22:10:11Z

Thanks @dvdwasibi ! Much appreciated.

@qchong might also want to provide a review.

dvdwasibi · 2016-09-23T22:48:54Z

@sethladd Pushed up the new fixes in 5ec6c4c

sethladd

thanks! lgtm after these tweaks but @qchong should also review :)

sethladd · 2016-09-23T23:24:30Z

+
+## Introduction
+
+This page describe how to set up basic text input for Flutter applications.


s/describe/describes

sethladd · 2016-09-23T23:25:00Z

+[`Input`](https://docs.flutter.io/flutter/material/Input-class.html)
+widget under
+[Material](https://docs.flutter.io/flutter/material/material-library.html )
+satisfies most text input use cases. The `Input` widget implements material


hm, now I think it should be ", and implements material design's style".

sethladd · 2016-09-23T23:25:30Z

+1. User taps a character in the keyboard.
+2. The
+[`OnChanged`](https://docs.flutter.io/flutter/material/Input/onChanged.html)
+callback is called with the current `value` of the widget


end sentences with a period. (global. See also #3 in this list)

sethladd · 2016-09-23T23:26:30Z

+[`setState()`](https://docs.flutter.io/flutter/widgets/State/setState.html).
+
+For most cases, we recommend a `Input` within a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)
+so you can save and operate on the current state of the input.


You used "value" before, but you use the word "state" here. Does an input have a value or a state?

It has a value. Fixed.

sethladd · 2016-09-23T23:27:34Z

+
+For most cases, we recommend a `Input` within a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)
+so you can save and operate on the current state of the input.
+If you are unfamiliar with the `StatefulWidget` and managing state in Flutter,


drop "the", so it reads "with StatefulWidget".

s/managing.../how to manage state in Flutter

sethladd

lgtm with one comment

Over to @qchong !

sethladd · 2016-09-24T00:07:23Z

+
+For most cases, we recommend a `Input` within a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)
+so you can save and operate on the current value of the input.
+If you are unfamiliar with `StatefulWidget` and managing state in Flutter,


Actually, this might be better as "To learn more about StatefulWidget and managing state in Flutter, ..."

(avoiding the conditional and the negative at the start of the sentence :)

sethladd

lgtm

qchong · 2016-09-26T16:47:36Z

      output: web

+    - title: Text Input
+      url: /text-input/


Please create a link on the index.md page as well.

qchong · 2016-09-26T16:53:32Z

+[`OnChanged`](https://docs.flutter.io/flutter/material/Input/onChanged.html)
+callback is called with the current `value` of the widget.
+3. Perform any necessary logic/validation on the current input value.
+4. Update the state of the `Input` widget accordingly through


For consistency, please create a link to the Input class API reference whenever you refer to the Input widget. Please make this change to all instances on this page.

Fixed. Also added links for all API class references.

qchong · 2016-09-26T16:56:02Z

+4. Update the state of the `Input` widget accordingly through
+[`setState()`](https://docs.flutter.io/flutter/widgets/State/setState.html).
+
+For most cases, we recommend a `Input` within a [`StatefulWidget`](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html)


Suggest rewriting to something like this: "...we recommend that you add the Input class..."

Fixed. I changed it to "...we recommend that you use the Input class..."

qchong

lgtm, overall looks good. I've added some comments for a few stylistic improvements. Thanks for working on this!

David Yang added 3 commits September 8, 2016 22:51

Use single quotes in style guide.

b87c286

First pass through of documenting use of the Input widget.

a665735

Adding sidebar yaml config data

b67c76c

sethladd reviewed Sep 23, 2016

View reviewed changes

Pull request fixes.

96312dd

Code formatting.

2cc4e67

sethladd reviewed Sep 23, 2016

View reviewed changes

Pull Request fixes

5ec6c4c

sethladd reviewed Sep 23, 2016

View reviewed changes

Pull Request Fixes.

209ac28

sethladd reviewed Sep 24, 2016

View reviewed changes

PR fixes

5cbb203

sethladd approved these changes Sep 26, 2016

View reviewed changes

qchong reviewed Sep 26, 2016

View reviewed changes

PR fixes.

2815036

qchong reviewed Sep 26, 2016

View reviewed changes

qchong approved these changes Sep 26, 2016

View reviewed changes

Cleaning up link consistency.

95cced3

sethladd merged commit 6c88aa6 into flutter:master Sep 26, 2016


		This page describe how to setup basic text input for Flutter applications.

		The [`Input`](https://docs.flutter.io/flutter/material/Input-class.html) widget under [Material](https://docs.flutter.io/flutter/material/material-library.html) will probably satisfy most text-input use cases. However, `Input` is coupled with the Material Design style so there might be cases where you want to use [`RawInputLine`](https://docs.flutter.io/flutter/widgets/RawInputLine-class.html) to achieve desired interfaces outside of the Material Design language.


		## Introduction

		This page describe how to setup basic text input for Flutter applications.

		to achieve desired interfaces outside of the Material Design language.


		Using the Input Widget


		## Introduction

		This page describe how to set up basic text input for Flutter applications.

Conversation

dvdwasibi commented Sep 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dvdwasibi commented Sep 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sethladd Sep 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sethladd commented Sep 23, 2016

Uh oh!

dvdwasibi commented Sep 23, 2016

Uh oh!

sethladd left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sethladd Sep 23, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

dvdwasibi commented Sep 23, 2016 •

edited

Loading

dvdwasibi commented Sep 23, 2016 •

edited

Loading

sethladd Sep 23, 2016 •

edited

Loading

sethladd Sep 23, 2016 •

edited

Loading

dvdwasibi Sep 23, 2016 •

edited

Loading