-
다음의 UI를 구성하고 각각의 조건에 맞추어 코딩하시오.
- Sun, Moon, Star라는 값이 있으며, 오른쪽의 버튼을 눌렀을 때, 스위칭이 각각 될 수 있도록 함.
- 이 때 스위칭이란, 활성화 여부를 뜻하며 불이 들어와 있을 땐 끄고, 꺼져있을 땐 켜는 것을 뜻함.
- 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,)),)],)),floatingActionButton: FloatingActionButton(onPressed: () {setState(() {isSunClicked = false;isMoonClicked = false;isStarClicked = false;});},child: Icon(Icons.refresh),),),);}}localhost_51034_#_ - Chrome 2023-02-08 16-41-14.mp44.26MB