ABOUT ME

Today
Yesterday
Total
  • 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

Designed by Tistory.