1주차 과제

day1

과제 1. 원하는 예문을 사용하여 아래의 이미지와 동일한 결과물을 만들고, 이를 만들기 위한 전체 코드를 작성하세요.

조건

• RichText 위젯 사용
• Text 위젯 사용불가
• Column 위젯 사용불가
• style을 지정한 위젯은 4가지 이상
• 문단은 3문단 이상

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            title: Text('Day1 assignment'),
      ),
      body: Center(
        child: RichText(
          textAlign: TextAlign.center,
          text: const TextSpan(
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
            ),
            children: <TextSpan>[
              TextSpan(
                text: '안녕하세요!\n간단하게 제 ',
                style:TextStyle(color: Colors.black,),
              ),
              TextSpan(
                text: '소개',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.lightBlue,
                ),
              ),
              TextSpan(
                text: '를 해보겠습니다\n\n먼저 저의 MBTI는',
                style:TextStyle(color: Colors.black,),
              ),
              TextSpan(
                text: 'ESTP',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.red,
                ),
              ),
              TextSpan(
                text: '이고\n직업은 ',
                style:TextStyle(color: Colors.black,),
              ),
              TextSpan(
                text: '개발자',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.green,
                ),
              ),
              TextSpan(
                text: '입니다.\n\n',
                style:TextStyle(color: Colors.black,),
              ),
              TextSpan(
                text: '꿈',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.normal,
                  color: Colors.amber,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Colors.grey,
                  decorationThickness: 2.0,
                ),
              ),
              TextSpan(
                text: '은 없고요\n그냥 놀고 싶습니다\n\n',
                style: TextStyle(
                  fontSize: 14,
                  fontWeight: FontWeight.normal,
                  color: Colors.grey,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Colors.grey,
                  decorationThickness: 2.0,
                ),
              ),
              TextSpan(
                text: '감사합니다',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.purpleAccent,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
    );
  }
}

day2

과제1.

 

연락처 앱 기반 작성

1. 연락처에 저장될 친구들은 총 5명으로, 이름과 번호는 다음과 같다.

- 이테디, 010-1000-2000

- 김스틴, 010-9000-8000

- 이주노, 010-3000-3000

- 임헬렌, 010-2000-8000

- 염해리, 010-1000-1000

 

2. 이미지는 네트워크로 (CDN 방식으로) 아래 URL에 랜덤이미지를 사용하세요.

- https://picsum.photos/100/100

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:SafeArea(
          child:Column(
            children: [
              ListTile(
                title:Text('이테디'),
                subtitle: Text('010-1000-2000'),
                trailing : Icon(Icons.call),
                leading: Container(
                  decoration: BoxDecoration(
                    shape:BoxShape.circle,
                  ),
                  clipBehavior : Clip.antiAlias,
                    child:Image.network('https://picsum.photos/100/100'),
                ),
              ),
              ListTile(
                title:Text('김스틴'),
                subtitle: Text('010-9000-8000'),
                trailing : Icon(Icons.call),
                leading: Container(
                decoration: BoxDecoration(
                  shape:BoxShape.circle,
                ),
                clipBehavior : Clip.antiAlias,
                child:Image.network('https://picsum.photos/100/100'),
              ),
              ),
              ListTile(
                title:Text('이주노'),
                subtitle: Text('010-3000-3000'),
                trailing : Icon(Icons.call),
                leading: Container(
                  decoration: BoxDecoration(
                    shape:BoxShape.circle,
                  ),
                  clipBehavior : Clip.antiAlias,
                  child:Image.network('https://picsum.photos/100/100'),
                ),
              ),
              ListTile(
                title:Text('임헬렌'),
                subtitle: Text('010-2000-8000'),
                trailing : Icon(Icons.call),
                leading: Container(
                decoration: BoxDecoration(
                shape:BoxShape.circle,
                ),
                clipBehavior : Clip.antiAlias,
                child:Image.network('https://picsum.photos/100/100'),
                ),
                ),
              ListTile(
                title:Text('염해리'),
                subtitle: Text('010-1000-1000'),
                trailing : Icon(Icons.call),
                leading: Container(
                  decoration: BoxDecoration(
                    shape:BoxShape.circle,
                  ),
                  clipBehavior : Clip.antiAlias,
                  child:Image.network('https://picsum.photos/100/100'),
                ),
                ),
            ],
          )
        )
      ),
    );
  }
}

