flutter_grid_button

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

사용자 정의 가능한 그리드 레이아웃으로 버튼을 배열하는 플러터 위젯입니다. 숫자 패드, 계산기 또는 어떤 그리드 기반의 버튼 시스템도 쉽게 만들 수 있습니다. 다양한 플랫폼에서 반응형이고 시각적으로 일관된 버튼 그리드를 만드는 것을 간소화합니다. 간격, 정렬 및 버튼 스타일링에 대한 다양한 구성 옵션을 지원하여 다양한 UI 요구 사항에 유연하게 대응할 수 있습니다. 단순성과 재사용성을 고려해 설계되었으며, 기존 플러터 프로젝트에 원활하게 통합됩니다.

사용 사례

계산기 인터페이스 만들기
숫자 입력 패드 설계
게임 제어 패널 구축
그룹화된 작업을 사용한 폼 레이아웃 개발
키보드와 유사한 버튼 배열 구현

주요 기능

그리드 기반의 버튼 배열
사용자 정의 가능한 간격 및 정렬
다중 플랫폼에 걸친 반응형 디자인
Flutter와의 간편한 통합
플랫폼별 렌더링 지원

적합한 대상

계산기 앱을 개발하는 개발자
그리드 버튼 레이아웃이 필요한 UI 디자이너
일관된 버튼 그리드가 필요한 프로젝트
크로스 플랫폼 모바일 및 웹 애플리케이션
숫자 또는 작업 기반 입력 시스템을 갖춘 앱

고려 사항

버튼 그리드 사용 사례에 한정
버튼 탭 로직을 수동으로 처리해야 합니다
복잡한 애니메이션에 대한 내장 지원 없음
정적 또는 간단한 상호작용 그리드에 가장 적합
고급 시각 효과를 위해 추가적인 스타일링이 필요할 수 있습니다

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

패키지, 저장소 및 앱 카테고리 검색