Introduction to handling user input in flutter with example..

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

As a multi-platform UI framework, there are many different ways for users to interact with a Flutter app. The resources in this section…

As a multi-platform UI framework, there are many different ways for users to interact with a Flutter app. The resources in this section introduce you to some of the common widgets used for enabling user interaction within your app.

Now, we'll cover a few of the Material widgets that support common use cases for handling user input in your Flutter app.

Buttons:

Buttons allow a user to initiate an action in the UI by clicking or tapping. The Material library provides a variety of button types that are functionally similar, but styled differently for various use cases, including:

• ElevatedButton: A button with some depth. Use elevated buttons to add dimension to otherwise mostly flat layouts.
• FilledButton: A filled button that should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.
• OutlinedButton: A button with text and a visible border. These buttons contain actions that are important, but aren't the primary action in an app.
• TextButton: Clickable text, without a border. Since text buttons don't have visible borders, they must rely on their position relative to other content for context.
• Tonal Button: A middle ground button betweenFilledButtonandOutlinedButton. They're useful in contexts where a lower-prioritybutton requires more emphasis than an outline, like Next.
• FloatingActionButton: An icon button that hovers over content to promote a primary action.

Example

int count = 0;

@override
Widget build(BuildContext context) {
  return ElevatedButton(
    style: ElevatedButton.styleFrom(
      textStyle: const TextStyle(fontSize: 20),
    ),
    onPressed: () {
      setState(() {
        count += 1;
      });
    },
    child: const Text('Enabled'),
  );
}

Output

Text:

Several widgets support text input.

SelectableText

Flutter's Text widget displays text on the screen, but doesn't allow users to highlight or copy the text. SelectableText displays a string of user-selectable text.

Example

@override
Widget build(BuildContext context) {
  return const SelectableText('''
Two households, both alike in dignity,
In fair Verona, where we lay our scene,
From ancient grudge break to new mutiny,
Where civil blood makes civil hands unclean.
From forth the fatal loins of these two foes''');
}

Output

RichText:

RichText lets you display strings of rich text in your app. TextSpan, similar to RichText, allows you to display parts of text with different text styles. It's not for handling user input, but is useful if you're allowing users edit and format text.

Example:

@override
Widget build(BuildContext context) {
  return RichText(
    text: TextSpan(
      text: 'Hello ',
      style: DefaultTextStyle.of(context).style,
      children: const <TextSpan>[
        TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
        TextSpan(text: ' world!'),
      ],
    ),
  );
}

Output

TextField:

A TextField lets users enter text in text box using a hardware or onscreen keyboard.

TextFields have many different properties and configurations. A few of the highlights:

• InputDecorationdetermines the text field's appearance, such as color and border.
• controller: A TextEditingController controls the text being edited. Why might you need a controller? By default, your app's users can type into the text field, but if you want to programmatically control the TextField and clear its value, for example, you'll need a TextEditingController.
• onChanged: This callback function triggers when the user changes the text field's value, such as when inserting or removing text.
• onSubmitted: This callback is triggered when the user indicates that they are done editing the text in the field; for example, by tapping the "enter" key when the text field is in focus.

Example

final TextEditingController _controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,
    decoration: const InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'Mascot Name',
    ),
  );
}

Output

Select a value from a group of options:

Provide a way to users to select from several options.

SegmentedButton

SegmentedButton allows users to select from a minimal group of 2-5 items.

The data type, <T>, can be a built-in type such as int, String, boolor an enum. A SegmentedButton has a few relevant properties:

• segments, a list of ButtonSegments, where each represents a "segment" or option that the user can select. Visually, each ButtonSegment can have an icon, text label, or both.
• multiSelectionEnabled indicates whether the user is allowed to select multiple options. This property defaults to false.
• selected identifies the currently selected value(s). Note:selected is of type of Set<T>, so if you're only allowing users to select one value, that value must be provided as aSet with a single element.
• The onSelectionChanged callback triggers when a user selects any segments. It provides a list of the selected segments so you can update your app state.
• Additional styling parameters allow you to modify the button's appearance. For example, style takes a ButtonStyle, providing a way to configure a selectedIcon.

Example:

enum Calendar { day, week, month, year }

// StatefulWidget...
Calendar calendarView = Calendar.day;

@override
Widget build(BuildContext context) {
  return SegmentedButton<Calendar>(
    segments: const <ButtonSegment<Calendar>>[
      ButtonSegment<Calendar>(
          value: Calendar.day,
          label: Text('Day'),
          icon: Icon(Icons.calendar_view_day)),
      ButtonSegment<Calendar>(
          value: Calendar.week,
          label: Text('Week'),
          icon: Icon(Icons.calendar_view_week)),
      ButtonSegment<Calendar>(
          value: Calendar.month,
          label: Text('Month'),
          icon: Icon(Icons.calendar_view_month)),
      ButtonSegment<Calendar>(
          value: Calendar.year,
          label: Text('Year'),
          icon: Icon(Icons.calendar_today)),
    ],
    selected: <Calendar>{calendarView},
    onSelectionChanged: (Set<Calendar> newSelection) {
      setState(() {
        Suggested change
        // By default there is only a single segment that can be
        // selected at one time, so its value is always the first
        // By default, only a single segment can be
        // selected at one time, so its value is always the first
        calendarView = newSelection.first;
      });
    },
  );
}

Output

Follow for more flutter updates and tips Dayakumar