과제 2. 아래의 이미지와 동일한 결과물을 만들고, 이를 만들기 위한 전체 코드를 작성하세요.

• 3가지 이상의 기분을 담고있는 위젯을 페이징이 가능하게 만드세요. (gradient, radius 필수)
• ListTile 위젯을 사용하지 않고, 동일한 결과물을 만드세요.
  • 위와 아래를 구분하는 구분선은 Divider 위젯입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('오늘의 하루는', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),),
                  Text('어땠나요?', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),

                  Container(
                    width: 200,
                    height: 100,
                    child: PageView(
                        children : [
                          SizedBox.expand(
                            child: Container(
                              child: Center(
                                  child: Text(
                                    '행복', style: TextStyle(fontFamily: 'Sunflower', color: Colors.white, fontSize: 23),
                                  )
                              ),
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                  colors: [
                                    Colors.orange,
                                    Colors.yellow,
                                  ],
                                ),
                              ),
                            ),
                          ),
                          SizedBox.expand(
                              child: Container(
                                child: Center(
                                    child: Text(
                                      '우울', style: TextStyle(fontFamily: 'Sunflower', color: Colors.white, fontSize: 23),
                                    )
                                ),
                                decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.centerLeft,
                                    end: Alignment.centerRight,
                                    colors: [
                                      Colors.black,
                                      Colors.white,
                                    ],
                                  ),
                                ),
                              )
                          ),
                          SizedBox.expand(
                              child: Container(
                                child: Center(
                                    child: Text(
                                      '지금 지쳤나요?', style: TextStyle(fontFamily: 'Sunflower', color: Colors.white, fontSize: 23),
                                    )
                                ),
                                decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.centerLeft,
                                    end: Alignment.centerRight,
                                    colors: [
                                      Colors.blue,
                                      Colors.green,
                                    ],
                                  ),
                                ),
                              )
                          ),
                        ]
                    ),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                    ),
                    clipBehavior: Clip.antiAlias,
                  ),

                  Divider(),

                  Container(
                    height: 80,
                    decoration: BoxDecoration(color: Colors.blue ),
                    child: Row(
                      children: <Widget>[
                        Expanded(
                          child: CircleAvatar(
                              radius: 28,
                              backgroundImage: NetworkImage('https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/678/25404daf10e3d1b6926e86dcbc3463b8_res.jpeg')
                          ),
                        ),
                        Expanded(
                          flex: 2,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('한예지', style: TextStyle(color: Colors.white, fontSize: 17, fontWeight: FontWeight.w400),),
                              Text('AI개발', style: TextStyle(color: Colors.white, fontSize: 12),),
                              Text('python, Pycharm', style: TextStyle(color: Colors.white, fontSize: 12),),
                            ],
                          ),
                        ),
                        Expanded(
                            child: Icon(Icons.add,
                                   color:Colors.white,
                            ),
                        ),
                      ],
                    ),
                  )
                ]
            )
        )
    );
  }
}

day3

과제 1. 유튜브 뮤직 앱 화면 제작

Requirements

1. 음악명은 최대 2줄까지만 가능하다.
2. 가수명과 플레이시간은 최대 1줄까지만 가능하며 필요한 경우 가수명을 줄인다.
3. 음악의 정보를 보여주는 위젯을 만들고, 이름은 MusicTile로 한다.

