Flutter
[Flutter] 32. 플러터의 기본 위젯들
Song hyun
2024. 11. 7. 12:19
728x90
반응형
[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");
});
},
)
],
)
],
)),
)
,
);
}
}
728x90
반응형