flutter_grid_button

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

カスタマイズ可能なグリッドレイアウトにボタンを配置するFlutterウィジェットです。数字パッドや電卓、または任意のグリッドベースのボタンシステムを作成するのに最適です。複数のプラットフォームでレスポンシブかつ視覚的に一貫したボタングリッドの作成を簡素化します。スペース、配置、ボタンスタイルのさまざまな設定をサポートしており、異なるUIニーズに対応できる柔軟性を持っています。シンプルさと再利用性を意識して設計されており、既存のFlutterプロジェクトにスムーズに統合できます。

用途

電卓インターフェースの作成
数値入力パッドの設計
ゲームコントロールパネルの構築
グループ化されたアクションを使用したフォームレイアウトの開発
キーボードのようなボタン配置の実装

主な機能

グリッドベースのボタン配置
カスタマイズ可能な余白と配置
複数プラットフォームにわたるレスポンシブデザイン
Flutter との簡単な統合
プラットフォーム固有のレンダリング対応

適している対象

電卓アプリを開発している開発者
グリッドボタンレイアウトが必要なUIデザイナー
一貫したボタングリッドを必要とするプロジェクト
クロスプラットフォームのモバイルおよびWebアプリケーション
数値またはアクションベースの入力システムを備えたアプリ

注意事項

ボタングリッドの利用ケースに限定
ボタンタップロジックの手動処理が必要
複雑なアニメーションの組み込みサポートなし
静的またはシンプルなインタラクティブなグリッドに最適
高度なビジュアル効果を実現するには、追加のスタイリングが必要になる場合があります

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Flutter widget that arrange buttons in a grid. It is useful for making a number pad, calculator, and so on.

Getting Started

To use this plugin, add flutter_grid_button as a dependency in your pubspec.yaml file.

dependencies:
 flutter_grid_button:

Import the library in your file.

import 'package:flutter_grid_button/flutter_grid_button.dart';

See the example directory for a complete sample app using GridButton. Or use the GridButton like below.

GridButton(
  onPressed: (String value) {
    /*...*/
  },
  items: [
    [
      GridButtonItem(title: "1"),
      GridButtonItem(child: Text("2")),
      GridButtonItem(title: "3", flex: 2),
    ],
    [
      GridButtonItem(title: "a", value: "100", longPressValue: "long"),
      GridButtonItem(title: "b", color: Colors.lightBlue)
    ],
  ],
)

パッケージ、リポジトリ、アプリカテゴリを検索