//main.dart
import 'package:assignment1/MusicTile.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.from(colorScheme: ColorScheme.dark()),
      home: Scaffold(
        appBar: AppBar(
          shadowColor: Colors.white,
          leading: Icon(Icons.keyboard_arrow_down),
          title: Text('아워리스트'),
          elevation: 0,
          shape: Border(bottom: BorderSide(color: Colors.white12, width: 1)),
          actions: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(Icons.airplay),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(Icons.search),
            ),
          ],
        ),
        body: ListView(children: [
          MusicTile(
            image: 'assets/images/music_come_with_me.png',
            title: 'Come with me',
            subTitle: 'Surfaces 및 salem ilese',
            time: '3:00',
          ),
          MusicTile(
            title: 'Good day',
            subTitle: 'Surfaces',
            image: 'assets/images/music_good_day.png',
            time: '3:00',
          ),
          MusicTile(
            title: 'Honesty',
            subTitle: 'Pink Sweat\$',
            image: 'assets/images/music_honesty.png',
            time: '3:09',
          ),
          MusicTile(
            title: 'I Wish I Missed My Ex',
            subTitle: '마할리아 버크마',
            image: 'assets/images/music_i_wish_i_missed_my_ex.png',
            time: '3:24',
          ),
          MusicTile(
            title: 'Plastic Plants',
            subTitle: '마할리아 버크마',
            image: 'assets/images/music_plastic_plants.png',
            time: '3:20',
          ),
          MusicTile(
            title: 'Sucker for you',
            subTitle: '맷 테리',
            image: 'assets/images/music_sucker_for_you.png',
            time: '3:00',
          ),
          MusicTile(
            title: 'Summer is for falling in love',
            subTitle: 'Sarah Kang & Eye Love Brandon',
            image: 'assets/images/music_summer_is_for_falling_in_love.png',
            time: '3:00',
          ),
          MusicTile(
            title: 'These days(feat. Jess Glynne, Macklemore & Dan Caplen)',
            subTitle: 'Rudimental',
            image: 'assets/images/music_these_days.png',
            time: '3:00',
          ),
          MusicTile(
            title: 'You Make Me',
            subTitle: 'DAY6',
            image: 'assets/images/music_you_make_me.png',
            time: '3:00',
          ),
          MusicTile(
            title: 'Zombie Pop',
            subTitle: 'DRP IAN',
            image: 'assets/images/music_zombie_pop.png',
            time: '3:00',
          ),
        ]),
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.white,
          currentIndex: 2,
          items: [
            BottomNavigationBarItem(
              backgroundColor: Colors.white,
              icon: Icon(Icons.home),
              label: '홈',
            ),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: '둘러보기'),
            BottomNavigationBarItem(
                icon: Icon(Icons.library_music), label: '보관함')
          ],
        ),
        bottomSheet: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              height: 64,
              child: Row(children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(4)),
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    child: Image.asset(
                      'assets/images/music_you_make_me.png',
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [Text('You Make Me'), Text('Day6')],
                  ),
                ),
                Spacer(),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Icon(Icons.play_arrow),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Icon(Icons.skip_next),
                ),
              ]),
              decoration: BoxDecoration(color: Colors.white12),
            ),
            Container(
              height: 1,
              alignment: Alignment.centerLeft,
              child: Container(
                width: 16,
                color: Colors.white,
              ),
            )
          ],
        ),
      ),
    );
  }
}

//MusicTile.dart
import 'package:flutter/material.dart';

class MusicTile extends StatelessWidget {
  const MusicTile(
      {super.key,
        required this.image,
        required this.title,
        required this.subTitle,
        required this.time});

  final String image;
  final String title;
  final String subTitle;
  final String time;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        children: [
          Container(
              height: 56,
              width: 56,
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
              clipBehavior: Clip.antiAliasWithSaveLayer,
              child: Image.asset(image)),
          SizedBox(
            width: 16,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(title,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(color: Colors.white)),
              Row(
                children: [
                  Icon(
                    Icons.check_circle,
                    color: Colors.white,
                    size: 16,
                  ),
                  Text(
                    subTitle,
                    style: TextStyle(color: Colors.white),
                  ),
                  Text(
                    ' · $time',
                    style: TextStyle(color: Colors.white),
                  ),
                ],
              )
            ],
          ),
          Spacer(),
          Icon(
            Icons.more_vert,
            color: Colors.white,
          )
        ],
      ),
    );
  }
}

//.yaml
  assets:
   - assets/images/

day4

과제 1. 다음 조건을 확인하고, 첨부된 3가지의 이미지 화면과 같은 결과를 만드세요.

