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

rounded_expansion_tile 封面
插件详情v0.0.13

rounded_expansion_tile

一个简单的 Flutter 应用程序 ExpansionTile,带有圆角边框。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
705
喜欢数
28
Pub 分数
135

安装插件

flutter pub add rounded_expansion_tile

插件介绍

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

一个 Flutter 包,提供可自定义圆角的增强版 ExpansionTile,为可折叠内容区域提供现代且视觉上吸引人的设计。专为简洁性和集成性而构建,在所有平台上扩展了标准 ExpansionTile 的圆角功能。非常适合在移动和 Web 应用中创建干净、用户友好的界面。该包轻量级,并保持与 Flutter 核心组件的兼容性。

适合场景

  • 在表单中创建样式化的可折叠部分
  • 在仪表板中设计响应式折叠面板
  • 通过圆角交互元素提升UI一致性
  • 构建可访问的导航面板
  • 在电子商务应用中实现可扩展的产品详情

主要特点

  • 可自定义边框圆角
  • 跨平台支持(Android、iOS、Web、macOS、Windows、Linux)
  • 与现有 Flutter 项目的简单集成
  • 扩展标准 ExpansionTile
  • 轻量级且依赖项最少

适合对象

  • 寻求精美用户界面组件的开发者
  • 专注于视觉一致性的UI设计师
  • 需要一致的圆角卡片式扩展的项目
  • 面向多平台的应用程序
  • Flutter 初学者探索 widget 自定义

使用建议

  • 仅限边框圆角样式
  • 不包括标准 ExpansionTile 之外的其他动画
  • 如需,需要手动处理内容填充
  • 除了默认设置外,没有内置的图标或标题自定义功能
  • 最适合简单的扩展用例,无需复杂的布局

原始 README

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

Rounded Expansiontile

A simple combination of widgets to provide an Expansiontile with rounded corners. This widget uses default Flutter widgets only and is available for each platform.

Getting Started

This Widget returns a column with a ListTile and a ListView. It has all properties of the ListTile width a few custom inputfield. Simply load the widget in your pubspec yaml and start using it.

Inputfields

Default ListTile and ExpansionTile inputfields
  • autofocus

  • contentPadding

  • dense

  • enabled

  • enableFeedback

  • focusColor

  • focusNode

  • horizontalTitleGap

  • hoverColor

  • isThreeLine

  • key

  • leading

  • minLeadingWidth

  • minVerticalPadding

  • mouseCursor

  • onLongPress

  • selected

  • selectedTileColor

  • shape

  • subtitle

  • title

  • tileColor

  • trailing

  • visualDensity

  • onTap

  • initiallyExpanded

Extra inputfields and tips
  • shape Shape()

    The shape will be used for the shape of the ListTile, not for the children. This is visible when pressed and will be shown in the ink splash.

    Use the RoundedExpansionTile in a Card-widget with the same shape for the best result.

    Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
        child: RoundedExpansionTile(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
            title: Text('Some title'),
            children: [
                child1,
                child2,
                child3,
                ...
            ],
        ),
    ),
    
  • duration Duration()

    This will be used to show the expansion animation. It is used for the Expansion it self and the rotation / animation of the Icon. By default the duration is 500 milliseconds.

  • children List<Widget>[]

    The children that will be displayd when the ListTile is expanded.

  • childrenPadding EdgeInsets()

    The padding around the children. This is not the same as the contentpadding.

  • curve Curve()

    The curve used for the children animation. By default it uses Curves.fastLinearToSlowEaseIn

  • trailing Widget()

    When provided this will override the default hamburger menu icon (AnimatedIcon). This icon will rotate by default but can be set to false see rotateTrailing.

  • rotateTrailing bool

    Rotate the custom trailing icon when provided. By default this is true. When set to false the icon stays the same. Provide the trailing with an arrow down to make the widget look like the default ExpansionTile.

  • noTrailing bool

    When set to true there will be no trailing at all. Even when provided custom trailing this bool will prevent it from being shown.

Example

Screenshot of example app

所属分类

源码仓库

使用此插件的项目

暂无相关数据。