주식 정보를 가져와서 표시하는 간단한 Flutter 앱을 만들어 볼 것이다. 이를 위해서는 플러터의 상태 관리 라이브러리인 provider를 사용할 것이다. provider를 사용하면 앱 전체에 걸쳐 상태를 효율적으로 관리할 수 있다.
프로젝트 설정
우선 기본적인 플러터 프로젝트를 설정하자. 이제 플러터 프로젝트를 생성한 다음, provider 라이브러리를 pubspec.yaml 파일에 추가하자.
dependencies:
flutter:
sdk: flutter
provider: ^5.0.0
그런 다음 pubspec.yaml 파일을 저장한 다음, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 설치한다.
주식 정보 가져오기
주식 정보를 가져오기 위해 외부 API를 사용할 것이다. 이 예제에서는 Alpha Vantage의 API를 사용할 것이며, 무료로 API 키를 발급받을 수 있다.
import 'package:http/http.dart' as http;
Future<Map<String, dynamic>> fetchStockData(String symbol) async {
final apiKey = 'YOUR_API_KEY';
final apiUrl = 'https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=$symbol&apikey=$apiKey';
final response = await http.get(Uri.parse(apiUrl));
if (response.statusCode == 200) {
return json.decode(response.body)['Global Quote'];
} else {
throw Exception('Failed to load stock data');
}
}
위의 코드는 http 라이브러리를 사용하여 Alpha Vantage API에서 주식 정보를 가져오는 메서드를 정의한다. 알맞은 API 키와 함께 요청을 보내고, 응답을 받은 후 JSON 데이터를 파싱하여 반환한다.
Provider를 사용한 상태 관리
이제 provider 라이브러리를 사용하여 주식 정보를 앱 전역에서 상태 관리하는 방법을 알아보자.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class StockData with ChangeNotifier {
Map<String, dynamic> _data = {};
Map<String, dynamic> get data => _data;
Future<void> fetchAndSetData(String symbol) async {
final fetchedData = await fetchStockData(symbol);
_data = fetchedData;
notifyListeners();
}
}
class StockScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final stockData = Provider.of<StockData>(context);
// 주식 정보 표시
}
}
위의 코드에서 StockData 클래스는 ChangeNotifier를 상속하여 상태를 관리한다. fetchAndSetData 메서드는 주식 정보를 가져와서 상태를 업데이트하고, notifyListeners를 호출하여 위젯에 상태 변경을 알린다.
결론
이제 플러터와 provider 라이브러리를 사용하여 주식 정보를 가져오고 상태를 관리하는 방법을 배웠다. 이를 응용하여 사용자 인터페이스에 주식 정보를 표시하는 등의 기능을 추가할 수 있다. 추가로 데이터를 저장하거나 보다 복잡한 상태 관리를 위해서는 provider 패키지의 다양한 기능을 참고하면 된다.
이상으로, 플러터와 provider를 사용하여 주식 정보를 가져오는 방법에 대해 알아보았다.