-
3번의 과제를 활용하여 다음의 추가적인 UI를 구성하여 해결하시오.
- 아이콘의 색이 켜졌을 땐 끄고, 꺼져있을 때는 켜는 시스템을 제작함.
- “태양” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
- “달” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
- “별” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
- FAB를 클릭하면 모든 활성화되어있는 아이콘이 비활성화됨.
예제 코드
import 'package:flutter/material.dart';
void main() {runApp(const MyApp());}
class MyApp extends StatelessWidget {const MyApp({super.key});
@overrideWidget build(BuildContext context) {return MaterialApp(home: MainPage(),);}}
class MainPage extends StatefulWidget {const MainPage({super.key});
@overrideState<MainPage> createState() => _MainPageState();}
class _MainPageState extends State<MainPage> {bool isSunClicked = false;bool isMoonClicked = false;bool isStarClicked = false;@overrideWidget 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.mp47.71MB[참고]