Flutter로 명언 표시 앱 만들기: 간단한 API 연동 프로젝트
2025. 1. 5. 10:10ㆍ같이 공부합시다 - Flutter/Flutter 기본기
728x90
반응형
안녕하세요! 이번에는 명언 표시 앱을 만들어볼 거예요. Flutter에서 API를 호출하고 데이터를 화면에 표시하는 방법을 배우는 좋은 기회가 될 것 같아요. 저는 이 과정을 처음 해보는 초보자로서, 하나씩 배우며 진행한 내용을 공유하려고 합니다. Flutter의 비동기 처리와 API 데이터 표시를 배우기에 딱 좋은 프로젝트입니다.

목차
- 명언 표시 앱 개요
- Flutter에서 API 호출 방법
- 명언 랜덤 표시 앱 구현하기
- Flutter 초보자의 시행착오
- 다음 단계: 다양한 API를 활용한 앱 만들기
1. 명언 표시 앱 개요
이 프로젝트의 목표는 간단합니다.
- 앱을 실행하면 랜덤한 명언이 화면에 표시됩니다.
- 명언을 새로고침하는 버튼을 추가합니다.
- 데이터를 가져오기 위해 무료 API(ZenQuotes API)를 사용합니다.
2. Flutter에서 API 호출 방법
Flutter에서는 http 패키지를 사용해 간단히 API를 호출할 수 있어요. 이 패키지를 사용하면 데이터를 서버에서 가져와 화면에 표시할 수 있습니다.
- pubspec.yaml 파일에 http 패키지를 추가합니다. (2025-01-02 기준 최신 버전입니다.)
- flutter pub get 명령어로 패키지를 설치합니다.
dependencies:
http: ^1.2.2
3. 명언 랜덤 표시 앱 구현하기
아래 코드는 명언을 랜덤으로 가져와 화면에 표시하는 앱입니다.
실행 가능한 코드: 명언 랜덤 표시 앱
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(QuoteApp());
class QuoteApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: QuoteScreen(),
);
}
}
class QuoteScreen extends StatefulWidget {
@override
_QuoteScreenState createState() => _QuoteScreenState();
}
class _QuoteScreenState extends State {
String _quote = "명언을 불러오는 중...";
String _author = "";
// 명언 API 호출 함수
Future _fetchQuote() async {
final url = Uri.parse("https://zenquotes.io/api/random");
try {
final response = await http.get(url);
if (response.statusCode == 200) {
final List data = json.decode(response.body);
setState(() {
_quote = data[0]['q']; // 명언
_author = data[0]['a']; // 작성자
});
} else {
setState(() {
_quote = "명언을 불러오지 못했습니다.";
});
}
} catch (error) {
setState(() {
_quote = "오류가 발생했습니다.";
});
}
}
@override
void initState() {
super.initState();
_fetchQuote(); // 초기화 시 명언 가져오기
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("랜덤 명언 앱"),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
_quote,
style: TextStyle(fontSize: 24, fontStyle: FontStyle.italic),
textAlign: TextAlign.center,
),
SizedBox(height: 20),
Text(
"- $_author",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
textAlign: TextAlign.right,
),
SizedBox(height: 40),
ElevatedButton(
onPressed: _fetchQuote,
child: Text("새 명언 가져오기"),
),
],
),
),
);
}
}
4. Flutter 초보자의 시행착오
- API URL 실수
- https 대신 http를 사용하거나 URL 뒤에 불필요한 슬래시를 추가해서 오류가 발생했어요. 올바른 URL을 사용하는 게 중요합니다.
- 데이터 형식 이해 부족
- JSON 데이터를 다룰 때 배열 형태인지, 객체 형태인지 잘못 파악해서 데이터를 표시하지 못한 적이 있었어요. API 문서(https://zenquotes.io/)를 참고해 데이터를 정확히 확인해야 합니다.
- 네트워크 예외 처리
- 인터넷 연결이 없을 때 앱이 멈추는 문제가 있었는데, try-catch 블록을 추가해서 해결했습니다.
5. 다음 단계: 다양한 API를 활용한 앱 만들기
이 앱을 발전시키거나 다른 API를 활용할 수도 있습니다.
- 명언 저장 기능: 마음에 드는 명언을 저장할 수 있도록 구현.
- 주제별 명언: 특정 주제(예: 성공, 사랑)에 맞는 명언만 가져오기.
- 다른 API 사용: 뉴스, 날씨, 영화 정보 등 다양한 데이터를 연동해보기.
마무리
Flutter에서 API를 호출하고 데이터를 표시하는 앱을 처음 만들어봤어요! 간단한 명언 앱이지만, 실시간으로 데이터를 가져와 표시하는 과정이 정말 신기했네요. (ㅎ) 이제 Flutter로 더 많은 데이터를 활용한 앱을 만들어보고 싶어졌습니다. 😆
혹시 명언 앱을 만들면서 겪은 문제나 궁금한 점이 있다면 댓글로 남겨주세요. 함께 해결해 봅시다! 😊
728x90
반응형
'같이 공부합시다 - Flutter > Flutter 기본기' 카테고리의 다른 글
Flutter로 Splash Screen & Intro 만들기: 앱의 첫인상을 디자인하자 (2) | 2025.01.07 |
---|---|
Flutter로 무작위 색상 배경 앱 만들기: 애니메이션 효과 추가하기 (3) | 2025.01.06 |
Flutter로 간단한 계산기 앱 만들기: 초보 개발자의 도전 (5) | 2025.01.04 |
Flutter로 첫 입력 필드 만들기: 초보 개발자의 도전기 (6) | 2025.01.03 |
Flutter로 더 깊이 들어가기: 첫 앱에서 한 단계 더! (53) | 2025.01.02 |