Summary  
This chapter explains how to implement interactive UI components—handling tap events with buttons, managing text entry via input fields and controllers, and organizing scrollable data using list and card widgets.

General domain of usage  
Mobile user interface development

**Interactive widgets** are widgets that respond to user input.

Definition

Watch this visual walkthrough to see how to build and use buttons, text inputs, lists, and cards in a Flutter app. You'll learn how each widget works, how they respond to user interaction, and how to combine them to create interactive user interfaces.

In Flutter, you use interactive widgets to create elements that respond to taps, gestures, and other forms of user interaction. One of the most common interactive widgets is the `ElevatedButton`. This button uses the `onPressed` callback to define what happens when a user taps the button.

Ly8gbWFpbi5kYXJ0CmltcG9ydCAncGFja2FnZTpmbHV0dGVyL21hdGVyaWFsLmRhcnQnOwoKdm9pZCBtYWluKCkgPT4gcnVuQXBwKE15QXBwKCkpOwoKY2xhc3MgTXlBcHAgZXh0ZW5kcyBTdGF0ZWxlc3NXaWRnZXQgewogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewogICAgcmV0dXJuIE1hdGVyaWFsQXBwKAogICAgICBob21lOiBTY2FmZm9sZCgKICAgICAgICBhcHBCYXI6IEFwcEJhcih0aXRsZTogVGV4dCgnRWxldmF0ZWRCdXR0b24gRXhhbXBsZScpKSwKICAgICAgICBib2R5OiBDZW50ZXIoCiAgICAgICAgICBjaGlsZDogRWxldmF0ZWRCdXR0b24oCiAgICAgICAgICAgIG9uUHJlc3NlZDogKCkgewogICAgICAgICAgICAgIHByaW50KCdCdXR0b24gcHJlc3NlZCEnKTsKICAgICAgICAgICAgfSwKICAgICAgICAgICAgY2hpbGQ6IFRleHQoJ1ByZXNzIE1lJyksCiAgICAgICAgICApLAogICAgICAgICksCiAgICAgICksCiAgICApOwogIH0KfQ==

To collect user input, you can use the `TextField` widget. This widget allows users to enter text, and you can use a controller to access or modify the text programmatically.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSA9PiBydW5BcHAoTXlBcHAoKSk7CgpjbGFzcyBNeUFwcCBleHRlbmRzIFN0YXRlbGVzc1dpZGdldCB7CiAgZmluYWwgVGV4dEVkaXRpbmdDb250cm9sbGVyIF9jb250cm9sbGVyID0gVGV4dEVkaXRpbmdDb250cm9sbGVyKCk7CgogIEBvdmVycmlkZQogIFdpZGdldCBidWlsZChCdWlsZENvbnRleHQgY29udGV4dCkgewogICAgcmV0dXJuIE1hdGVyaWFsQXBwKAogICAgICBob21lOiBTY2FmZm9sZCgKICAgICAgICBhcHBCYXI6IEFwcEJhcih0aXRsZTogVGV4dCgnVGV4dEZpZWxkIEV4YW1wbGUnKSksCiAgICAgICAgYm9keTogUGFkZGluZygKICAgICAgICAgIHBhZGRpbmc6IGNvbnN0IEVkZ2VJbnNldHMuYWxsKDE2LjApLAogICAgICAgICAgY2hpbGQ6IENvbHVtbigKICAgICAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgICAgICBUZXh0RmllbGQoCiAgICAgICAgICAgICAgICBjb250cm9sbGVyOiBfY29udHJvbGxlciwKICAgICAgICAgICAgICAgIGRlY29yYXRpb246IElucHV0RGVjb3JhdGlvbihsYWJlbFRleHQ6ICdFbnRlciB0ZXh0JyksCiAgICAgICAgICAgICAgKSwKICAgICAgICAgICAgICBTaXplZEJveChoZWlnaHQ6IDIwKSwKICAgICAgICAgICAgICBFbGV2YXRlZEJ1dHRvbigKICAgICAgICAgICAgICAgIG9uUHJlc3NlZDogKCkgewogICAgICAgICAgICAgICAgICBwcmludCgnSW5wdXQ6IBtbMW0ke19jb250cm9sbGVyLnRleHR9G1swbScpOwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIGNoaWxkOiBUZXh0KCdTdWJtaXQnKSwKICAgICAgICAgICAgICApLAogICAgICAgICAgICBdLAogICAgICAgICAgKSwKICAgICAgICApLAogICAgICApLAogICAgKTsKICB9Cn0=

To display collections of data, Flutter provides the `ListView` widget, which efficiently renders a scrollable list of items. For visually grouping related information, use the **Card** widget inside a `ListView` to give each list item a distinct appearance.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSA9PiBydW5BcHAoTXlBcHAoKSk7CgpjbGFzcyBNeUFwcCBleHRlbmRzIFN0YXRlbGVzc1dpZGdldCB7CiAgZmluYWwgTGlzdDxTdHJpbmc+IGl0ZW1zID0gWydBcHBsZScsICdCYW5hbmEnLCAnQ2hlcnJ5JywgJ0RhdGUnLCAnRWxkZXJiZXJyeSddOwoKICBAb3ZlcnJpZGUKICBXaWRnZXQgYnVpbGQoQnVpbGRDb250ZXh0IGNvbnRleHQpIHsKICAgIHJldHVybiBNYXRlcmlhbEFwcCgKICAgICAgaG9tZTogU2NhZmZvbGQoCiAgICAgICAgYXBwQmFyOiBBcHBCYXIodGl0bGU6IFRleHQoJ0xpc3RWaWV3IHdpdGggQ2FyZHMnKSksCiAgICAgICAgYm9keTogTGlzdFZpZXcuYnVpbGRlcigKICAgICAgICAgIGl0ZW1Db3VudDogaXRlbXMubGVuZ3RoLAogICAgICAgICAgaXRlbUJ1aWxkZXI6IChjb250ZXh0LCBpbmRleCkgewogICAgICAgICAgICByZXR1cm4gQ2FyZCgKICAgICAgICAgICAgICBtYXJnaW46IEVkZ2VJbnNldHMuc3ltbWV0cmljKGhvcml6b250YWw6IDE2LCB2ZXJ0aWNhbDogOCksCiAgICAgICAgICAgICAgY2hpbGQ6IExpc3RUaWxlKAogICAgICAgICAgICAgICAgdGl0bGU6IFRleHQoaXRlbXNbaW5kZXhdKSwKICAgICAgICAgICAgICApLAogICAgICAgICAgICApOwogICAgICAgICAgfSwKICAgICAgICApLAogICAgICApLAogICAgKTsKICB9Cn0=

Which widget would you use to collect text input from a user in Flutter?

Learn the essential skills to build simple, visually appealing Android and iOS apps using Flutter. This course covers Dart fundamentals, Flutter project structure, UI building blocks, navigation, and theming to help you create robust mobile applications.

Get introduced to Flutter and Dart, their relationship, and the core concepts that power Flutter app development.

Dive into the widget-based architecture of Flutter and understand how the widget tree and build context work.

Master the essential widgets and layout systems for building clean and responsive Flutter UIs.

Implement navigation in your Flutter apps using Navigator, named routes, and data passing techniques.

Buttons, Inputs, Lists, Cards