Flutter로 고양이 투표 프로그램 만들기
항목 설정
인코딩을 시작하기 전에 프로젝트에 의존 항목을 추가할 것입니다.우선 상태 관리를 위해 바이브레이션 훅과 리버포드 훅이 필요합니다.그리고 나머지 호출에 대해서는 HTTP 패키지가 필요합니다.마지막으로 투명한 이미지 패키지를 추가합니다. 이미지를 불러올 때, 이 패키지를 사용해서 불러오는 순환을 보여 줍니다.
dependencies:
flutter:
sdk: flutter
http: ^0.13.3
flutter_hooks: ^0.17.0
hooks_riverpod: ^0.14.0
transparent_image: ^2.0.0
flutter pub get
드래그 앤 드롭
용기의 드래그부터 시작합시다.그런 다음 Cat API에 연결할 수 있습니다.다행히도 떨림 속에서 드래그 앤 드롭을 만드는 것은 매우 간단합니다.우리 토론drag and drop in more detail here.하지만 이제 우리가 알아야 할 것은 드래그할 수 있는 작은 부품이 필요하다는 것이다.Draggable 위젯은 우리가 드래그할 수 있는 위젯입니다. 프로그램에 필요합니다.
class CatPage extends HookWidget {
@override
Widget build(BuildContext context) {
return new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Center(
child: Draggable(
child: Container(
width: constraints.maxWidth - 10,
height: constraints.maxHeight - 200,
child: Card(
color: Colors.green,
child: Icon(Icons.downloading),
),
),
feedback: Center(
child: Container(
width: constraints.maxWidth - 10,
height: constraints.maxHeight - 200,
child: Card(
color: Colors.grey,
child: Icon(Icons.downloading),
),
),
),
),
);
});
}
}
드래그하기 전에 하위 값이 표시됩니다.피드백은 드래그된 작은 위젯입니다.이제 우리는 드래그할 수 있는 작은 부품이 하나 생겼다.그러나 우리가 용기를 왼쪽이나 오른쪽에 두면 아무 일도 일어나지 않는다.이를 위해 OndragEnd 메소드를 다시 작성할 수 있습니다.이 방법은 Dragable Details를 제공합니다. Dragable Details는 사용자가 작은 위젯을 어디에 두는지 정보를 포함합니다.우리는 이 정보를 사용하여 사용자가 작은 위젯을 왼쪽에 두었는지 오른쪽에 두었는지 확인할 수 있다.
child: Draggable(
onDragEnd: (details) {
if (details.offset.dx > 20) {
print("Is dropped to the right");
} else if (details.offset.dx < -20) {
print("Is dropped to the left");
}
}
이미지 배치
이제 우리는 작은 부품을 드래그해서 작은 부품이 왼쪽으로 미끄러지는지 오른쪽으로 미끄러지는지 검사할 수 있다.즉, API를 호출하는 것부터 시작할 준비가 되어 있습니다.API를 사용하려는 경우 등록for a free API key here할 수 있습니다.이미지에 대한 정보를 반환하는 검색 API를 응용 프로그램에 호출합니다.API 검색 시 다음 정보가 반환됩니다.
[
{
"breeds": [],
"id": "19n",
"url": "https://cdn2.thecatapi.com/images/19n.gif",
"width": 499,
"height": 367
}
]
class Cat {
final String id;
final String url;
Cat({
this.id,
this.url,
});
factory Cat.fromJson(Map json) {
return Cat(
id: json['id'],
url: json['url'],
);
}
}
class CatRepository {
Future fetchCat() async {
final response = await http.get(
Uri.parse('https://api.thecatapi.com/v1/images/search'),
headers: {"x-api-key": "api-key", "Content-Type": "application/json"},
);
if (response.statusCode == 200) {
return Cat.fromJson(jsonDecode(response.body)[0]);
} else {
throw Exception('Failed to load Cat');
}
}
}
final cat = FutureProvider.autoDispose((ref) async {
return ref.watch(catRepository).fetchCat();
});
class CatPage extends HookWidget {
@override
Widget build(BuildContext context) {
final currentCat = useProvider(cat);
return currentCat.when(
data: (catData) {
return new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Center(
child: Draggable(
onDragEnd: (details) {
if (details.offset.dx > 20) {
print("Is dropped to the right");
} else if (details.offset.dx < -20) {
print("Is dropped to the left");
}
},
child: Container(
width: constraints.maxWidth - 10,
height: constraints.maxHeight - 200,
child: Card(
child: Stack(children: [
Loading(),
Center(child: CatImage(url: catData.url))
]),
),
),
feedback: Center(
child: Container(
width: constraints.maxWidth - 10,
height: constraints.maxHeight - 200,
child: Stack(children: [
Loading(),
Center(child: CatImage(url: catData.url))
]),
),
),
),
);
});
},
loading: () => Loading(),
error: (e, s) => ErrorWidget(s));
}
}
class CatImage extends StatelessWidget {
const CatImage({Key key, this.url,}) : super(key: key);
final String url;
@override
Widget build(BuildContext context) {
return FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: url,
);
}
}
우리 프로그램의 첫 번째 고양이는 엄지손가락을 세울 거예요, 아니면 엄지손가락을 세울 거예요?이미지를 평가하다
이제 우리는 API를 통해 고양이 사진 한 장을 전시했으니 투표할 때가 되었다!이를 위해 API에 다음 본문을 게시할 수 있습니다.
{
"image_id": "2gl",
"value": 1
}
class Vote {
final String id;
final int value;
Vote(this.id, this.value);
Map toJson() => {
'image_id': id,
'value': value,
};
}
rateCat(Vote vote) {
http.post(Uri.parse("https://api.thecatapi.com/v1/votes"),
headers: {
"x-api-key": "api-key",
"Content-Type": "application/json"
},
body: jsonEncode(vote));
}
다음 그림 보이기
마지막으로 우리는 현재의 고양이 그림에 대해 등급을 매긴 후에 다음 그림을 받아야 한다.이렇게 하는 동시에 우리는 약간의 개선을 실시할 것이다.현재 이미지를 등급을 매길 때 다음 그림을 추출합니다.그런 다음 드래그할 때 현재 이미지 아래에 다음 이미지가 표시됩니다.이를 위해 우리는 리버포드 가문의 전화를 충분히 이용할 수 있다.기존 값으로 돌아갈지 새 값으로 돌아갈지 결정하는 ID를 제공할 수 있습니다.우리는 매번 고양이 한 마리를 얻을 때마다 그것으로 새로운 고양이 그림을 검색할 수 있다.이것 또한 우리가 다음 고양이를 위해 전화를 할 수 있다는 것을 의미하며, 우리는 현재의 고양이를 검색하고 있다.
final cat = FutureProvider.autoDispose.family((ref, id) async {
return ref.watch(catRepository).fetchCat();
});
@override
Widget build(BuildContext context) {
final counter = useState(0);
final currentCat = useProvider(cat(counter.value));
return currentCat.when(
data: (catData) {
return new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Center(
child: Draggable(
onDragEnd: (details) {
if (details.offset.dx > 20) {
rateCat(Vote(catData.id, 1));
counter.value++;
} else if (details.offset.dx < -20) {
rateCat(Vote(catData.id, 0));
counter.value++;
}
},
final nextCat = useProvider(cat(counter.value + 1));
nextCat.when(
data: (nextCat) {
precacheImage(Image.network(nextCat.url).image, context);
},
loading: () {},
error: (o, s) {},
);
class CatPage extends HookWidget {
rateCat(Vote vote) {
http.post(Uri.parse("https://api.thecatapi.com/v1/votes"),
headers: {"x-api-key": "api-key", "Content-Type": "application/json"},
body: jsonEncode(vote));
}
@override
Widget build(BuildContext context) {
final counter = useState(0);
final currentCat = useProvider(cat(counter.value));
final nextCat = useProvider(cat(counter.value + 1));
final dragging = useState(false);
nextCat.when(
data: (nextCat) {
precacheImage(Image.network(nextCat.url).image, context);
},
loading: () {},
error: (o, s) {},
);
return currentCat.when(
data: (catData) {
return new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Center(
child: Draggable(
onDragEnd: (details) {
if (details.offset.dx > 20) {
rateCat(Vote(catData.id, 1));
counter.value++;
} else if (details.offset.dx < -20) {
rateCat(Vote(catData.id, 0));
counter.value++;
}
dragging.value = false;
},
onDragStarted: () {
dragging.value = true;
},
child: Container(
width: constraints.maxWidth - 10,
height: constraints.maxHeight - 200,
child: Card(
child: Stack(children: [
Loading(),
Center(
child: dragging.value == false
? CatImage(url: catData.url)
: nextCat.when(
data: (nextCat) {
return CatImage(url: nextCat.url);
},
loading: () {
return Loading();
},
error: (Object error, StackTrace stackTrace) {
return ErrorWidget(stackTrace);
},
),
)
]),
),
),
feedback: Center(
child: Container(
width: constraints.maxWidth - 10,
height: constraints.maxHeight - 200,
child: Card(
child: Stack(children: [
Loading(),
Center(child: CatImage(url: catData.url))
]),
),
),
),
),
);
});
},
loading: () => Loading(),
error: (e, s) => ErrorWidget(s));
}
}
최종 결과게시물Creating a Cat Voting App with Flutter이 가장 먼저Barttje에 올라왔다.
Reference
이 문제에 관하여(Flutter로 고양이 투표 프로그램 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bartvwezel/creating-a-cat-voting-app-with-flutter-5a9f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
