플러터(Flutter)를 사용하여 소셜 미디어 피드 앱을 구현하는 방법을 알아보겠습니다. 이 앱은 스크롤 가능한 피드를 표시하고, 상단에 스티키(sticky) 헤더를 추가하는 기능을 가지고 있습니다.
1. 플러터 프로젝트 생성하기
먼저 플러터 프로젝트를 생성하고 기본 틀을 구성합니다. 다음 명령어를 사용하여 플러터 프로젝트를 생성합니다.
$ flutter create sticky_header_feed_app
2. 의존성 추가하기
스티키 헤더를 구현하기 위해서는 sticky_headers 패키지를 사용해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.
dependencies:
flutter:
sdk: flutter
sticky_headers: ^0.2.0
의존성을 추가한 후에는 flutter packages get 명령어를 실행하여 패키지를 가져옵니다.
3. 피드 아이템과 헤더 위젯 구성하기
이제 피드 아이템과 헤더 위젯을 구성해보겠습니다. main.dart 파일에 다음 코드를 추가합니다.
import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';
void main() => runApp(StickyHeaderApp());
class StickyHeaderApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sticky Header Feed App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: StickyHeaderFeedPage(),
);
}
}
class StickyHeaderFeedPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sticky Header Feed App'),
),
body: ListView.builder(
itemCount: 30,
itemBuilder: (BuildContext context, int index) {
return StickyHeader(
header: Container(
height: 50,
color: Colors.grey.shade200,
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Text(
'Header ${index~/10 + 1}',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
content: Container(
padding: EdgeInsets.all(20),
height: 200,
child: Text('Content ${index + 1}'),
),
);
},
),
);
}
}
위 코드에서 StickyHeader 위젯은 각각의 피드 아이템에 헤더를 추가합니다. header 속성에는 헤더 위젯을, content 속성에는 피드 아이템의 내용을 추가합니다. 이를 ListView.builder를 사용하여 스크롤 가능한 피드로 구성합니다.
4. 앱 실행하기
이제 앱을 실행해보겠습니다. 플러터 프로젝트의 루트 디렉토리에서 다음 명령어를 실행합니다.
$ flutter run
앱이 성공적으로 빌드되고 실행되면 피드 아이템과 스티키 헤더가 표시될 것입니다.
결론
위의 단계를 따라하면 플러터를 사용하여 스티키 헤더를 가진 소셜 미디어 피드 앱을 구현할 수 있습니다. sticky_headers 패키지를 사용하여 간단하게 헤더를 추가할 수 있으며, 사용자에게 높은 사용성을 제공할 수 있습니다. 추가적인 기능을 구현하여 앱을 더욱 향상시킬 수 있습니다.
참고 자료