DISCOVER FLUTTER — WEEK #17

SwitchListTile Widget

Jelena Jovanoski

Dec 22, 2020·3 min read

Settings section exists in every app and taking into account the fact that people like one-click features, switch buttons are always a good option.

Usually, this screen contains a list of setting options. Since it is a list and we want to present it in the form of a toggle button, the widget that provides this in one go is the SwitchListTile Widget.

SwitchListTile in a few words

SwitchListTile is similar to other list tile widgets (CheckboxListTile, RadioListTile, because this widget is a ListTile with a Switch .

Compared to the ListTile widget, it has two additional mandatory properties:

• value — boolean value that monitors the state of the button. It tells us whether this switch is checked. This property must not be null.
• onChanged — This method is called when the user toggles the switch on or off. In this method, we change the state of the property that monitors the state of the toggle button (on/off = true/false)

If you want to add a leading icon that will specify the function of this button next to the title, you can use the property secondary that receives the Widget type.

SwitchListTile in Example

SwitchListTile(
  title: Text('Airplane Mode'),
  secondary: Icon(Icons.airplanemode_active),
  onChanged: (value) {
    setState(() {
      _toggleAirplaneMode = value;
    });
  },
  value: _toggleAirplaneMode,
)

What’s cool about this widget is the fact that tapping anywhere in the tile toggles the switch. This feature provides a better user experience.

The switch is shown on the right by default in left-to-right languages, which can be changed using controlAffinity.

If you want to achieve this screen look in your app, the code is below:

class _MyHomePageState extends State<MyHomePage> {
  bool _toggleAirplaneMode = false;
  bool _toggleBluetooth = false;
  bool _toggleWiFi = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Column(
          children: [
            SwitchListTile(
              title: Text('Airplane Mode'),
              secondary: Icon(Icons.airplanemode_active),
              onChanged: (value) {
                setState(() {
                  _toggleAirplaneMode = value;
                });
              },
              value: _toggleAirplaneMode,
            ),
            Divider(
              thickness: 1.2,
            ),
            SwitchListTile(
              title: Text('Wi-Fi'),
              secondary: Icon(Icons.wifi),
              onChanged: (value) {
                setState(() {
                  _toggleWiFi = value;
                });
              },
              value: _toggleWiFi,
            ),
            Divider(
              thickness: 1.2,
            ),
            SwitchListTile(
              title: Text('Bluetooth'),
              secondary: Icon(Icons.bluetooth),
              onChanged: (value) {
                setState(() {
                  _toggleBluetooth = value;
                });
              },
              value: _toggleBluetooth,
            ),
          ],
        )) // This trailing comma makes auto-formatting nicer for build methods.
        );
  }
}

Conclusion

If you’re a fan of short, interesting articles covering various Flutter topics and you want to get into the habit of learning Flutter with me over the next 12 weeks, you can read my articles every Tuesday.

If you have any questions or comments about this article, let me know in the comments section.

For those who want to jump into our Flutter journey, links from the previous weeks can be found below:

• Week #13 — “The Stateful Widget Lifecycle”
• Week #14 — “My December Recommendations for Flutter Packages”
• Week #15 — “Reactive Programming in Flutter”
• Week #16 — “Asynchronous Dart: Isolates and Event Loops”

See you next week. Don’t break the streak!