9주완성! 프로젝트 캠프: 플러터
[유데미x스나이퍼팩토리] 9주 완성! 프로젝트 캠프: 플러터 강의 - 2일차 과제
judyshin
2023. 9. 26. 00:17
Column 위젯
- 세로로 위젯을 나열할 때 사용
- 자식"들"을 가지는 위젯(child가 아닌 children 사용)
- children에는 데이터타입이 List<Widget>인 것만 넣어줄 수 있음
- 리스트 안에서 위젯끼리 컴마로 구분
Column {
children: [
Text{'Widget 1'},
Text{'Widget 2'},
]
}
Container 위젯
- 자식위젯에게 사용할 수 있는 크기를 정해줄 때
- 내 자식을 포장해서 보여주고 싶을 때
Container(
width: 300,
height: 300,
alignment: Alignment.center,
padding: EdgeInsets.all(8),
margin: EdgeInsets.all(8),
child: Text('SizedBox'),
decoration: BoxDecoration(
border: border.all(),
borderRadius: BorderRadius.circular(16),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Colors.blue,
Colors.red,
],
),
boxShadow: [
BoxShadow(
color: Colors.black12,
spreadRadius: 10,
blurRadius: 4,
offset: Offset(0, 10),
),
],
)
)
💡현업 Tip
- 속성: margin을 통해 현재 위치에서 떨어지는 간격을 넣어줄 수 있다.
- Text 만큼 가장 많이 쓰이는 위젯 중 하나다.
- 속성: alignment를 통해 자식을 보여줄 위치를 결정할 수 있다.
- 속성: padding이 있어서 부모로 따로 padding 위젯을 쓸 필요가 없다.
과제 요구사항💻
✏작성한 코드
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Center(
child: Padding(
padding: const EdgeInsets.only(top: 160),
child: Column(
children: [
Text(
'오늘의 하루는',
style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
),
Text(
'어땠나요?',
style: TextStyle(fontSize: 16),
),
Container(
margin: EdgeInsets.all(8.0),
height: 160,
width: 240,
child: PageView(
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.pink,
Colors.lime,
],
),
),
child: Center(
child: Text(
'행복함',
style: TextStyle(color: Colors.white),
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.yellow,
Colors.cyan,
],
),
),
child: Center(
child: Text(
'즐거움',
style: TextStyle(color: Colors.white),
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.brown,
Colors.blueGrey,
],
),
),
child: Center(
child: Text(
'피곤함',
style: TextStyle(color: Colors.white),
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.black38,
],
),
),
child: Center(
child: Text(
'불안함',
style: TextStyle(color: Colors.white),
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.teal,
Colors.deepPurple,
],
),
),
child: Center(
child: Text(
'두려움',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
Divider(),
Container(
margin: EdgeInsets.only(top: 8.0),
color: Colors.blue,
height: 80,
width: 500,
child: Row(
children: [
Container(
padding: EdgeInsets.only(left: 8.0, right: 8.0),
child: ClipOval(
child: Image.asset(
'assets/man.png',
scale: 1.4,
),
),
),
Column(
children: [
Padding(
padding:
const EdgeInsets.only(top: 14.0, bottom: 2.0),
child: Text(
'라이언',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
Text(
'게임개발\nC#, Unity',
style: TextStyle(color: Colors.white, fontSize: 11),
),
],
),
Spacer(),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(
Icons.add,
color: Colors.white,
size: 18,
),
),
],
),
),
],
),
),
))),
);
}
}
💙결과 및 후기💙
- container로 pageview를 감싸서 크기조절을 했다.
- pageview의 children으로 색과 텍스트가 들어간 container들을 주었다.
- 각 기분에 따른 gradient 색을 고민하는 것이 재밌었다.
- ListTile을 사용하지 않아야 해서 container로 색을 넣고 Row에 사진, Column(Text가 포함된), Icon을 넣었다.
본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #웹개발 #앱개발 #플러터 #flutter #개발 #안드로이드 #ios #단기캠프