搜尋套件、儲存庫與 APP 分類

ducafecatFlutter 生態導航
sleek_button 封面
套件詳情v0.2.0

sleek_button

一個簡單但可自定義的按鈕。

pub.dev API 文件 原始碼
近 30 天下載
13
喜歡數
19
Pub 分數
40

安裝套件

flutter pub add sleek_button

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

Sleek Button 是一個輕量級、可自訂的 Flutter 小部件，專為以最少努力創造優雅現代的按鈕而設計。它提供乾淨的 API，用於透過各種效果（包括動畫、漸層和陰影）來設定按鈕樣式。非常適合尋求簡單但視覺上吸引人的按鈕元件，且無需沉重依賴的開發者。該套件支援對大小、顏色、形狀和波紋效果進行自訂，適用於基本與進階的 UI 需求。可順暢整合至任何 Flutter 專案中。

適用情境

  • 在移動應用中創建樣式按鈕
  • 添加動畫按鈕效果
  • 使用吸引人的輸入控制元件建構表單
  • 設計互動式UI元素
  • 實現自定義按鈕主題
  • 提升使用者介面美學

主要特色

  • 高度可自訂的外觀
  • 內建動畫與波紋效果
  • 支援漸層與陰影
  • 簡單直覺的 API
  • 輕量且快速的效能
  • 與現有 Flutter 項目輕鬆整合

適合對象

  • Flutter 初學者尋找容易使用的組件
  • 想要快速按鈕樣式的開發人員
  • 需要精緻使用者介面元件的專案
  • 專注於視覺吸引力和互動性的應用
  • 致力於在各個螢幕上實現一致的按鈕設計

使用建議

  • 僅限按鈕特定功能
  • 不支援載入或停用等複雜狀態的內建支援
  • 可能需要額外的程式碼以實現進階互動
  • 不太適合高度動態或資料驅動的按鈕邏輯

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

A simple but yet customizable button.

Install

Add the dependency to your pubspec.yaml :

dependencies:
    sleek_button: <version>

Quick start

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: SleekButtonStyle.flat(
        color: swatch.primary,
        inverted: true,
        rounded: true,
        size: SleekButtonSize.big,
        context: context,
    ),
    child: const Icon(Icons.format_bold),
)

Usage

Widget
SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: const Text('Save'),,
)

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
            const Icon(Icons.check),
            const SizedBox(width: 6),
            const Text('Save'),
        ],
    ),
)

If the direct child is an Icon, the button will be a square.

SleekButton(
    onTap: () {
        print('tapped!');
    },
    style: <style>
    child: const Icon(Icons.check),
)
Styles
Flat
SleekButtonStyle.flat(
    context: context,
)

SleekButtonStyle.flat(
    size: SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.flat(
    inverted: true,
    context: context,
)

SleekButtonStyle.flat(
    rounded: true,
    context: context,
)

SleekButtonStyle.flat(
    size: SleekButtonSize.medium,
    rounded: true,
    context: context,
)
Outlined
SleekButtonStyle.outlined(
    context: context,
)

SleekButtonStyle.outlined(
    size: SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.outlined(
    inverted: true,
    context: context,
)

SleekButtonStyle.outlined(
    rounded: true,
    context: context,
)

SleekButtonStyle.outlined(
    size: SleekButtonSize.medium,
    rounded: true,
    context: context,
)
Light
SleekButtonStyle.light(
    context: context,
)

SleekButtonStyle.light(
    size = SleekButtonSize.small,
    context: context,
)

SleekButtonStyle.light(
    rounded = true,
    context: context,
)

SleekButtonStyle.light(
    size: SleekButtonSize.medium,
    rounded = true,
    context: context,
)
Colors

If you give a color, all variants (dark, light, invert) will be calculated with the help of the derived_colors package.

SleekButtonStyle.flat(
    color: const Color(0xFF)
    context: context,
)

 SleekButtonStyle.light(
    color: const Color(0xFFFFC369),
    context: context,
)

SleekButtonStyle.outlined(
    color: const Color(0xFF323232),
    context: context,
)
Theme

You can customize the default appearance of the button by adding a SleekButtonTheme in the tree. If a Theme is in the tree, it will use it tu deduce a default theme.

SleekButtonTheme(
    data: const SleekButtonThemeData(
        padding: 24,
        textStyle: TextStyle(fontSize: 11),
        cornerRadius: 8.0,
        iconTheme: IconThemeData(size: 10),
        fill: Color(0xFFFF0000),
        borderWidth: 2,
    ),
    child: app,
)

Thanks

Thanks to the bulma framework team for the inspiration.

所屬分類

按鈕 & 進度按鈕

依賴

依賴清單 3 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。