[유데미x스나이퍼팩토리] 9주 완성! 프로젝트 캠프: 플러터 강의 - 2일차 과제

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

1. 속성: margin을 통해 현재 위치에서 떨어지는 간격을 넣어줄 수 있다.
2. Text 만큼 가장 많이 쓰이는 위젯 중 하나다.
3. 속성: alignment를 통해 자식을 보여줄 위치를 결정할 수 있다.
4. 속성: 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 #단기캠프