Flutter selectCheckbox

아래의 오른쪽 처럼 선택할 수 있는 체크 박스가 필요하다.

공식문서의 checkbox를 사용할 수 있지만 그래도 pub.dev에 좋은 라이브러리를 발견해서 그것을 적용 해보고 싶었다.

사용해볼 라이브러리

https://pub.dev/packages/multi_select_flutter

들어가 보면 알겠지만 여러가지 체크 박스의 종류가 있다. 

그중에서 필요한 것은 Dialog 방식의 체크 박스여서 이것을 사용해볼 것이다 .

1. pubspec.yaml에 의존성 추가 

multi_select_flutter: ^4.1.3

2.Example에 코드를 복사해 내 코드에 먼저 가져와 실행 시켜본다.

그대로 가져오면 아래 처럼 에러가 나는데 타입이 dynamic타입이 아니라서 그렇다고한다..

type '(List<Career>) => Null' is not a subtype of type '((List<Career?>) => dynamic)?'

리스트의 타입을 모두 dynamic로 바꿔주면된다.

MultiSelectChipField(
                items: _items,
                initialValue: [
                  _career[0],
                  _career[3],
                  _career[2]
                ], // 기본 설정 값(선택하지 않아도 자동으로 선택 되어있음.)
                title: Text("Animals"),
                headerColor: Colors.blue.withOpacity(0.5),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blue, width: 1.8),
                ),
                selectedChipColor: Colors.blue.withOpacity(0.5),
                selectedTextStyle: TextStyle(color: Colors.blue[800]),
                onTap: (values) {
                  print(_selectedAnimals5);
                  // 선택된 아이템들을 리스트에 담아줌.
                  _selectedAnimals5 = values;
                  print(_selectedAnimals5);
                },
              )

잘 실행이 된다

\

값이 있는지 확인을 해보았다,Career라는 클래스에 생성자를 이용해서 값을 입력 받기 때문에 아래 처럼 데이터가 나온다.

 

전체 실행화면

 

전체코드

import 'package:flutter/material.dart';
import 'package:multi_select_flutter/multi_select_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'SelectBox Test',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'SelectBox Test'),
    );
  }
}

class Category {
  final int id;
  final String name;

  Category({
    required this.id,
    required this.name,
  });
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({required this.title, Key? key}) : super(key: key);

  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static List<dynamic> _category = [
    // 리스트
    Category(id: 1, name: "뷰티"),
    Category(id: 2, name: "운동"),
    Category(id: 3, name: "취미"),
    Category(id: 4, name: "댄스"),
    Category(id: 5, name: "뮤직"),
  ];
  final _items = _category
      .map((category) => MultiSelectItem<Category>(category, category.name))
      .toList(); // 선택 가능한 항목을 보여줌 -> 리스트를 깊은 복사

  List<dynamic> _selectCategory = []; // 담을 공간
  final _multiSelectKey = GlobalKey<FormFieldState>();

  @override
  void initState() {
    // 선택된 아이템을 리스트에 담아줌
    _selectCategory = _category;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(20),
          child: Column(
            children: <Widget>[
              SizedBox(height: 40),
              MultiSelectDialogField(
                // 1번째 체크박스
                items: _items,
                title: Text("Category"),
                selectedColor: Colors.blue,
                decoration: BoxDecoration(
                  color: Colors.blue.withOpacity(0.1),
                  borderRadius: BorderRadius.all(Radius.circular(40)),
                  border: Border.all(
                    color: Colors.blue,
                    width: 2,
                  ),
                ),
                buttonIcon: Icon(
                  Icons.pets,
                  color: Colors.blue,
                ),
                buttonText: Text(
                  "Favorite Category",
                  style: TextStyle(
                    color: Colors.blue[800],
                    fontSize: 16,
                  ),
                ),
                onConfirm: (results) {
                  _selectCategory = results;
                },
              ),
              SizedBox(height: 50),
              MultiSelectChipField(
                // 두번째 selectbox , 가로로 스크롤 하면서 선택 가능
                items: _items,
                initialValue: [], // 기본 설정 값(선택하지 않아도 자동으로 선택 되어있음.)
                title: Text("Category"),
                headerColor: Colors.blue.withOpacity(0.5),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blue, width: 1.8),
                ),
                selectedChipColor: Colors.blue.withOpacity(0.5),
                selectedTextStyle: TextStyle(color: Colors.blue[800]),
                onTap: (values) {
                  // 선택된 아이템들을 리스트에 담아줌.
                  _selectCategory = values;
                },
              ),
              SizedBox(height: 40),
              MultiSelectDialogField(
                // 3번째 selectbox, 아래에 체크된 값을 미리 보여줌.
                onConfirm: (val) {
                  _selectCategory = val;
                },
                dialogWidth: MediaQuery.of(context).size.width * 0.7,
                items: _items,
                initialValue: _selectCategory, // 선택된 값을 필드 아래에 미리 보여줌.
              ),
            ],
          ),
        ),
      ),
    );
  }
}