• TextField를 두 개 사용하여 변수에 저장합니다.
• 사칙연산이 가능하도록 버튼을 4개 만듭니다. 각각의 버튼(+,-,*,/)를 누르면 해당 연산자에 맞는 결과값을 출력합니다.
• 이 때, 결과값은 **다이얼로그(Dialog)**로 출력합니다. Dialog란, 앱에서 팝업창처럼 화면위에 화면을 띄우는것을 말합니다. 일반적으로 showDialog가 있고, AlertDialog를 주로 사용합니다.
• 계산 결과를 result로 넣으면, 다이얼로그를 출력하는 예시코드가 제공됩니다. 해당 코드를 활용하여 결과를 화면에 출력하세요.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // root Widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: '사칙연산'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key, required this.title});

  final String title;
  int x = 1;
  int y = 1;

  //사칙연산 결과 Dialog
  showResultDialog(BuildContext context, var result) {
    showDialog(
      context: context,
      builder: (context) {
        return Dialog(
          shape:
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
          child: SizedBox(
            width: MediaQuery.of(context).size.width / 2,
            height: 150,
            child: Center(
                child: Text(
                  "$result",
                  style: const TextStyle(fontWeight: FontWeight.bold),
                )),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //앱바
      appBar: AppBar(
        title: Text(title),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          //x값 입력 필드
          Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Row(
              children: [
                Text('X의 값은?'),
                SizedBox(width: 50),
                SizedBox(
                  width: 200,
                  child: TextField(
                    onChanged: (value) {
                      x = int.parse(value);
                    },
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: 'x값을 입력하세요.',
                    ),
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Row(
              children: [
                Text('Y의 값은?'),
                SizedBox(width: 50),
                SizedBox(
                  width: 200,
                  child: TextField(
                    onChanged: (value) {
                      y = int.parse(value);
                    },
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: 'y값을 입력하세요.',
                    ),
                  ),
                ),
              ],
            ),
          ),
          ElevatedButton(
            onPressed: () {
              showResultDialog(context, x + y);
            },
            child: Text('더하기의 결과값은?!'),
          ),
          ElevatedButton(
            onPressed: () {
              showResultDialog(context, x * y);
            },
            child: Text('곱하기의 결과값은?!'),
          ),
          ElevatedButton(
            onPressed: () {
              showResultDialog(context, x - y);
            },
            child: Text('빼기의 결과값은?!'),
          ),
          ElevatedButton(
            onPressed: () {
              showResultDialog(context, x / y);
            },
            child: Text('나누기의 결과값은?!'),
          ),
        ],
      ),
    );
  }
}

과제 2. 키오스크 앱 만들기

Requirements

1. 음식을 누르면 주문 리스트에 담기는 키오스크앱을 만들어봅니다.
2. 음식이미지는 자유이며, 필요한 경우 위에 첨부된 파일을 이용하여도 됩니다.
3. 하단에 떠있는 버튼을 누르면 지금까지 주문된 주문 리스트를 초기화합니다.
4. 하단에 떠있는 버튼은 정중앙의 하단, 넓게 펴진 형태로 [ 초기화하기 ] 텍스트를 포함합니다.
5. 음식이 보여지는 것은 [갤러리] 형태로 보여지게 하며, 검색을 통해 해결합니다.
6. 그 외 UI 디자인은 자유입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // root Widget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: '분식왕 이테디 주문하기'), // 홈 페이지 호출(title 매개변수로 전달)
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});

  final String title; //앱 제목

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> order = []; //주문 리스트

  //음식 리스트
  final List<Map> foodList = [
    {'imgUrl': 'assets/option_bokki.png', 'name': '떡볶이'},
    {'imgUrl': 'assets/option_beer.png', 'name': '맥주'},
    {'imgUrl': 'assets/option_kimbap.png', 'name': '김밥'},
    {'imgUrl': 'assets/option_omurice.png', 'name': '오므라이스'},
    {'imgUrl': 'assets/option_pork_cutlets.png', 'name': '돈까스'},
    {'imgUrl': 'assets/option_ramen.png', 'name': '라면'},
    {'imgUrl': 'assets/option_udon.png', 'name': '우동'}
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //앱바
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true, //타이틀 글씨 가운데 정렬
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.black,
        elevation: 0,
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
              '주문 리스트',
            ),
            Text(order.toString()),
            SizedBox(height: 8),
            Text(
              style: TextStyle(
                fontSize: 22,
                fontWeight: FontWeight.bold,
              ),
              '음식',
            ),
            Expanded(
              // 음식 리스트 그리드 뷰
              child: GridView.count(
                crossAxisCount: 3,
                children: List.generate(foodList.length, (index) {
                  return GestureDetector(
                    onTap: () => setState(() {
                      order.add(foodList[index]['name']);
                    }),
                    // 하나의 음식 요소
                    child: Card(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Image(
                              image: AssetImage(
                                foodList[index]['imgUrl'],
                              ),
                              height: MediaQuery.of(context).size.height,
                              width: MediaQuery.of(context).size.width,
                              fit: BoxFit.cover,
                            ),
                          ),
                          Text(
                            style: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold,
                            ),
                            foodList[index]['name'].toString(),
                          ),
                          Text(
                            style: TextStyle(
                              color: Colors.black,
                            ),
                            '[담기]',
                          ),
                        ],
                      ),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      ),
      // 하단 버튼
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () => setState(() {
          order.clear();
        }),
        label: Text('초기화하기'),
      ),
      // 하단 버튼 위치
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

