[flutter] 플러터 앱에서 sticky 헤더를 사용한 주식 시세 앱 만들기

30 Nov 2023

flutter

안녕하세요! 이번에는 플러터 앱에서 sticky 헤더를 사용하여 주식 시세 앱을 만드는 방법에 대해 알아보겠습니다. sticky 헤더란 앱 화면 상단에 고정된 헤더를 뜻합니다. 이를 활용하면 사용자가 화면을 스크롤해도 헤더가 항상 보이도록 할 수 있습니다.

1. 프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 의존성을 설정합니다. 이를 위해서는 Flutter SDK와 Dart 설치가 필요합니다.

$ flutter create stock_market_app
$ cd stock_market_app

pubspec.yaml 파일에 다음과 같이 sticky_headers 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.1.8

의존성을 업데이트하려면 다음 명령어를 실행합니다.

$ flutter pub get

2. Sticky 헤더 위젯 추가

sticky_headers 패키지를 사용하여 sticky 헤더를 구현할 수 있습니다. 먼저, main.dart 파일을 열고 StickyHeader 위젯을 추가합니다. StickyHeader는 ListView의 항목을 감싸는 컨테이너로 사용됩니다.

import 'package:sticky_headers/sticky_headers.dart';

class StockMarketApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Stock Market App'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index){
          // 주식 시세 항목 위젯 구현
        },
        itemCount: 10,
      )
    );
  }
}

3. 주식 시세 데이터 가져오기

주식 시세 데이터를 가져오기 위해 http 패키지를 사용합니다. pubspec.yaml에 의존성을 추가하고 의존성을 업데이트합니다.

dependencies:
  http: ^0.13.3

$ flutter pub get

main.dart 파일에 다음과 같이 http 패키지를 import하고 API 요청을 추가합니다.

import 'package:http/http.dart' as http;
import 'dart:convert';

class StockMarketApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      // 생략

      body: FutureBuilder<List<Stock>>(
        future: _fetchStockData(),
        builder: (context, snapshot){
          if(snapshot.hasData){
            // 주식 시세 데이터 활용
          } else if(snapshot.hasError){
            return Text('Error: ${snapshot.error}');
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }

  Future<List<Stock>> _fetchStockData() async {
    final response = await http.get(Uri.parse('https://api.example.com/stocks'));
    if(response.statusCode == 200){
      List<dynamic> data = jsonDecode(response.body);
      List<Stock> stocks = data.map((e) => Stock.fromJson(e)).toList();
      return stocks;
    } else {
      throw Exception('Failed to fetch stock data');
    }
  }
}

4. UI 디자인 및 데이터 표시

이제 UI를 디자인하고 주식 시세 데이터를 표시해보겠습니다. StickyHeader를 ListView.builder의 itemBuilder에서 반환하는 위젯으로 사용하여 sticky 헤더를 구현합니다.

Widget build(BuildContext context){
  // 생략

  body: ListView.builder(
    itemBuilder: (context, index){
      if(index == 0){
        return StickyHeader(
          header: Container(
            height: 50,
            color: Colors.blue,
            alignment: Alignment.centerLeft,
            child: Text(
              'Today',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          content: Container(
            height: 100,
            // 주식 시세 데이터 활용
          ),
        );
      } else {
        // 다음 날의 데이터 표시
      }
    },
    itemCount: stocks.length + 1,
  ),
}

5. 마무리 및 참고 자료

이제 플러터 앱에서 sticky 헤더를 사용하여 주식 시세 앱을 구현하는 방법에 대해 알아보았습니다. 이를 활용하여 보다 유연하고 사용자 친화적인 앱을 개발할 수 있습니다.

더 자세한 내용은 sticky_headers 패키지의 공식 문서를 참고하시기 바랍니다.

해당 코드는 GitHub 레포지토리에서 확인하실 수 있습니다.

목차

1. 프로젝트 설정

2. Sticky 헤더 위젯 추가

3. 주식 시세 데이터 가져오기

4. UI 디자인 및 데이터 표시

5. 마무리 및 참고 자료