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

flutter_grid_button 封面
插件详情v2.3.1

flutter_grid_button

一个将按钮排列成网格的 Flutter 小部件。它适用于制作数字键盘、计算器等。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
3870
喜欢数
30
Pub 分数
160

安装插件

flutter pub add flutter_grid_button

插件介绍

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

一个 Flutter 小部件,可将按钮排列成可自定义的网格布局。非常适合创建数字键盘、计算器或任何基于网格的按钮系统。它简化了在多个平台上创建响应式且视觉一致的按钮网格的过程。该包支持多种间距、对齐和按钮样式的配置,使其能够灵活满足不同的 UI 需求。设计时注重简洁性和可重用性,可无缝集成到现有的 Flutter 项目中。

适合场景

  • 创建计算器界面
  • 设计数字输入垫
  • 构建游戏控制面板
  • 使用分组操作开发表单布局
  • 实现类似键盘的按钮布局

主要特点

  • 基于网格的按钮布局
  • 可自定义的间距和对齐方式
  • 跨平台的响应式设计
  • 与 Flutter 的轻松集成
  • 对平台特定渲染的支持

适合对象

  • 开发计算器应用的开发者
  • 需要网格按钮布局的UI设计师
  • 需要一致按钮网格的项目
  • 跨平台移动和Web应用
  • 具有数字或基于操作的输入系统的应用

使用建议

  • 仅限按钮网格使用场景
  • 需要手动处理按钮点击逻辑
  • 无内置的复杂动画支持
  • 最适合静态或简单交互的网格
  • 可能需要额外的样式才能实现高级视觉效果

原始 README

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

flutter_grid_button

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

pub package

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)
    ],
  ],
)

所属分类

源码仓库

使用此插件的项目