day5

일주일의 마지막 날에 너무 하신 거 아닙니까,,,,,

과제 1. 다음과 같이 버튼 [1번 과제], [2번 과제], [3번 과제]를 구성하고, 클릭 시 과제 페이지로 이동하도록 만드세요.

• 1번 과제를 클릭하면, 1번 과제의 내용 페이지로 이동됩니다.
• 2번 과제를 클릭하면, 2번 과제의 내용 페이지로 이동됩니다.
• 3번 과제를 클릭하면, 3번 과제의 내용 페이지로 이동됩니다.

과제 2. ScrollController를 활용하여 가장 상단으로 이동하는 기능을 구현합니다.

• ListView.builder 위젯을 활용하여 높이가 300인 동물 위젯을 생성합니다.
  • 이 때, 사용되는 데이터는 다음과 같습니다.
  • List animalList = ['강아지', '고양이', '앵무새', '토끼', '오리', '거위', '원숭이'];
• 하단의 FAB(FloatingActionButton)을 누르면, 스크롤 위치가 최상단으로 이동되게합니다.
  • 이 때, 사용되는 아이콘 명은 다음과 같습니다.

과제 3. 입력된 텍스트 미러링하는 화면을 제작합니다.

• TextField에 입력시, 바로 밑에 위치한 하단의 Text위젯에 똑같이 적용되도록 합니다.
• FAB(FloatingActionButton)을 클릭하면, 작성중이던 모든 내용이 사라집니다.
  • 이 때, 사용되는 아이콘 명은 다음과 같습니다.
  • Icons.close

과제 4. 다음의 UI를 구성하고 각각의 조건에 맞추어 코딩하시오.

• Sun, Moon, Star라는 값이 있으며, 오른쪽의 버튼을 눌렀을 때, 스위칭이 각각 될 수 있도록 함.
• 이 때 스위칭이란, 활성화 여부를 뜻하며 불이 들어와 있을 땐 끄고, 꺼져있을 땐 켜는 것을 뜻함.
• FAB를 클릭하면 모든 활성화되어있는 아이콘이 비활성화됨.

4-1. 4번의 과제를 활용하여 다음의 추가적인 UI를 구성하여 해결하시오.

• 아이콘의 색이 켜졌을 땐 끄고, 꺼져있을 때는 켜는 시스템을 제작함.
• “태양” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
• “달” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
• “별” 입력 후 “엔터(혹은 제출)”하였을 때, 달 아이콘의 색상이 스위칭이 되도록 함.
• FAB를 클릭하면 모든 활성화되어있는 아이콘이 비활성화됨.

하얗게 불태웠다ㅏ,,,,

//main.dart
import 'package:flutter/material.dart';
import 'mainpage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Assignment());
  }
}

//animal.dart
import 'package:flutter/material.dart';

class AnimalName extends StatelessWidget {
  const AnimalName({
    super.key,
    required this.name,
  });

  final String name;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: 300,
      child: Text(
        name,
      ),
    );
  }
}

//1.dart
import 'package:flutter/material.dart';
import 'animal.dart';

