[flutter] 플러터에서 sticky 헤더를 사용한 신문 기사 목록 앱 구현하기

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 아름다운 인터페이스와 원활한 성능을 제공합니다. 이번 블로그 포스트에서는 플러터를 사용하여 Sticky 헤더를 가진 신문 기사 목록 앱을 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 패키지 설치

Sticky 헤더를 사용하기 위해 flutter_sticky_header 패키지를 설치해야 합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 다음 코드를 추가합니다.

dependencies:
  flutter_sticky_header: ^0.5.3

설치를 위해 터미널을 열고 다음 명령어를 실행합니다.

flutter pub get

2. 데이터 모델링

신문 기사 목록을 표시하기 위해 다음과 같은 데이터 모델을 사용합니다.

class Article {
  final String title;
  final String content;
  final String category;

  Article({required this.title, required this.content, required this.category});
}

3. 위젯 구성

플러터에서 Sticky 헤더를 사용하려면 StickyHeader 위젯을 사용해야 합니다. ListView.builder를 사용하여 신문 기사 목록을 만들고, ListView.builder의 itemBuilder 콜백 안에서 StickyHeader 위젯을 사용하여 Sticky 헤더를 만들 수 있습니다.

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

class NewsApp extends StatelessWidget {
  final List<Article> articles;

  NewsApp({required this.articles});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverStickyHeader(
          header: Container(
            height: 50,
            color: Colors.grey[300],
            child: Center(
              child: Text(
                'News Categories',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
          sliver: SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(
                  title: Text(articles[index].title),
                  subtitle: Text(articles[index].category),
                  onTap: () {
                    // 기사 상세 페이지로 이동
                    // TODO: 구현 필요
                  },
                );
              },
              childCount: articles.length,
            ),
          ),
        ),
      ],
    );
  }
}

4. 스크롤 동작 구현

NewsApp 위젯을 사용하기 위해 main.dart 파일을 열고 다음 코드를 작성합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(NewsApp());
}

class NewsApp extends StatelessWidget {
  final List<Article> articles = [
    Article(
      title: 'Article 1',
      content: 'Content 1',
      category: 'Category 1',
    ),
    ...
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('News App'),
        ),
        body: NewsApp(articles: articles),
      ),
    );
  }
}

위 코드에서는 NewsApp 위젯을 Scaffold 위젯의 body 속성으로 사용하여 앱의 내용을 표시합니다. 또한 앱 바(App Bar)를 설정하고, 데이터를 제공하기 위해 articles 리스트를 사용합니다.

5. 완성된 앱 실행

모든 코드 작성을 완료했다면, 터미널에서 다음 명령어를 실행하여 앱을 실행합니다.

flutter run

플러터의 Hot Reload 기능을 통해 소스 코드를 수정하고 즉시 결과를 확인할 수 있습니다. Sticky 헤더를 가진 신문 기사 목록 앱이 정상적으로 실행되는지 확인하세요.

이제 플러터를 사용하여 Sticky 헤더를 가진 신문 기사 목록 앱을 구현하는 방법에 대해 알아보았습니다. 이것은 플러터의 강력한 UI 라이브러리와 쉬운 사용법으로 구현할 수 있는 예제입니다.

더 많은 플러터 관련 자료와 예제를 확인하려면 공식 플러터 웹사이트를 참조하세요. Happy coding!

목차

1. 필요한 패키지 설치

2. 데이터 모델링

3. 위젯 구성

4. 스크롤 동작 구현

5. 완성된 앱 실행