카테고리 없음

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

[참고]

https://cuna.tistory.com/119