교육/9주완성!프로젝트캠프-플러터
1주차 과제
zzangyeah
2023. 9. 24. 03:30
728x90
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에 랜덤이미지를 사용하세요.
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
- 음악명은 최대 2줄까지만 가능하다.
- 가수명과 플레이시간은 최대 1줄까지만 가능하며 필요한 경우 가수명을 줄인다.
- 음악의 정보를 보여주는 위젯을 만들고, 이름은 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
- 음식을 누르면 주문 리스트에 담기는 키오스크앱을 만들어봅니다.
- 음식이미지는 자유이며, 필요한 경우 위에 첨부된 파일을 이용하여도 됩니다.
- 하단에 떠있는 버튼을 누르면 지금까지 주문된 주문 리스트를 초기화합니다.
- 하단에 떠있는 버튼은 정중앙의 하단, 넓게 펴진 형태로 [ 초기화하기 ] 텍스트를 포함합니다.
- 음식이 보여지는 것은 [갤러리] 형태로 보여지게 하며, 검색을 통해 해결합니다.
- 그 외 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주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.