카테고리 없음
10일차 과제4
신승호.
2023. 2. 8. 17:11
3번의 과제를 활용하여 다음의 추가적인 UI를 구성하여 해결하시오.
- 아이콘의 색이 켜졌을 땐 끄고, 꺼져있을 때는 켜는 시스템을 제작함.
- “태양” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
- “달” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
- “별” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
- FAB를 클릭하면 모든 활성화되어있는 아이콘이 비활성화됨.
코드
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MainPage(),
);
}
}
class MainPage extends StatefulWidget {
const MainPage({super.key});
@override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
bool isSunClicked = false;
bool isMoonClicked = false;
bool isStarClicked = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: [
ListTile(
title: Text(
'Sun',
style: TextStyle(color: Colors.black),
),
leading: Icon(
Icons.sunny,
color: isSunClicked ? Colors.red : Colors.grey,
),
trailing: IconButton(
onPressed: () {
setState(() {
isSunClicked = !isSunClicked;
});
},
icon: Icon(
Icons.arrow_right,
color: Colors.grey,
)),
),
ListTile(
title: Text(
'Moon',
style: TextStyle(color: Colors.black),
),
leading: Icon(
Icons.nightlight,
color: isMoonClicked ? Colors.yellow : Colors.grey,
),
trailing: IconButton(
onPressed: () {
setState(() {
isMoonClicked = !isMoonClicked;
});
},
icon: Icon(
Icons.arrow_right,
color: Colors.grey,
)),
),
ListTile(
title: Text(
'Star',
style: TextStyle(color: Colors.black),
),
leading: Icon(
Icons.star,
color: isStarClicked ? Colors.yellow : Colors.grey,
),
trailing: IconButton(
onPressed: () {
setState(() {
isStarClicked = !isStarClicked;
});
},
icon: Icon(
Icons.arrow_right,
color: Colors.grey,
)),
),
TextField(
decoration: InputDecoration(
hintText: "키고 끄고 싶은 아이콘을 입력하세요.",
border: OutlineInputBorder()),
onSubmitted: (value) {
setState(() {
switch (value) {
case 'sun':
isSunClicked = !isSunClicked;
break;
case 'moon':
isMoonClicked = !isMoonClicked;
break;
case 'star':
isStarClicked = !isStarClicked;
break;
default:
}
});
},
)
],
)),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
isSunClicked = false;
isMoonClicked = false;
isStarClicked = false;
});
},
child: Icon(Icons.refresh),
),
),
);
}
}
과제3번에 Column맨 밑에 택스트필드만 추가하고 택스트필드에 인자값을 주면 실행될 수 있게 switch문을 썼다.
Android Emulator - Pixel_XL_API_27_5554 2023-02-08 17-10-34.mp4
7.71MB
[참고]