[트러블슈팅] 검색 api 를 사용한 지역 검색 앱 개발 중 에러

 

1. flutter 의 MVVM 패턴을 사용하여 상태를 업데이트 하는 과정에서 assign 이 안되는 오류

문제

A value of type 'List<Location>?  can't be assigned to a variable of type 'List<Location>?

...이것 뭐에요? 상태가 됨 state 도 List<Location>? 타입이고 books 도 List<Location>? 타입이다. 똑같은 타입인데 할당이 안된대서 내가 만든 Location 클래스 말고 dart 에 내장되어 있는 다른 클래스 타입인가 확인했는데 그것도 아니다.

 

거짓말 안하고 이러고 10분동안 째려봄

 

 

어 뭔가 다른데.. 이러고 참조하는 파일 두 개 열어서 비교해봤다.

 

자세히 살펴보니 묘-하게 파일명이 다르다.

location.dart 만들 때 처음에 Location.dart 라고 만들었다. location_repository 에서 Location.dart 이라는 파일을 자동 import 를 했다. 그리고 Location.dart 이름을 location.dart 로 바꾸고나서 다른 파일에서 location.dart 파일 import 할 때 발생한 헤프닝...

 

해결

location_repository.dart 파일에 import 한 파일 이름을 location.dart 으로 바꿔주면 된다.

깔끔

 

2. 안드로이드에서 textField border 가 제대로 안보이는 오류

textField 위젯으로 검색어를 받아오는 기능을 구현하고 있었다. ios 에서 테스트를 끝내고 안드로이드에서 테스트하려 실행해보니 위아래가 잘린 모습으로 나를 반겨주는 textField 가 눈에 들어온다.

textField 는 AppBar 의 title 로 지정되어 있고 border 는 OutlineInputBorder 로 바깥 테두리가 있는 스타일을 사용했다.

Scaffold(
  appBar: AppBar(
    title: Container(
      child: TextField(
        controller: controller,
        onSubmitted: (value) => onSubmitted(value),
        decoration: InputDecoration(
          hintText: '검색어를 입력해 주세요',
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      ),
    ),
  ),
  ...
);

 

문제

textField 의 높이(height) 기본 크기는 화면, 텍스트, 폰트 등의 크기에 의해 결정된다. 안드로이드 에뮬레이터가 ios 의 시뮬레이터의 화면과 텍스트의 기본 크기보다 커서 textField 의 height 높이가 크다. textField 가 body 에 속해있었더라면 borderline 이 잘 보였을테지만, textField 의 상위 위젯에는 AppBar 가 있다. 이 AppBar 의 고정된 사이즈를 벗어난 부분이 잘려져 보여지지 않는 것이었다.

 

해결

textField 의 text 크기를 지정하여 appbar 높이를 벗어나지 않도록 한다.

Scaffold(
  appBar: AppBar(
    title: Container(
      child: TextField(
        controller: controller,
        onSubmitted: (value) => onSubmitted(value),
        style: TextStyle(fontSize: 15), // 텍스트 크기 지정
        decoration: InputDecoration(
          hintText: '검색어를 입력해 주세요',
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      ),
    ),
  ),
  ...
);