오늘 배운 것 이것저것 정리

stack

stack을 감싸는 위젯에 사이즈가 없다면, 자녀의 사이즈를 따라가게 된다.

특정 사이즈를 정해주고 싶다면 stack을 container 등으로 감싼 뒤에 사이즈를 지정해주면 된다.

 

 

container

container 에서는 기본 속성에 padding이 있다. 

그리고 EdgeInsets.only() 속성을 사용하면 사면에 다른 값의 패딩을 줄 수 있다.

 

 

FocusScope.of(context).unfocus()

TextField 메서드를 사용했을 때, 반드시 넣어줘야되는 기능이다. 

키보드가 아닌 다른 공간을 클릭 했을 때, 키보드를 닫을 수 있게 하는 메서드이다.

Scaffold() 를 GestureDetector()로 감싼 뒤 사용한다.

 

 

 

아이콘위젯 클릭하기 편하도록 사이즈 있는 위젯으로 감싸기 

사용자가 핸드폰 화면을 손가락을 터치할 때, 아이콘 터치가 잘 눌리도록 하려면 아이콘의 터치 영역을 44 픽셀 이상으로 해주는 것이 UX적으로 좋다고 한다. 어플은 특히 사용자 경험이 직관적으로 중요한 분야라고 생각하기 때문에 이 부분을 꼭 지키면서 개발해야겠다. 

icon 위젯을 container 등 사이즈를 가질 수 있는 위젯으로 감싸주고 가로 세로 사이즈를 넣어준다. 

그리고 꼭!!! 배경색까지 같이 넣어줘야(보통은 투명) 해당 영역에 터치 이벤트가 적용된다. 

 

 

 

텍스트 반복해서 길게 쓸 때 꿀팁 

반복하고 싶은 텍스트 뒤에 * (원하는 횟수) 를 해주면 된다.

  Text('텍스트 짱 길게 쓰고싶어.' * 10)

 

 

GridView

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount 

그리드 레이아웃을 설정해주는 역할

• crossAxisCount : 가로 세로 몇 칸으로 나눌지 설정 
• childAspectRatio : 각 아이템의 가로 세로 비율을 설정 
• crossAxisSpacing : 가로 간 아이템 간의 간격 설정
• mainAxisSpacing  : 세로 간 아이템 간의 간격 설정

       body: GridView.builder(
              padding: EdgeInsets.all(20),
              itemCount: homeState.books.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  childAspectRatio: 3 / 4,
                  crossAxisSpacing: 5,
                  mainAxisSpacing: 15),
              itemBuilder: (context, index) {

 

 

Flutter 테스트 방법

1. test 폴더에서 테스트 파일 생성해준다.

2. main() 를 만들어준다.

3. main() 안에 원하는 로직을 짜준다.

4. expect(예상 값, 결과 값) 사용하여 예상값이 결과값과 일치하는 지 테스트해본다.