AR삽질러

Flutter 기초 - CheckBox (17) 본문

Dart/Flutter

Flutter 기초 - CheckBox (17)

아랑팡팡 2024. 5. 22. 19:24
728x90

 

Flutter 기초 - CheckBox (17)

 

1. Checkbox

 - 사용자가 설정을 켜거나 끄는 요소로 Boolean (false | true) 로 변경하고 UI에 나타낼 수 있다.

 

2. CheckBox사용방법

 value 

  - 체크박스의 현재 상태를 나타내며 true, false, null 이 될수 있다.

 - null은 체크박스가 선택 가능한 상태를 표시하지만 아직 선택되지 않았을때에는 null로 입력도니다.

 onChanged

  - 체크박스의 값이 변경될때 호출되는 콜백함수로 사용자가 체크박스를 탭했을 경우 함수가 호출되고 체크박스의 새로운 상태가 매개변수로 전달된다. 

 

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

void main() {
  runApp(
    const MaterialApp(home: HomeWidget()),
  );
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const SafeArea(
      child: Scaffold(
        body: Body(),
      ),
    );
  }
}

class Body extends StatefulWidget {
  const Body({super.key});

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

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        TestCheckbox(),
      ],
    );
  }
}

class TestCheckbox extends StatefulWidget {
  const TestCheckbox({super.key});

  @override
  State<TestCheckbox> createState() => _TestCheckboxState();
}

class _TestCheckboxState extends State<TestCheckbox> {
  late List<bool> values;

  @override
  void initState() {
    super.initState();
    values = [false, false, false];
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Checkbox(
            value: values[0],
            onChanged: (value) => changeValue(0, value: value)),
        Checkbox(
            value: values[1],
            onChanged: (value) => changeValue(1, value: value)),
        Checkbox(
            value: values[2],
            onChanged: (value) => changeValue(2, value: value)),
      ],
    );
  }

  void changeValue(int index, {bool? value}) {
    setState(() {
      values[index] = value!;
    });
  }
}

class TestRaioButton extends StatefulWidget {
  const TestRaioButton({super.key});

  @override
  State<TestRaioButton> createState() => _TestRaioButtonState();
}

class _TestRaioButtonState extends State<TestRaioButton> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

 

HomeWidget

 - Flutter App의 루트 위젯역할로 HomteWidget내부에는 SafeArea, Scaffold로 구성된 레이아웃이 포함되어 있다.

 SafeArea

  - 화면의 상 하단에 안전하지 않은 영역에 콘텐츠가 침범하는것을 방지하여 사용자의 디바이스에서 안전한 영역 내에서 랜더링 되도록 보장한다.

 Scaffold

  - Material Design의 사각적 레이아웃 구조를 제공하는 위젯으로 앱의 기본적인 시각 구성 요소를 포함할 수 있따.

 

Body

 - Body에서 SatefulWidget(변경 가능한 상태)를 가질수 있는 위젯으로 정의되어 상태를 가지는 위젯은 사용자의 인터렉션에 따라 상태가 변경되고 UI가 업데이트 될 수 있다.

 

_BodyState

 - Column은 자식 위젯들을 수직으로 배열한다.

 

TextCheckbox

 - TestCheckbox는 StatefulWidge(변경 가능한 상태)를 사용해 사용자가 체크박스의 상태를 변경할 수 있는 위젯이다.

 

_TestCheckboxState

 - List<bool> values : 각 체크박스의 선택 상태를 저장하는 boolean 리스트로 초기값은 false이다.

 - Checkbox : 세 개의 체크박스를 표시하고 각 체크박스는 values리스트의 해당 인덱스에 저장된 값을 사용해 현재 상태를 표시한다.

 - onChanged : 체크박스를 탭할 때 호출되는 콜백함수로 changeValue를 호출해 체크박스의 값을 변경하고 setState를 통해서 UI를 업데이트 한다.

 

 

 

728x90
반응형
LIST
저작자표시 비영리 변경금지

'Dart > Flutter' 카테고리의 다른 글

Flutter 기초 - Slider (19)  (0) 2024.05.22
Flutter 기초 - RadioButton (18)  (0) 2024.05.22
Flutter 기초 - Stateful, Stateless (16)  (0) 2024.05.19
Flutter 기초 - Widget Stack (15)  (0) 2024.05.19
Flutter 기초 - Widget 비율 (14)  (0) 2024.05.19
'Dart/Flutter' Related Articles more