搜尋套件、儲存庫與 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,
              ),
            ],
          ),
        );
      }
    }

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。