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

TextField

• 사용자에게 입력을 받을 수 있다.
• "onChanged" 속성을 이용해 입력값에 대한 이벤트를 받을 수 있다.
• fillColor을 적용하기 위해서는 filled: true를 해야 함.

TextField(
	cursorColor: Colors.red,
    decoration: InputDecoration(
    	label: Text('아이디 입력'),
        labelStyle: TextStyle(color: Colors.amber),
        hintText: 'xxxxx@naver.com',
        hintStyle: TextStyle(color: Colors.white),
        fillColor: Colors.grey,
        filled: true,
        border: InputBorder.none,
    )
)

Button Widgets

• TextButton: 텍스트가 버튼
• ElevatedButton: 확실히 강조하고 싶은 버튼
• OutlinedButton: 테두리가 나타나는 버튼
• IconButton: 아이콘에 위젯을 넣고 싶을 때 사용.
  Padding 이 기본적으로 적용돼있다.(48x48px)
  → 모두 onPressed: 버튼이 눌려질 때 이벤트 핸들러와 연결할 수 있다.

✨이벤트를 제공하는 두가지 위젯

    1. InkWell: 잉크처럼 애니메이션이 퍼지는 효과를 제공한다.

    2. GestureDetector: InkWell 보다 더 많은 제스쳐를 감지할 수 있다.

Stateless Widget

• 스스로 상태가 없다.
• 스스로를 한 번 build 하면 다시 build 할 필요가 없다.
• 한 번 UI를 그리면 수정할 필요가 없다.
• stl라고 치면 나온다.

Stateful Widget

• 스스로 상태가 있다.
• 스스로 한 번 build 해도 다시 build 할 수 있다.
• UI를 다시 그릴 수가 있다.
• stf라고 치면 나온다.

▶화면에 나타나는 데이터가 변경될 때 마다 새로 build를 해야한다

• Stateless 위젯은 한 번 build 되면 스스로 build 할 수 없고 부모가 rebuild 되면 build 된다.
• Stateful 위젯은 특정 함수 실행이 되면 스스로를 다시 build 할 수 있다.(setState((){}) 함수)

과제 요구사항💻

  - 과제 1

  - 과제 2

💙결과 및 후기💙

  - 과제 1

    ShowDialog 사용법

  showResultDialog(BuildContext context, int 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),
            )),
          ),
        );
      },
    );
  }

    버튼의 onPressed 함수

onPressed: () {
	result = x + y;
    showResultDialog(context, result);
},

Column 정렬 관련 글: https://blueoceannshark.tistory.com/entry/flutter-Column-%EC%84%B8%EB%A1%9C%EC%B6%95-%EC%A4%91%EC%95%99center-%EC%A0%95%EB%A0%AC-%EB%B0%A9%EB%B2%95-%EB%91%90-%EA%B0%80%EC%A7%80

[flutter] Column 세로축 중앙(center) 정렬 방법 두 가지 및 정렬관련 자주 사용하는 옵션

💡Tip. textfield 위젯에 keyboardType 속성에 textinputType.number 넣으면 숫자 키보드가 올라온다.

 

- 과제 2

    GridView 사용법

Expanded(
	child: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          children: [
            InkWell(
              onTap: () {
                 order.add('마라탕');
                 setState(() {});
              },
              child: MenuCard(
                 menu: '마라탕',
                 imgUrl: 'assets/maratang.jpg',
	        ),
        ),
        ...

    MenuCard

Card(
      margin: EdgeInsets.all(4),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Image.asset(
              imgUrl,
              fit: BoxFit.cover,
            ),
          ),
          Text(menu),
          Text('[담기]'),
        ],
      ),
    );

 

• hasSize 에러 → Column안에 GridView 바로 넣을 수 없음. SizedBox나 Container로 크기 지정 필요. 혹은 Expanded 사용
• Expanded가 부모인 자식은 모든 영역을 사용할 수 있음
• Column의 crossAxisAlignment: CrossAxisAlignment.stretch는 자식들의 좌우 영역 다 쓰게 만듦
• BoxFit 관련 글 https://cherry-forest.tistory.com/20

[Flutter] 이미지 크기 조절 fit 옵션 (BoxFit)

 

 

 

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

#유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #웹개발 #앱개발 #플러터 #flutter #개발 #안드로이드 #ios #단기캠프