목차
소개
이번 블로그 포스트에서는 플러터(expandable) 패키지를 사용하여 건강 및 운동 트래커 앱을 개발하는 방법을 알아보겠습니다. expandable 패키지를 사용하면 사용자가 원하는 섹션을 펼치거나 접을 수 있는 확장 가능한 위젯을 쉽게 만들 수 있습니다. 이를 활용하여 앱의 사용자 인터페이스를 보다 편리하고 유연하게 구성할 수 있습니다.
설치 및 설정
플러터를 이용하여 개발을 시작하기 위해선 먼저 Flutter SDK를 설치해야 합니다. Flutter SDK의 설치 및 설정 방법은 공식 문서를 참고하시면 됩니다.
플러터(expandable) 패키지 설치
expandable 패키지를 사용하기 위해서는 pubspec.yaml 파일에 패키지의 의존성을 추가해야 합니다. 아래의 코드를 pubspec.yaml 파일에 추가해주세요.
dependencies:
expandable: ^5.0.0
의존성을 추가한 후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.
앱 개발
이제 앱을 개발하는 단계로 들어갑니다. 먼저, main.dart 파일을 열고 아래의 코드로 시작합니다.
import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Health & Fitness Tracker"),
),
body: ListView(
children: [
ExpandablePanel(
header: Text("운동 기록",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
collapsed: Text(
"오늘의 운동 기록을 확인하세요.",
softWrap: true,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
expanded: Text(
"월수금은 전신 운동을, 화목토는 유산소 운동을 할 예정입니다.",
softWrap: true,
),
),
ExpandablePanel(
header: Text("식단 기록",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
collapsed: Text(
"하루의 식단 기록을 확인하세요.",
softWrap: true,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
expanded: Text(
"오늘은 과일과 채소를 많이 섭취할 예정입니다.",
softWrap: true,
),
),
],
),
);
}
}
위의 코드에서는 expandable 패키지를 사용하여 ExpandablePanel 위젯을 구현하였습니다. header 속성에는 섹션의 타이틀을, collapsed 속성에는 섹션을 접었을 때 보여줄 내용을, expanded 속성에는 섹션을 펼쳤을 때 보여줄 내용을 설정합니다.
결론
이렇게 해서 플러터(expandable) 패키지를 사용하여 건강 및 운동 트래커 앱을 개발하는 방법에 대해 알아보았습니다. expandable 패키지를 사용하면 앱의 사용자 인터페이스를 보다 효율적으로 구성할 수 있으며, 사용자에게 더욱 편리한 경험을 제공할 수 있습니다.
더 많은 정보와 예제는 공식 문서를 참고하시기 바랍니다.