[flutter] 플러터 스택드 위젯에서 주식 시세 앱 만들기

15 Dec 2023

flutter

본 블로그 게시물에서는 플러터(Flutter)의 스택(Stack) 위젯을 사용하여 간단한 주식 시세 앱을 만드는 방법에 대해 알아보겠습니다.

목표

플러터의 Stack 위젯을 사용하여 UI를 구성한다.
외부 API를 이용하여 실시간 주식 시세를 가져온다.
가져온 주식 시세를 화면에 표시한다.

필요한 사전 지식

스택(Stack) 위젯

Stack 위젯은 위치 지정이 가능한 여러 위젯을 겹쳐서 쌓을 수 있는 위젯입니다. 이를 사용하여 주식 시세 앱의 UI를 구성할 것입니다.

Stack(
  children: <Widget>[
    // 하위 위젯들을 추가
    Positioned(
      top: 10.0,
      left: 10.0,
      child: Text('종목명'),
    ),
    Positioned(
      bottom: 10.0,
      right: 10.0,
      child: Text('가격'),
    ),
  ],
)

외부 API를 이용한 주식 시세 가져오기

주식 시세를 가져오기 위해서 외부의 주식 시세 API를 활용할 것입니다. 플러터에서는 http 패키지를 사용하여 API로부터 데이터를 가져올 수 있습니다.

var response = await http.get('https://api.example.com/stocks');
if (response.statusCode == 200) {
  // API로부터 데이터를 성공적으로 가져온 경우
  var data = json.decode(response.body);
  var stockPrice = data['price'];
} else {
  // API로부터 데이터를 가져오지 못한 경우
  throw Exception('Failed to load stock price');
}

UI에 주식 시세 표시하기

주식 시세를 가져온 후에는 이를 화면에 표시해야 합니다. 이를 위해 위에서 구성한 Stack 위젯 내에 주식 시세를 표시할 수 있습니다.

Stack(
  children: <Widget>[
    Positioned(
      top: 10.0,
      left: 10.0,
      child: Text('종목명'),
    ),
    Positioned(
      bottom: 10.0,
      right: 10.0,
      child: FutureBuilder(
        future: fetchStockPrice(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Text(snapshot.data);
          } else if (snapshot.hasError) {
            return Text('Error');
          }
          return CircularProgressIndicator();
        },
      ),
    ),
  ],
)

위 예제에서 FutureBuilder를 사용하여 비동기적으로 주식 시세를 가져와 화면에 표시합니다.

결론

위의 단계들을 따라가면 플러터의 Stack 위젯을 사용하여 간단한 주식 시세 앱을 만들 수 있습니다. 외부 API를 활용하고 비동기 처리를 통해 실시간 주식 시세를 가져와 사용자에게 보여줄 수 있습니다.

플러터 공식 문서를 참고하여 더 많은 기능들을 추가하여 완성도 높은 주식 시세 앱을 만들어보세요.