class SecondAssignment extends StatelessWidget {
  SecondAssignment({super.key});

  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('5일차 과제'),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _scrollController.animateTo(
            0,
            duration: Duration(milliseconds: 300),
            curve: Curves.easeInOut,
          );
        },
        child: Icon(Icons.vertical_align_top),
      ),
      body: ListView(
        controller: _scrollController,
        children: [
          AnimalName(name: '강아지'),
          AnimalName(name: '고양이'),
          AnimalName(name: '앵무새'),
          AnimalName(name: '토끼'),
          AnimalName(name: '오리'),
          AnimalName(name: '거위'),
          AnimalName(name: '원숭이'),
        ],
      ),
    );
  }
}

//2.dart
import 'package:flutter/material.dart';

class ThirdAssignment extends StatefulWidget {
  const ThirdAssignment({super.key});

  @override
  State<ThirdAssignment> createState() => _ThirdAssignmentState();
}

class _ThirdAssignmentState extends State<ThirdAssignment> {
  String inputValue = '';
  final TextEditingController _textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('5일차 과제'),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          inputValue = '';
          _textFieldController.clear();
          setState(() {});
        },
        child: Icon(Icons.close),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: _textFieldController,
            onChanged: (value) {
              inputValue = value;
              setState(() {});
            },
            decoration: InputDecoration(
              hintText: '입력하는대로 아래 글자가 나옵니다',
            ),
          ),
          Text(inputValue)
        ],
      ),
    );
  }
}

//3.dart
import 'package:flutter/material.dart';

class FourthAssignment extends StatefulWidget {
  FourthAssignment({super.key});

  final TextEditingController _textFieldController = TextEditingController();

  @override
  State<FourthAssignment> createState() => _FourthAssignmentState();
}

class _FourthAssignmentState extends State<FourthAssignment> {
  bool isSunClicked = false;
  bool isMoonClicked = false;
  bool isStarClicked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('5일차 과제'),
        centerTitle: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          isSunClicked = false;
          isMoonClicked = false;
          isStarClicked = false;
          setState(() {});
        },
        child: Icon(Icons.refresh),
      ),
      body: Column(
        children: [
          ListTile(
            leading: Icon(Icons.sunny,
                color: isSunClicked ? Colors.red : Colors.grey),
            title: Text('Sun'),
            trailing: IconButton(
              onPressed: () {
                isSunClicked = !isSunClicked;
                setState(() {});
              },
              icon: Icon(
                Icons.arrow_right,
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.dark_mode,
                color: isMoonClicked ? Colors.amber : Colors.grey),
            title: Text('Moon'),
            trailing: IconButton(
              onPressed: () {
                isMoonClicked = !isMoonClicked;
                setState(() {});
              },
              icon: Icon(
                Icons.arrow_right,
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.star,
                color: isStarClicked ? Colors.amber : Colors.grey),
            title: Text('Star'),
            trailing: IconButton(
              onPressed: () {
                isStarClicked = !isStarClicked;
                setState(() {});
              },
              icon: Icon(
                Icons.arrow_right,
              ),
            ),
          ),
          TextField(
            onSubmitted: (value) {
              if (value == "태양") isSunClicked = !isSunClicked;
              if (value == "달") isMoonClicked = !isMoonClicked;
              if (value == "별") isStarClicked = !isStarClicked;
              setState(() {});
            },
            decoration: InputDecoration(
              hintText: '키고 끄고싶은 아이콘을 입력하세요.',
              border: OutlineInputBorder(),
            ),
          )
        ],
      ),
    );
  }
}

//mainpage.dart
import 'package:flutter/material.dart';
import '1.dart';
import '2.dart';
import '3.dart';

class Assignment extends StatelessWidget {
  const Assignment({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('5일차 과제'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => SecondAssignment()));
              },
              child: Text('1번 과제'),
            ),
            SizedBox(height: 120),
            ElevatedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => ThirdAssignment()));
              },
              child: Text('2번 과제'),
            ),
            SizedBox(height: 120),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => FourthAssignment()));
              },
              child: Text('3번 과제'),
            ),
          ],
        ),
      ),
    );
  }
}

 

본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.