Flutter: Input Widgets and Status Indicators

Flutter offers a rich library of widgets for receiving data from the user and showing the application state. In this post, we will examine the most frequently used selection tools and status indicators.

Live Demo

You can try these widgets in the interactive example below:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

Selection Widgets

1. Switch

Used to toggle a setting on or off.

bool isSwitched = false;

Switch(
  value: isSwitched,
  onChanged: (value) {
    setState(() {
      isSwitched = value;
    });
  },
  activeTrackColor: Colors.lightGreenAccent,
  activeColor: Colors.green,
)

Using it within a ListTile is more common:

SwitchListTile(
  title: Text('Enable Notifications'),
  subtitle: Text('Receive app notifications'),
  value: isSwitched,
  onChanged: (value) => setState(() => isSwitched = value),
)

2. Checkbox

Used to select multiple options.

bool isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value!;
    });
  },
)

Again, using it with CheckboxListTile with a label is more practical.

3. Radio Button

Used to select only one option from a group.

int selectedValue = 1;

Column(
  children: [
    RadioListTile(
      title: Text("Option A"),
      value: 1,
      groupValue: selectedValue,
      onChanged: (val) => setState(() => selectedValue = val!),
    ),
    RadioListTile(
      title: Text("Option B"),
      value: 2,
      groupValue: selectedValue,
      onChanged: (val) => setState(() => selectedValue = val!),
    ),
  ],
)

4. Slider

Used to select a value from a range.

double currentSliderValue = 20;

Slider(
  value: currentSliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  label: currentSliderValue.round().toString(),
  onChanged: (double value) {
    setState(() {
      currentSliderValue = value;
    });
  },
)

5. ToggleButtons

A selection group consisting of buttons lined up side by side.

List<bool> isSelected = [false, true, false];

ToggleButtons(
  children: [
    Icon(Icons.format_bold),
    Icon(Icons.format_italic),
    Icon(Icons.format_underlined),
  ],
  isSelected: isSelected,
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
)

Progress Indicators

Used to show the user that a process is ongoing.

1. CircularProgressIndicator

Usually used when the page is loading or for operations with indefinite duration.

// Indeterminate (spins continuously)
const CircularProgressIndicator()

// Determinate (50% full)
const CircularProgressIndicator(value: 0.5)

2. LinearProgressIndicator

More often used at the top or bottom for operations like file downloading.

const LinearProgressIndicator()

Note on WebView

If you want to show web pages inside your application, you can use the webview_flutter package. This is not a native component but a plugin developed by the Flutter team.

dependencies:
  webview_flutter: ^4.0.0

Usage (with Controller):

// WebViewWidget usage (webview_flutter 4.x+)
WebViewWidget(controller: controller)

WebView is ideal for showing dynamic web content like "About Us", "Privacy Policy".

Summary

These widgets increase the interactivity of your application:

• Switch/Checkbox: Yes/No or multiple selection.
• Radio: Single selection.
• Slider: Range value selection.
• ProgressIndictor: Loading status.

Choosing the right input widget directly affects the user experience (UX).