搜索插件、代码仓与 APP 分类

list_tile_switch 封面
插件详情v1.0.0

list_tile_switch

一个简单而优雅的组件将 Material ListTile 与自定义及原始的 Material 和 Cupertino 开关实现相结合。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
458
喜欢数
75
Pub 分数
150

安装插件

flutter pub add list_tile_switch

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,可无缝集成 Material Design ListTile 与可自定义的原生风格开关,支持 Material 和 Cupertino 风格。它提供了一种简洁优雅的解决方案,用于创建具有统一跨平台外观的可切换列表项。该组件设计旨在通过轻量级且易于使用的功能,提升用户体验,兼具实用性和美观性。非常适合在设置或偏好设置屏幕中频繁使用开关的场景。

适合场景

  • 设置界面
  • 首选项面板
  • 可切换的列表项
  • 用户配置文件设置
  • 表单控件

主要特点

  • 可自定义的 Material 和 Cupertino 开关
  • 无缝 ListTile 集成
  • 跨平台一致性
  • 轻量且高效
  • 易于实现
  • 样式灵活性

适合对象

  • 开发设置屏幕的开发者
  • 寻求原生样式的切换开关的设计人员
  • 需要跨平台切换组件的应用程序
  • 注重界面精修的项目

使用建议

  • 需要 Flutter 3.0+
  • 仅限开关特定功能
  • 除了标准转换外,没有内置动画
  • 复杂布局可能需要额外的样式

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。