[flutter] 플러터 sticky 헤더를 가진 글쓰기 도구 앱 만들기
플러터(Flutter)는 크로스 플랫폼 앱 개발 프레임워크로, 하나의 코드베이스로 안드로이드 및 iOS 앱을 작성할 수 있습니다. 이번 블로그 포스트에서는 플러터를 사용하여 Sticky 헤더를 가진 간단한 글쓰기 도구 앱을 만들어보겠습니다.
목표
- 플러터를 사용하여 Sticky 헤더를 가진 글쓰기 도구 앱을 구현한다.
- 사용자는 제목과 내용을 입력하고 저장할 수 있다.
- 글쓰기 화면을 스크롤하면 헤더가 화면 상단에 고정된다.
필요한 패키지
프로젝트를 시작하기 전에 다음 패키지를 pubspec.yaml 파일에 추가해야 합니다.
dependencies:
flutter_sticky_header: ^0.4.0
앱 구현
앱을 구현하기 위해 다음과 같은 순서로 작업을 진행합니다.
- 메인 화면에서 글쓰기 버튼을 누르면 글쓰기 화면으로 이동한다.
- 글쓰기 화면에서는 제목과 내용을 입력할 수 있는 텍스트 필드가 있다.
- 글쓰기 화면은 스크롤이 가능하며, 스크롤 시 Sticky 헤더가 화면 상단에 고정된다.
- 저장 버튼을 누르면 입력한 제목과 내용이 저장되고, 화면이 메인 화면으로 돌아간다.
코드 구현
메인 화면
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '글쓰기 도구',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MainPage(),
);
}
}
class MainPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('글쓰기 도구'),
),
body: Center(
child: RaisedButton(
child: Text('글쓰기'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => WritingPage()),
);
},
),
),
);
}
}
글쓰기 화면
import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
class WritingPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('글쓰기'),
),
body: CustomScrollView(
slivers: <Widget>[
SliverStickyHeader(
header: Container(
height: 60,
color: Colors.blue,
alignment: Alignment.center,
child: Text(
'헤더',
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
sliver: SliverList(
delegate: SliverChildListDelegate([
TextField(
decoration: InputDecoration(
hintText: '제목',
),
),
TextField(
maxLines: null,
decoration: InputDecoration(
hintText: '내용',
),
),
RaisedButton(
child: Text('저장'),
onPressed: () {
// 저장 로직 작성
Navigator.pop(context);
},
),
]),
),
),
],
),
);
}
}
위의 코드를 실행하면 메인 화면에서 “글쓰기” 버튼을 클릭하면 글쓰기 화면으로 이동하게 됩니다. 글쓰기 화면에서는 제목과 내용을 입력할 수 있고, 스크롤을 하면 헤더가 화면 상단에 고정됩니다. 저장 버튼을 누르면 입력한 제목과 내용이 저장되고, 메인 화면으로 돌아갑니다.
마무리
이번 포스트에서는 플러터(Flutter)를 사용하여 Sticky 헤더를 가진 글쓰기 도구 앱을 만들어보았습니다. 플러터의 간결한 코드와 다양한 위젯을 사용하면 다양한 앱을 쉽고 빠르게 개발할 수 있습니다. 플러터를 사용하여 여러분만의 멋진 앱을 만들어보세요!