[Flutter] 32. 플러터의 기본 위젯들

[Flutter] 32. 플러터의 기본 위젯들

 

시나리오 코드

 

(1) 체크 박스

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp7> createState() => _MyApp7State();
  }
  
  class _MyApp7State extends State<MyApp7>{

  // bool 데이터 타입과 bool? 데이터 타입은 다르다.
  // 옵셔녈 변수(?) = null을 허용한다.
  bool? _checkBoxValue = false;
  String? _radioValue = 'Option 1';
  
  @override
    Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyApp7'),
        ),
        body: Container(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Center(
                child: Text('$_checkBoxValue'),
              ),
              const SizedBox(height: 16.0,),
              Checkbox(value: false, onChanged: (value){})
            ],
          )
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp7> createState() => _MyApp7State();
  }
  
  class _MyApp7State extends State<MyApp7>{

  // bool 데이터 타입과 bool? 데이터 타입은 다르다.
  // 옵셔녈 변수(?) = null을 허용한다.
  bool? _checkBoxValue = true;
  String? _radioValue = 'Option 1';
  
  @override
    Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyApp7'),
        ),
        body: Container(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              Center(
                child: Text('$_checkBoxValue'),
              ),
              const SizedBox(height: 16.0,),
              Checkbox(value: _checkBoxValue, onChanged: (value){
                print("value : $value");
                setState(() {
                  _checkBoxValue = value;
                });
              })
            ],
          )
        ),
      ),
    );
  }
}

 

 

(2) 라디오 버튼

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp7> createState() => _MyApp7State();
}

class _MyApp7State extends State<MyApp7> {
  // bool 데이터 타입과 bool? 데이터 타입은 다르다.
  // 옵셔녈 변수(?) = null을 허용한다.
  bool? _checkBoxValue = true;
  String? _radioValue = 'Option 1';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyApp7'),
        ),
        body: Container(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                Center(
                  child: Text('$_checkBoxValue'),
                ),
                const SizedBox(
                  height: 16.0,
                ),
                Checkbox(
                    value: _checkBoxValue,
                    onChanged: (value) {
                      print("value : $value");
                      setState(() {
                        _checkBoxValue = value;
                      });
                    }),
                // static 변수처럼 상수 재활용
                const SizedBox(
                  height: 16,
                ),
                Text('Radio Button'),
                Row(
                  children: [
                    Radio(
                      value: '축구',
                      groupValue: _radioValue,
                      onChanged: (value) {
                        setState(() {
                          print("value : $value");
                          _radioValue = value.toString();
                        });
                      },
                    ),
                    Text('축구'),
                    Radio(
                      value: '농구',
                      groupValue: _radioValue,
                      onChanged: (value) {
                        setState(() {
                          print("value : $value");
                          _radioValue = value.toString();
                        });
                      },
                    ),
                    Text('농구'),

                  ],
                )
              ],
            )),
      ),
    );
  }
}

 

 

(3) 슬라이더와 스위치

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp7> createState() => _MyApp7State();
}

class _MyApp7State extends State<MyApp7> {
  // bool 데이터 타입과 bool? 데이터 타입은 다르다.
  // 옵셔녈 변수(?) = null을 허용한다.
  bool? _checkBoxValue = true;
  String? _radioValue = 'Option 1';
  double _sliderValue = 0.0;
  bool _switchValue = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MyApp7'),
        ),
        body: Container(
          padding: const EdgeInsets.all(16.0),
          child: Column(
              children: [
          Center(
          child: Text('$_checkBoxValue'),
        ),
        const SizedBox(
          height: 16.0,
        ),
        Checkbox(
            value: _checkBoxValue,
            onChanged: (value) {
              print("value : $value");
              setState(() {
                _checkBoxValue = value;
              });
            }),
        // static 변수처럼 상수 재활용
        const SizedBox(
          height: 16,
        ),
        Text('Radio Button'),
        Row(
          children: [
          Radio(
          value: '축구',
          groupValue: _radioValue,
          onChanged: (value) {
            setState(() {
              print("value : $value");
              _radioValue = value.toString();
            });
          },
        ),
        Text('축구'),

        // 1. 슬라이더 위젯 넣기
        Slider(
          value: _sliderValue,

          min: 0,
          max: 100,
          onChanged: (value) {
            setState(() {
              _sliderValue = value;
              print('_sliderValue : $_sliderValue');
            });
          },
        ),

        // 2. 스위치 위젯 넣기
        Switch(
          value: _switchValue,
          onChanged: (value) {
            setState(() {
              _switchValue = value;
              print("_switchValue : $_switchValue");
            });
          },
        )
        ],
      )
      ],
    )),
    )
    ,
    );
  }
}