if (snapshot.hasData) {
return Column(
children: [
const SizedBox(
height: 40,
),
Expanded(child: makeList(snapshot))
],
);
}
우선 컬럼을 넣어서 sizedbox를 넣어주자.(위 여백)
Expanded를 사용하지 않으면 에러가 발생한다. 왜?
Column에는 sizedbox와 listView가 있다.
ListView에 높이 제한이 없어서(무한한 높이라서) 에러가 발생한다.
Horizontal viewport was given unbounded height.이 무제한의 ListView에 제한을 주는 방법이 Expanded인 것.
Expanded
화면의 남는 공간을 차지 하는 위젯
Row,Column의 child를 확장하여 남는 공간을 채우게 한다.
그래서 위 에러가 해결되는 것
표지 가져오기
이제 제목 출력 대신에 표지를가져오자
return Text를 아래처럼 고치자
return Column(
children: [
Image.network(webtoon.thumb),
Text(webtoon.title),
],
);그러면 이제 데이터를 가져와야 하는데...
403에러가 발생했다.
클라이언트 오류 상태 응답 코드는 서버에 요청이 전달되었지만, 권한 때문에 거절되었다고 한다.
- 방법1
headers를 함께 요청해야하는데 다음 코드처럼 작성하자
Image.network(
webtoon.thumb,
headers: const {
'Referer': 'https://comic.naver.com',
},
),- 방법2
User Agent
웹 브라우저나 다른 클라이언트가 서버에 HTTP 요청을 보낼 때 포함하는 헤더 중 하나로, 클라이언트의 소프트웨어와 버전, 운영 체제 등에 대한 정보를 서버에 제공하는 문자열이다.
서버는 이 정보를 사용하여 클라이언트의 종류와 기능을 식별하고, 적절한 응답을 제공할 수 있다.
공식문서 - userAgent
공식문서를 번역해보면
User-Agent 기본값 : Dart/<version> (dart:io)
userAgent를 null로 설정하면 각 요청에 기본 User-Agent헤더가 추가되지 않는다.
고 한다.
Image.network(webtoon.thumb, headers: const {
'User-Agent':
"Mozilla/5.0 (Linux; Android 10; SM-G973F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.152 Mobile Safari/537.36",
}),User-Agent 내용은 실제 내 안드로이드 기종이랑 같아야 한다거나..그런것은 아닌 것 같다.
추가로 Android 8; SM-G970 처럼 아예 다르게 바꿔봤지만 에러가 뜬다거나 표지 크기를 다르게 불러온다거나 하지는 않는다(변화 없음)
방법 두 개 중에 하나 택해서 해결하면 될 것 같다. (방법1, 방법2 결과 차이 없음)
표지 크기 조정하기
조정을 하려면 Image.network를 container안에 넣어줘야한다.
Container의 BoxContainer의 borderRadius를 이용해 모서리를 둥글게도 해보자.
근데 이렇게만 적으면 모서리가 변화가 없다.
따라서 그것을 사용해야 한다.
clipBehavior
위젯의 콘텐츠를 자르는 다양한 방법을 제공한다.
이미지를 보면 쉽게 이해할 수 있다.
이 사진이
이렇게 된다.
ClipBehavior : Clip.옵션 형태로 사용하는데 나는 hardEdge를 사용했다.
공식 문서에서 가져온 각 옵션별 설명을 살펴보자.
- none, 안자름. 가장 빠름
- hardEdge, 가장 빠르지만 적게 자름
- antiAlias, hardEdge보다는 느리지만, 부드러운 모서리.
- antiAliasWithSaveLayer, antiAlias보다 훨씬 느리고, 거의 사용하면 안됨.
기본값은 none이며 콘텐츠가 위젯 경계를 넘지 않는다면 성능저하가 발생하지 않는다고 한다.
아래는 makeList위젯을 수정한 코드
//패딩 추가
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
//Container로 다양한 효과, (그림자, 모서리 둥글게)
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
boxShadow: [
BoxShadow(
blurRadius: 15,
offset: const Offset(10, 15),
color: Colors.black.withOpacity(0.5))
]),
clipBehavior: Clip.hardEdge,
width: 250,
child: Image.network(
webtoon.thumb,
headers: const {
'Referer': 'https://comic.naver.com',
// 'User-Agent':
// "Mozilla/5.0 (Linux; Android 8; SM-G970) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.152 Mobile Safari/537.36",
},
),
),
