day3 review

복습: No
유형: 복습
작성일시: 2022년 7월 10일 오후 11:00

• 화면 스크롤 만들기

  • 정적인 화면(미리 개수 등이 정해진 화면 구성)

    • SingleChildScrollView(https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html)

      SingleChildScrollView(
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                      minHeight: viewportConstraints.maxHeight,
                    ),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Container(
                          // A fixed-height child.
                          color: const Color(0xffeeee00), // Yellow
                          height: 120.0,
                          alignment: Alignment.center,
                          child: const Text('Fixed Height Content'),
                        ),
                        Container(
                          // Another fixed-height child.
                          color: const Color(0xff008000), // Green
                          height: 120.0,
                          alignment: Alignment.center,
                          child: const Text('Fixed Height Content'),
                        ),
                      ],
                    ),
                  ),
                );

    • ListView(https://api.flutter.dev/flutter/widgets/ListView-class.html)

      ListView(
        padding: const EdgeInsets.all(8),
        children: <Widget>[
          Container(
            height: 50,
            color: Colors.amber[600],
            child: const Center(child: Text('Entry A')),
          ),
          Container(
            height: 50,
            color: Colors.amber[500],
            child: const Center(child: Text('Entry B')),
          ),
          Container(
            height: 50,
            color: Colors.amber[100],
            child: const Center(child: Text('Entry C')),
          ),
        ],
      )

    • 문제점

      • 전체 개수가 정해져 있을 때 사용하다 보니, 모두 메모리에 올림
      • view를 계속 업데이트 하는데, 아이템의 수가 많아질 경우 느려짐
      • 데이터가 많으면 문제가 생김

  • 동적인 화면(데이터가 많거나 동적으로 변화하는 화면에서는 문제, YouTube 등)

    • ListView.Builder(https://api.flutter.dev/flutter/widgets/ListView-class.html)

      final List<String> entries = <String>['A', 'B', 'C'];
      final List<int> colorCodes = <int>[600, 500, 100];
      
      ListView.builder(  //NOTE .builder는 생성자이자 생성자 명
        padding: const EdgeInsets.all(8),
        itemCount: entries.length,
        itemBuilder: (BuildContext context, int index) { //함수, 새로 정의해야 함. index: 아이템의 인텍스 번호)
          return Container(
            height: 50,
            color: Colors.amber[colorCodes[index]],
            child: Center(child: Text('Entry ${entries[index]}')),
          );
        }
      );

  • .builder 는 생성자이자 생성자명

  • 동적으로 만들어주기 위해, 클래스와 main 호출부의 Youtube() 앞에 const 제거

  • Text에는 숫자가 들어갈 수 없기 때문에, 아래 방식을 사용

    '${'숫자' or '수식'} //{} 안의 내용을 모두 문자로 바꿔 줌.

  • ListView.Seperated - 구분선을 넣기, Divider() 를 사용해도 됨.

• 모든 위젯에 동작(클릭, 더블클릭 등)을 부여 1st 16:31

  • GuestureDetector(https://api.flutter.dev/flutter/widgets/GestureDetector-class.html)

    GestureDetector(
                  onTap: () {
                    setState(() {
                      // Toggle light when tapped.
                      _lightIsOn = !_lightIsOn;
                    });
                  },
                  child: Container(
                    color: Colors.yellow.shade600,
                    padding: const EdgeInsets.all(8),
                    // Change button text when light changes state.
                    child: Text(_lightIsOn ? 'TURN LIGHT OFF' : 'TURN LIGHT ON'),
                  ),
                ),

• LIve Templete(Preference>Editor>Live Templete) 1st 21:40
  • navpush
  • scaffold
• 코드 분리 1st 28:03
  • youtube itme 처럼 내용이 동일한 기능적 단위를 파일로 분리
• Git commit -m 가이드 2nd 00:00
  • feat : 기능추가. 새로운 기능 추가
  • fix : 버그 수정, 버그를 제거
  • docs : 문서 수정,
  • style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
  • refactor : 코드를 더 낫게, 리펙토링
  • test : 테스트 코드, 리펙토링 테스트 코드 추가
  • chore : 잡다한 것빌드 업무, 패키지 매니저 수정
  • perf: 성능향상?