[flutter] 플러터에서 sticky 헤더를 사용한 서적 목록 앱 디자인하기

30 Nov 2023

flutter

플러터(Flutter)는 크로스 플랫폼 모바일 앱 개발을 위한 강력한 프레임워크로, 다양한 디자인과 기능을 구현할 수 있습니다. 이번에는 플러터를 사용하여 sticky 헤더를 가진 서적 목록 앱을 디자인하는 방법에 대해 알아보겠습니다.

1. 초기 설정

먼저, 플러터 프로젝트를 생성하고 필요한 의존성을 추가해주세요. pubspec.yaml 파일에 다음 의존성을 추가해줍니다.

dependencies:
  flutter_sticky_header: ^0.5.4

이후 터미널에서 flutter pub get을 실행하여 의존성을 설치합니다.

다음으로, sticky 헤더를 구현하기 위해 flutter_sticky_header 패키지를 사용합니다. lib 폴더 안에 book_list_page.dart 파일을 생성하고 다음 코드를 추가합니다.

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

class BookListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('서적 목록'),
      ),
      body: CustomScrollView(
        slivers: [
          SliverStickyHeader(
            header: Container(
              height: 60,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                'Best Sellers',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('책 제목'),
                  subtitle: Text('작가'),
                  leading: Icon(Icons.book),
                  trailing: Icon(Icons.favorite_border),
                ),
                childCount: 10,
              ),
            ),
          ),
          SliverStickyHeader(
            header: Container(
              height: 60,
              color: Colors.orange,
              alignment: Alignment.center,
              child: Text(
                'New Releases',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('책 제목'),
                  subtitle: Text('작가'),
                  leading: Icon(Icons.book),
                  trailing: Icon(Icons.favorite_border),
                ),
                childCount: 10,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드는 CustomScrollView 위젯을 사용하여 스크롤 가능한 목록을 구현하고, SliverStickyHeader 위젯을 사용하여 sticky 헤더를 추가하는 방법을 보여줍니다. 각 헤더는 Container를 사용하여 디자인되며, SliverList를 사용하여 목록을 표시합니다.

3. 화면 전환

마지막으로, main.dart 파일에서 BookListPage로의 화면 전환을 처리합니다. 다음 코드를 main.dart 파일에 추가해주세요.

import 'package:flutter/material.dart';
import 'package:example/book_list_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sticky Header Book List App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BookListPage(),
    );
  }
}

이제 앱을 실행하면 sticky 헤더를 가진 서적 목록 앱이 동작하는 것을 확인할 수 있습니다.

결론

이번에는 플러터에서 sticky 헤더를 사용하여 서적 목록 앱을 디자인하는 방법에 대해 알아보았습니다. flutter_sticky_header 패키지를 사용하여 sticky 헤더를 구현하는 것은 간단하며, 다양한 디자인을 적용할 수 있습니다. 프로젝트에 적용하여 사용자 친화적인 앱을 개발해보세요!

참고: flutter_sticky_header 패키지
GitHub: 플러터 Sticky Header 앱 예제

1. 초기 설정

2. Sticky Header 위젯 추가

3. 화면 전환

결론