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(),
));
}

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay