Flutter - Implement SwitchListTile Widget
Last Updated :
16 Oct, 2023
The SwitchListTile widget in Flutter is a combination of a ListTile and a switch. It provides a user-friendly way to toggle a boolean setting or option within your app. Here's how you can implement a SwitchListTile widget. A sample video is given below to get an idea about what we are going to do in this article.
Constructor of SwitchListTile Class
SwitchListTile({
Key? key,
required bool value, // The current value of the switch (true for on, false for off).
required ValueChanged<bool?> onChanged, // Callback when the switch is toggled.
Widget? title, // The title of the ListTile.
Widget? subtitle, // Optional subtitle.
Widget? secondary, // Optional leading icon or widget.
bool isThreeLine = false, // Whether the list tile has three lines.
bool dense, // Whether the list tile is dense.
bool controlAffinity = ListTileControlAffinity.platform, // Where to place the control (leading or trailing).
EdgeInsetsGeometry? contentPadding, // Optional padding for the content.
Color? activeColor, // The color to use when the switch is on.
Color? activeTrackColor, // The color to use for the switch's track when it's on.
Color? inactiveThumbColor, // The color to use for the switch's thumb when it's off.
Color? inactiveTrackColor, // The color to use for the switch's track when it's off.
ImageProvider<Object>? activeThumbImage, // The image to display on the thumb when the switch is on.
ImageErrorListener? onActiveThumbImageError, // Callback for errors when loading activeThumbImage.
ImageProvider<Object>? inactiveThumbImage, // The image to display on the thumb when the switch is off.
ImageErrorListener? onInactiveThumbImageError, // Callback for errors when loading inactiveThumbImage.
})
Properties
- title: The primary text displayed in the ListTile.
- subtitle: An optional secondary text displayed below the title.
- secondary: An optional widget (usually an Icon) displayed to the left of the title and subtitle.
- value: The current value of the switch. It's controlled by the _switchValue variable.
- onChanged: A callback function that is invoked when the switch is toggled. It updates the _switchValue variable using setState.
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementations
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(
MyApp(),
);
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp, here we are also set the Theme of our App.
Dart
// Define the main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is
// the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListTile', // Set the app's title
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
home: MySwitchListTileScreen(), // Set the initial screen to MySwitchListTileScreen
debugShowCheckedModeBanner: false, // Disable the debug banner
);
}
}
Step 5: Create MySwitchListTileScree Class
In this class, we are going to implement a scaffold to display our UI, and Here we are also applying the SwitchListTile widget, The UI contains a SwitchListTile widget and a TextView the TextView will show the state of the SwitchListtTile widget.
Dart
class MySwitchListTileScreen extends StatefulWidget {
@override
_MySwitchListTileScreenState createState() => _MySwitchListTileScreenState();
}
// Define the state for the switch list tile screen
class _MySwitchListTileScreenState extends State<MySwitchListTileScreen> {
bool _switchValue = false; // Initial switch value
String mess = "Truned Off"; // Initial message
// Function to change the message based on the switch value
void changeMessage() {
setState(() {
if (_switchValue) {
mess = "Truned On";
} else {
mess = "Truned Off";
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Switch List Tile Example'), // Set the app bar title
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: SwitchListTile(
title: Text('Trun On/Off'), // The title of the ListTile
subtitle:
Text('Turn this feature on or off'), // Optional subtitle
secondary: Icon(Icons.lightbulb_outline), // Optional leading icon
value: _switchValue, // The current value of the switch
onChanged: (newValue) {
// Callback when the switch is toggled
setState(() {
_switchValue = newValue;
changeMessage(); // Call the function to update the message
});
},
),
),
SizedBox(
height: 20,
),
Text(
mess, // Display the message
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
],
),
);
}
}
Here is the full code to refer to the main.dart file
Dart
import 'package:flutter/material.dart';
void main() {
runApp(
MyApp(),
);
}
// Define the main application widget
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is
// the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListTile', // Set the app's title
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
home: MySwitchListTileScreen(), // Set the initial screen to MySwitchListTileScreen
debugShowCheckedModeBanner: false, // Disable the debug banner
);
}
}
// Define the stateful widget for the switch list tile screen
class MySwitchListTileScreen extends StatefulWidget {
@override
_MySwitchListTileScreenState createState() => _MySwitchListTileScreenState();
}
// Define the state for the switch list tile screen
class _MySwitchListTileScreenState extends State<MySwitchListTileScreen> {
bool _switchValue = false; // Initial switch value
String mess = "Truned Off"; // Initial message
// Function to change the message based on the switch value
void changeMessage() {
setState(() {
if (_switchValue) {
mess = "Truned On";
} else {
mess = "Truned Off";
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Switch List Tile Example'), // Set the app bar title
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: SwitchListTile(
title: Text('Trun On/Off'), // The title of the ListTile
subtitle:
Text('Turn this feature on or off'), // Optional subtitle
secondary: Icon(Icons.lightbulb_outline), // Optional leading icon
value: _switchValue, // The current value of the switch
onChanged: (newValue) {
// Callback when the switch is toggled
setState(() {
_switchValue = newValue;
changeMessage(); // Call the function to update the message
});
},
),
),
SizedBox(
height: 20,
),
Text(
mess, // Display the message
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
],
),
);
}
}
Output:
Similar Reads
Non-linear Components
In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
Use Case Diagram - Unified Modeling Language (UML)
A Use Case Diagram in Unified Modeling Language (UML) is a visual representation that illustrates the interactions between users (actors) and a system. It captures the functional requirements of a system, showing how different users engage with various use cases, or specific functionalities, within
10 min read
Half Wave Rectifier
A Half-wave rectifier is an electronic device that is used to convert Alternating current (AC) to Direct current (DC). A half-wave rectifier allows either a positive or negative half-cycle of AC to pass and blocks the other half-cycle. Half-wave rectifier selectively allows only one half-cycle of th
15 min read
How to Download and Install the Google Play Store
The Google Play Store is the heartbeat of your Android experience—home to millions of apps, games, and updates that keep your device functional, fun, and secure. But what if your phone or tablet doesn’t have it pre-installed? In this step-by-step guide, you’ll learn how to safely download and instal
6 min read
Top 8 Software Development Life Cycle (SDLC) Models used in Industry
Software development models are various processes or methods that are chosen for project development depending on the objectives and goals of the project. Many development life cycle models have been developed to achieve various essential objectives. Models specify the various steps of the process a
9 min read
Flutter Tutorial
This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework. Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
What is Agile Methodology?
The Agile methodology is a proper way of managing the project with breaking them into smaller phases which is iteration. It basically focus on flexibility of the project which we can change and improve the team work regularly as per requirements. Table of Content What is Agile?What is the Agile Meth
15 min read
MVC Framework Introduction
Over the last few years, websites have shifted from simple HTML pages with a bit of CSS to incredibly complex applications with thousands of developers working on them at the same time. To work with these complex web applications developers use different design patterns to lay out their projects, to
6 min read
Transaction in DBMS
In a Database Management System (DBMS), a transaction is a sequence of operations performed as a single logical unit of work. These operations may involve reading, writing, updating, or deleting data in the database. A transaction is considered complete only if all its operations are successfully ex
10 min read
IEEE 802.11 Architecture
The IEEE 802.11 standard, commonly known as Wi-Fi, outlines the architecture and defines the MAC and physical layer specifications for wireless LANs (WLANs). Wi-Fi uses high-frequency radio waves instead of cables for connecting the devices in LAN. Given the mobility of WLAN nodes, they can move unr
9 min read