• 카테고리

    질문 & 답변
  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    미해결

3강

22.05.04 14:27 작성 조회수 177

0

3강의를 따라서 작성하면 아래의 소스의 하단에 photo부분에서 에러가 발생 하고 있습니다.
 
왜 에러가 발생하는지 이유를 잘 몰라 문의 드립니다.
 
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:image_search/model/Photo.dart';
import 'package:image_search/ui/photo_widget.dart';
import 'package:http/http.dart' as http;

class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);

@override
State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
final _controller = TextEditingController();

List<Photo> _photos = [];

Future<List<Photo>> fetch(String query) async {
final response = await http.get(Uri.parse(
'https://pixabay.com/api/?key=27171919-dd7273ea4c33cde4e8cbd583f&q=$query&image_type=photo'));

Map<String, dynamic> jsonResponse = jsonDecode(response.body);

Iterable hits = jsonResponse['hits'];
return hits.map((e) => Photo.fromJson(e)).toList();
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text(
'이미지 검색 앱',
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
elevation: 0.0,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: _controller,
decoration: InputDecoration(
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
),
suffixIcon: IconButton(
onPressed: () async {
final photos = await fetch(_controller.text);

setState(() {
_photos = photos;
});
},
icon: const Icon(Icons.search),
),
),
),
),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.all(16.0),
itemCount: _photos.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 16,
mainAxisSpacing: 16,
),
itemBuilder: (context, index) {
final photo = _photos[index];
return PhotoWidget(
photo: photo, <-- 이부분의 photo에서 에러가 발생
);
},
),
)
],
),
);
}
}

답변 2

·

답변을 작성해보세요.

0

vampireahn님의 프로필

vampireahn

질문자

2022.05.04

JSon to Dart null safe사이트에서 conver to dart로 변경을 한 소스이면 에러가 나는것 같습니다.

 

안드로이드 스튜디오에서 json to dart로 변경 후

photo_widget.dart에서 아래와 같이 변경 하니 에러가 나지 않습니다.

아래와 같이 하고 진행해도 괜찮을까요?

import 'package:flutter/material.dart';
import 'package:image_search/model/photo.dart';

class PhotoWidget extends StatelessWidget {
final Photo photo;

const PhotoWidget({
Key? key,
required this.photo,
}) : super(key: key);

@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(16.0)),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(photo.previewURL!), <-- 이렇게 변경 함
),
),
);
}
}

네 그렇게 진행하시고 나중에 소스코드와 비교해 보세요

 

0

혹시 해당 위치에 마우스 올렸을 때 에러 메시지가 뭐라고 나오나요?

아마도 타입이 안 맞는다고 할 거 같은데 PhotoWidget 생성자가 Photo 타입을 받는지 확인해 보시지요