Search packages, repositories and app categories

list_tile_switch cover
Package detailsv1.0.0

list_tile_switch

A simple yet elegant widget combines Material ListTile with custom and original Material and Cupertino switch implementations.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
458
Likes
75
Pub points
150

Install package

flutter pub add list_tile_switch

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that seamlessly integrates Material Design ListTile with customizable, native-inspired switches for both Material and Cupertino styles. It offers a clean, elegant solution for creating toggleable list items with consistent cross-platform appearance. The widget is designed to enhance user experience by combining functionality and aesthetic appeal in a lightweight, easy-to-use component. Ideal for settings or preference screens where toggles are frequently used.

Use cases

  • Settings UIs
  • Preference panels
  • Toggleable list items
  • User profile configurations
  • Form controls

Key features

  • Customizable Material and Cupertino switches
  • Seamless ListTile integration
  • Cross-platform consistency
  • Lightweight and performant
  • Easy to implement
  • Styling flexibility

Suitable for

  • Developers building settings screens
  • Designers seeking native-like toggles
  • Apps requiring cross-platform switch components
  • Projects emphasizing UI polish

Considerations

  • Requires Flutter 3.0+
  • Limited to switch-specific functionality
  • No built-in animations beyond standard transitions
  • May need additional styling for complex layouts

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

ListTileSwitch

Build Status Codemagic build status Coverage Status

ListTileSwitch is a simple widget that combines ListTile with a switch. Offering 3 types of switch widgets:

  1. Switch: Material Switch from Material library on Flutter SDK.
  2. CupertinoSwitch: CupertinoSwitch from Cupertino library on Flutter SDK.
  3. A custom switch.

Demo

Tested on Android and Web but not iOS. Theoritacially it should work on iOS devices too, since this package contains nothing but pure Dart and Flutter components.

Installation

Add dependency for package on your pubspec.yaml:

dependencies:
    list_tile_switch: <latest>

Usage

Use it as a regular ListTile widget with a bonus: the trailing widget is a switch. Covering all aspects of the ListTile and adding more with a custom switch.

Parameter Definition
double switchScale Adjusting the scale of the switch widget.
Color switchActiveColor The color of the switch when the switch is active.
bool toggleSelectedOnValueChange Deciding whether to color the ListTile when switch value is true, the selected color will be the switchActiveColor.
Color switchInactiveColor Color when the switch is inactive.
SwitchType switchType Indicating the type of switch to be displayed.
bool value Current state of the switch value.
onChanged(bool) Toggle callback for the widget.
Widget leading, Widget title, Widget subtitle, Widget isThreeLine, EdgeInsetsGeometry contentPadding, VoidCallback onLongPress, VisualDensity visualDesnsity, bool dense, bool enabled, FocusNode focusNode, bool autoFocus, bool selected, Color focusColor, Color hoverColor, MouseCursor mouseCursor Referring to the original implementation of ListTile from Flutter SDK, all of the values are mapped directly to the ListTile widget internally.

Example

import 'package:flutter/material.dart';  
import 'package:list_tile_switch/list_tile_switch.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
  return MaterialApp(  
  title: 'Flutter ListTileSwitch Demo',  
  debugShowCheckedModeBanner: false,  
  theme: ThemeData(  
  primarySwatch: Colors.blue,  
  visualDensity: VisualDensity.adaptivePlatformDensity,  
 ),  home: ListTileSwitchExample(title: 'Flutter ListTileSwitch Demo'),  
 ); }}  
  
class ListTileSwitchExample extends StatefulWidget {  
  ListTileSwitchExample({Key key, this.title}) : super(key: key);  
  final String title;  
  @override  
  _ListTileSwitchExampleState createState() => _ListTileSwitchExampleState();  
}  
  
class _ListTileSwitchExampleState extends State<ListTileSwitchExample> {  
  bool _value = false;  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
	  appBar: AppBar(  
		title: Text(widget.title),  
	  ),
	  body: ListTileSwitch(  
	    value: _value,  
		leading: Icon(Icons.access_alarms),  
		onChanged: (value) {  
		  setState(() {  
			_value = value;  
		  });
		},
		visualDensity: VisualDensity.comfortable,
		switchType: SwitchType.cupertino,
		switchActiveColor: Colors.indigo,  
		title: Text('Default Custom Switch'),  
	 ),
   );
}}

Todo

The list of additional features that are considered to be implemented in the future.

  • [ ] Creating more tests
  • [ ] Add interactivity to custom switch widget
  • [ ] Make custom switch more configurable
    • [ ] Configurable thumb shape
    • [ ] Configurable track shape
    • [ ] Scaling animation on value change

Contribution

Contributions are accepted via pull requests. For more information about how to contribute to this package, please check the contribution guide.

License

This project is licensed under the MIT license, additional knowledge about the license can be found here.

Categories

Source repository

Projects using this package

No data available yet.