[ Flutter ] 안드로이드 Flutter CheckBox 사용법

👼🏻 초보 안드로이드 개발자가 매번 구글링하기 싫어서 정리하는 블로그 👼🏻 

 

안녕하세요! 🙋🏻‍♀️

Android Studio (JAVA) 가 아닌,

Flutter (Dart) 로 만든 CheckBox 간단 사용법을 적어보자 합니다 ☺️

 

 

( 이 예제는 안드로이드 버전으로...한걸...... 재.... 탕.....🤫 )

2021.12.21 - [Android ( JAVA )/개발] - [Android] CheckBox 간단 사용법

[Android] CheckBox 간단 사용법

 

 

1️⃣ 기본 셋팅

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "CheckBox",
      home: MyCheckBox(),
    );
  }
}

class MyCheckBox extends StatefulWidget {
  const MyCheckBox({Key? key}) : super(key: key);

  @override
  _MyCheckBoxState createState() => _MyCheckBoxState();
}

class _MyCheckBoxState extends State<MyCheckBox> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

 

앱이 실행되기 위한 제일 기초적인 위젯들을 선언해줍니다.

반응형

2️⃣ View 그려주기

class MyCheckBox extends StatefulWidget {
  const MyCheckBox({Key? key}) : super(key: key);

  @override
  _MyCheckBoxState createState() => _MyCheckBoxState();
}

class _MyCheckBoxState extends State<MyCheckBox> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBox"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.all(30.0),
              child: Text(
                "색상 선택",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 35.0),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Checkbox(
                    value: _isCheckRed,
                    onChanged: (value) {
                      setState(() {
                        _isCheckRed = value!;
                      });
                    },
                  ),
                  Text("RED")
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Checkbox(
                    value: _isCheckOrange,
                    onChanged: (value) {
                      setState(() {
                        _isCheckOrange = value!;
                      });
                    },
                  ),
                  Text("ORNAGE")
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Checkbox(
                    value: _isCheckGreen,
                    onChanged: (value) {
                      setState(() {
                        _isCheckGreen = value!;
                      });
                    },
                  ),
                  Text("GREEN")
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Checkbox(
                    value: _isCheckBlue,
                    onChanged: (value) {
                      setState(() {
                        _isCheckBlue = value!;
                      });
                    },
                  ),
                  Text("BLUE")
                ],
              ),
            ),
            SizedBox(
              height: 20,
            )
          ],
        ),
      ),
    );
  }
}

플루터는 안드로이드와는 다르게 View 를 그려주면서 기능까지 함께 제어해줘야하는 부분들이 있어욥!

그렇기에 위 코드를 고대~~~로 복사를 하시면 분명이 에러가 생길거에요!

 

3️⃣ 기능

bool _isCheckRed = false;
bool _isCheckOrange = false;
bool _isCheckGreen = false;
bool _isCheckBlue = false;

List<String> checkList = [];

이 변수 및 리스트를 선언을 해줍니다! 
어디에?

class MyCheckBox extends StatefulWidget {
  const MyCheckBox({Key? key}) : super(key: key);

  @override
  _MyCheckBoxState createState() => _MyCheckBoxState();
}

class _MyCheckBoxState extends State<MyCheckBox> {

  bool _isCheckRed = false;
  bool _isCheckOrange = false;
  bool _isCheckGreen = false;
  bool _isCheckBlue = false;

  List<String> checkList = [];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
    ....
  );
}

전역변수로 제일 위 상단에 선언 해줍니다 🤗

SMALL

그럼 hot reload 하게 되면 아마 이미지와 똑같게 선언이 될테지만,

Toast는 나오지 않을거에요

Toast를 사용하기 위해서는 라이브러리를 추가해줘야합니다.
⏬ 라이브러리 추가하는 방법 ⏬

2022.03.10 - [Flutter/개발] - [Flutter ] Flutter 라이브러리 추가 ( feat.pubspec.yaml)

[Flutter ] Flutter 라이브러리 추가 ( feat.pubspec.yaml)

 

4️⃣ 추가 기능

void checkedList(bool isCheck, String name) {
    if (isCheck) {
      checkList.add(name);
      Fluttertoast.showToast(
          msg: "$checkList 선택",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM);
    } else {
      Fluttertoast.showToast(
          msg: "$name 선택 해제",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM
      );
      checkList.remove(name);
    }
  }

 

"checkedList" 메소드를 각 checkbox 에 추가해주면 이벤트가 발생 시 toast를 띄우줄거에요!!!

 

🌈 전체 코드

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Check Box",
      debugShowCheckedModeBanner: false,
      home: CheckBoxs(),
    );
  }
}

class CheckBoxs extends StatefulWidget {
  const CheckBoxs({Key? key}) : super(key: key);

  @override
  _CheckBoxsState createState() => _CheckBoxsState();
}

class _CheckBoxsState extends State<CheckBoxs> {
  bool _isCheckRed = false;
  bool _isCheckOrange = false;
  bool _isCheckGreen = false;
  bool _isCheckBlue = false;

  List<String> checkList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBox"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.all(30.0),
              child: Text(
                "색상 선택",
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 35.0),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Checkbox(
                    value: _isCheckRed,
                    onChanged: (value) {
                      setState(() {
                        _isCheckRed = value!;
                        checkedList(_isCheckRed, "RED");
                      });
                    },
                  ),
                  Text("RED")
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Checkbox(
                    value: _isCheckOrange,
                    onChanged: (value) {
                      setState(() {
                        _isCheckOrange = value!;
                        checkedList(_isCheckOrange, "ORANGE");
                      });
                    },
                  ),
                  Text("ORNAGE")
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Checkbox(
                    value: _isCheckGreen,
                    onChanged: (value) {
                      setState(() {
                        _isCheckGreen = value!;
                        checkedList(_isCheckGreen, "GREEN");
                      });
                    },
                  ),
                  Text("GREEN")
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15),
              child: Row(
                children: [
                  Checkbox(
                    value: _isCheckBlue,
                    onChanged: (value) {
                      setState(() {
                        _isCheckBlue = value!;
                        checkedList(_isCheckBlue, "BLUE");
                      });
                    },
                  ),
                  Text("BLUE")
                ],
              ),
            ),
            SizedBox(
              height: 20,
            )
          ],
        ),
      ),
    );
  }

  void checkedList(bool isCheck, String name) {
    if (isCheck) {
      checkList.add(name);
      print(checkList);
      Fluttertoast.showToast(
          msg: "$checkList 선택",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM);
    } else {
      Fluttertoast.showToast(
          msg: "$name 선택 해제",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM
      );
      checkList.remove(name);
      print(checkList);
    }
  }
}

 

 

 

틀린부분이 있거나, 궁금하신게 있거나, 그냥 아무말이나 하고싶으면 댓글 남겨주세요 🥴

봐주셔서 감사합니다 🥰