DEV Community

Aadarsh Kunwar
Aadarsh Kunwar

Posted on

Flutter SwitchListTile and ListTile

SwitchListTile
SwitchListTile is a specialized version of ListTile that includes a switch control. It's commonly used when you want to present a setting that can be toggled on or off.
Key Features:

  • Title and Subtitle: Displays a main title and a subtitle.
  • Switch: Includes a switch that can be toggled.
  • Control: The state of the switch can be controlled with a callback function.
  • Trailing Icon: Instead of a trailing widget, it has a built-in switch.
`import 'package:flutter/material.dart';

class SwitchListTileExample extends StatefulWidget {
  @override
  _SwitchListTileExampleState createState() => _SwitchListTileExampleState();
}

class _SwitchListTileExampleState extends State<SwitchListTileExample> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SwitchListTile Example'),
      ),
      body: Center(
        child: SwitchListTile(
          title: Text('Enable Notifications'),
          subtitle: Text('Receive daily updates'),
          value: _isSwitched,
          onChanged: (bool value) {
            setState(() {
              _isSwitched = value;
            });
          },
          secondary: Icon(Icons.notifications),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SwitchListTileExample(),
  ));
}

Enter fullscreen mode Exit fullscreen mode

ListTile
ListTile is a more general-purpose widget that can display icons, text, and other widgets, making it highly customizable. It’s great for building more complex list items that may need different widgets in the leading, title, subtitle, and trailing positions.

Key Features:

  • Leading Icon: You can include an icon or other widget at the start.
  • Title and Subtitle: Offers text elements for primary and secondary text.
  • Trailing Icon/Widget: You can add an icon or another widget at the end.
  • Tap Interaction: Handles taps using the onTap callback.
``import 'package:flutter/material.dart';

class SwitchListTileExample extends StatefulWidget {
  @override
  _SwitchListTileExampleState createState() => _SwitchListTileExampleState();
}

class _SwitchListTileExampleState extends State<SwitchListTileExample> {
  bool _isSwitched = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SwitchListTile Example'),
      ),
      body: Center(
        child: SwitchListTile(
          title: Text('Enable Notifications'),
          subtitle: Text('Receive daily updates'),
          value: _isSwitched,
          onChanged: (bool value) {
            setState(() {
              _isSwitched = value;
            });
          },
          secondary: Icon(Icons.notifications),
        ),
      ),
    );}
}

void main() {
  runApp(MaterialApp(
    home: SwitchListTileExample(),
  ));
}`

Enter fullscreen mode Exit fullscreen mode

}
}

void main() {
runApp(MaterialApp(
home: SwitchListTileExample(),
));
}

runApp(MaterialApp(
home: SwitchListTileExample(),
));
}

Top comments (0)