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

selectable_container 封面
插件详情v1.0.7

selectable_container

适用于 Flutter 的可选择容器。当点击时,容器的一个角落会显示一个图标。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
142
喜欢数
53
Pub 分数
150

安装插件

flutter pub add selectable_container

插件介绍

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

一个 Flutter 包,提供了一个可选择的容器小部件,当点击时,角落会出现一个视觉指示器(图标)。它通过提供即时反馈来增强用户交互,非常适合用于筛选、标签或选项等基于选择的 UI。该容器支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台。它轻量且易于集成,专注于简洁性和视觉清晰度。

适合场景

  • 筛选选择界面
  • 基于标签的导航
  • 交互式表单元素
  • 用户偏好选择器
  • 多选芯片
  • 自定义切换按钮

主要特点

  • 点击时的角标图标
  • 跨平台兼容性
  • 简单集成
  • 选择时的视觉反馈
  • 可自定义外观
  • 轻量级设计

适合对象

  • 开发交互式 UI 的开发者
  • 寻求视觉反馈的设计人员
  • 以选择为主的流程的应用程序
  • 极简界面组件
  • Flutter 初学者学习状态管理

使用建议

  • 仅限角点指示器
  • 无内置动画自定义
  • 需要手动处理选择状态
  • 不适合复杂的多状态交互
  • 依赖外部状态管理进行组选择

原始 README

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

selectable_container

A Selectable Container for Flutter. Easy to implement and customize.

Demo

Demo:

Usage

To use plugin, just import package import 'package:selectable_container/selectable_container.dart';

Example

Check de example directory to access the project that implements the image shown above.

    import 'package:flutter/material.dart';
    import 'package:selectable_container/selectable_container.dart';

    class SimpleExamplePage extends StatefulWidget {
      @override
      _SimpleExamplePageState createState() => _SimpleExamplePageState();
    }

    class _SimpleExamplePageState extends State<SimpleExamplePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Selectable Container'),
          ),
          body: Column(
            children: <Widget>[
              Text(
                'Default container',
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
              ),
              SelectableContainer(
                selected: _selected
                onValueChanged: (newValue) {
                   setState(() {
                    _selected = newValue;
                  });
                },
                child: Text('Tap me'),
                padding: 16.0,
              ),
            ],
          ),
        );
      }
    }

所属分类

源码仓库

使用此插件的项目

暂无相关数据。