FlutterChips_choice

[flutter] chips_choice 사용하기

, ,

설치

1
flutter pub add chips_choice

Map 데이터 생성

1
2
3
4
5
6
7
8
9
final categoryList = <Map<String, String>>[
  {'value': 'mon', 'title': '냉장/냉동'},
  {'value': 'tue', 'title': '간식'},
  {'value': 'wed', 'title': '음료'},
  {'value': 'thu', 'title': '축산물'},
  {'value': 'fri', 'title': '해산물'},
  {'value': 'sat', 'title': '신선식품'},
  {'value': 'sun', 'title': '가공식품'},
];

single 만들기

1
2
3
4
5
6
7
8
9
ChipsChoice<String>.single(
  value: 'mon',
  onChanged: (value) {},
  choiceItems: C2Choice.listFrom<String, Map<String, String>>(
    source: categoryList,
    value: (index, item) => item['value']!,
    label: (index, item) => item['title']!,
  ),
),

wrapped: true 설정

1
2
3
4
5
6
7
8
9
10
ChipsChoice<String>.single(
  wrapped: true,
  value: 'mon',
  onChanged: (value) {},
  choiceItems: C2Choice.listFrom<String, Map<String, String>>(
    source: categoryList,
    value: (index, item) => item['value']!,
    label: (index, item) => item['title']!,
  ),
),

style 변경 ➡️ choiceStyle: C2ChipStyle.filled()

1
2
3
4
5
6
7
8
9
10
11
ChipsChoice<String>.single(
  wrapped: true,
  value: 'mon',
  onChanged: (value) {},
  choiceStyle: C2ChipStyle.filled(),
  choiceItems: C2Choice.listFrom<String, Map<String, String>>(
    source: categoryList,
    value: (index, item) => item['value']!,
    label: (index, item) => item['title']!,
  ),
),

style 변경 ➡️ choiceStyle: C2ChipStyle.outlined()

1
2
3
4
5
6
7
8
9
10
11
ChipsChoice<String>.single(
  wrapped: true,
  value: 'mon',
  onChanged: (value) {},
  choiceStyle: C2ChipStyle.outlined(),
  choiceItems: C2Choice.listFrom<String, Map<String, String>>(
    source: categoryList,
    value: (index, item) => item['value']!,
    label: (index, item) => item['title']!,
  ),
),

선택 항목만, filled 적용

1
2
3
4
5
6
7
8
9
10
11
12
13
ChipsChoice<String>.single(
  wrapped: true,
  value: 'mon',
  onChanged: (value) {},
  choiceStyle: C2ChipStyle.outlined(
    selectedStyle: C2ChipStyle.filled()
  ),
  choiceItems: C2Choice.listFrom<String, Map<String, String>>(
    source: categoryList,
    value: (index, item) => item['value']!,
    label: (index, item) => item['title']!,
  ),
),

Generics 로 만들기

1
2
3
4
class Choice {
  String id = '';
  String name = '';
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
class ChoiceSingle<T extends Choice> extends ConsumerWidget {
  const ChoiceSingle({
    super.key,
    required this.label,
    required this.value,
    required this.data,
    required this.onChanged,
  });
  final String label;
  final T? value;
  final List<T> data;
  final void Function(T) onChanged;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label),
        if (data.isEmpty)
          const Center(child: LoadingSmall())
        else
          Center(
            child: ChipsChoice<T>.single(
              wrapped: true,
              value: value,
              onChanged: onChanged,
              choiceCheckmark: true,
              choiceStyle: C2ChipStyle.outlined(
                color: Colors.grey,
                selectedStyle: C2ChipStyle.filled(
                  color: Theme.of(context).primaryColor,
                  foregroundColor: Colors.white,
                  borderRadius: const BorderRadius.all(
                    Radius.circular(25),
                  ),
                ),
              ),
              choiceItems: C2Choice.listFrom<T, T>(
                source: data,
                value: (index, item) => item,
                label: (index, item) => item.name,
              ),
            ),
          ),
      ],
    );
  }
}

공유하기