Flutter GroupButton 5.0.0 릴리스 정보

모두들 안녕!

많은 사람들이 내 group_button 패키지에 대해 읽었습니다.
그리고 5.0.0 버전으로의 대규모 패키지 업데이트에 대해 말씀드리려고 합니다.

업데이트의 주요 기능 - 제네릭으로 이동

변경 로그:

🔥 주요 기능: 이제 GroupButton이 일반 클래스입니다. 이제 기본 GroupButton 생성자에 대한 int, DateTime, double 또는 YourCustomClass 유형 버튼 목록을 만들 수 있습니다. 기타 here

❗️ 속보: 4.3.0 및 4.6.0에서 더 이상 사용되지 않는 모든 필드가 패키지에서 제거되었습니다. 기타 here

❗️ 속보: 4.6.0의 buttonBuilder가 이제 값으로 버튼을 빌드합니다. buttonIndexedBuilder가 buttonBuilder의 이전 기능을 인수했습니다

.

⬆️ FEAT: 이제 값 인수를 사용하여 onSelected 메서드를 호출합니다. 추가 정보here

🎀 정보: 업데이트된 예제 및 README

그게 무슨 뜻이야?

새로운 5.0.0 버전에서는 사용자 정의 버튼 값 유형을 설정할 수 있습니다.
int, DateTime, double 또는 YourCustomClass일 수 있습니다.
버튼 텍스트는 일반적인 버튼 디스플레이 케이스에서 .toString() 모델 메서드의 결과입니다.

GroupButton<DateTime>(
  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
)

또한 사용자 정의 buttonBuilder와 함께 일반 버튼 값을 사용할 수 있습니다.
값을 위젯으로 바꾸려면

GroupButton<DateTime>(
  buttons: [DateTime(2022, 4, 9), DateTime(2022, 4, 10)],
  buttonBuilder: (selected, date, context) {
    return Text('${date.year}-${date.month}-${date.day}');
  },
),

커스터마이징

GroupButton 내에서 버튼을 사용자 지정하려면 GroupButtonOptions를 사용할 수 있습니다.

GroupButtonOptions(
  selectedShadow: const [],
  selectedTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.pink[900],
  ),
  selectedColor: Colors.pink[100],
  unselectedShadow: const [],
  unselectedColor: Colors.amber[100],
  unselectedTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.amber[900],
  ),
  selectedBorderColor: Colors.pink[900],
  unselectedBorderColor: Colors.amber[900],
  borderRadius: BorderRadius.circular(100),
  spacing: 10,
  runSpacing: 10,
  groupingType: GroupingType.wrap,
  direction: Axis.horizontal,
  buttonHeight: 60,
  buttonWidth: 60,
  mainGroupAlignment: MainGroupAlignment.start,
  crossGroupAlignment: CrossGroupAlignment.start,
  groupRunAlignment: GroupRunAlignment.start,
  textAlign: TextAlign.center,
  textPadding: EdgeInsets.zero,
  alignment: Alignment.center,
  elevation: 0,
),

GroupButtonValueBuilder 버튼 빌더

생성할 커스텀 빌더 방법
버튼 [T] 값으로 나만의 맞춤 버튼

final buttons = ['10:00', '11:00', '12:00'];

GroupButton(
  buttons: buttons,
  buttonBuilder: (selected, val, context) {
    return Text('$val is selected: $selected');
  },
),

그리고 이 예는 다음과 같습니다 ->

GroupButtonIndexedBuilder 버튼인덱스 빌더

생성할 커스텀 빌더 방법
버튼 [int] 인덱스로 나만의 맞춤 버튼

final buttons = ['10:00', '11:00', '12:00'];

GroupButton(
  buttons: buttons,
  buttonIndexedBuilder: (selected, index, context) {
    return Text('${buttons[index]} selected: $selected');
  },
),

지원 중단 및 리팩터링 기반 제거

그리고 마지막 멋진 변화는 패키지 API 업데이트입니다.
이제 1개의 코드 라인으로 버튼 그룹을 만들 수 있습니다😳:

GroupButton(buttons: ['10:00', '11:00', '12:00', '13:00']),

GroupButton(buttons: [10.5, 11, 11.5, 12, 12.5]),

GroupButton(buttons: [35, 36, 37, 38, 39]),

GroupButton(buttons: [false, true]),

이 작은 게시물을 읽어 주셔서 감사합니다 🙏!

GitHub에서 나와 연결하고 this package에 ✨별✨을 넣어주세요.