[flutter] 플러터(expandable)을 이용한 건강 및 피트니스 앱 개발 방법

04 Dec 2023

flutter

안녕하세요! 오늘은 플러터를 사용하여 건강 및 피트니스 앱을 만드는 방법에 대해 알아보겠습니다. 이 앱은 사용자에게 운동 루틴, 식단 추천, 운동 기록 등을 제공하고 다양한 피트니스 관련 정보를 보여줍니다. 또한, expandable 위젯을 활용하여 앱의 사용성을 향상시킬 것입니다.

1. 플러터 프로젝트 생성

먼저, 플러터 프로젝트를 생성합니다. 터미널 창에서 다음 명령어를 실행하여 새로운 플러터 프로젝트를 생성합니다.

flutter create health_fitness_app

2. 필요한 패키지 추가

이 앱에서는 expandable 패키지를 사용할 예정입니다. pubspec.yaml 파일에 다음과 같이 expandable 패키지를 추가해 주세요.

dependencies:
  flutter:
    sdk: flutter
  expandable: ^5.0.1

그리고 다음 명령어를 터미널에서 실행하여 패키지를 가져옵니다.

flutter pub get

3. 화면 UI 설계

이제 앱의 화면을 설계해 보겠습니다. 전체 앱은 여러 개의 화면으로 구성됩니다. 메인 홈 화면, 운동 루틴 화면, 식단 추천 화면 등이 있을 수 있습니다.

하나의 예시로 메인 홈 화면을 설계해 보겠습니다. lib 폴더 안에 screens 폴더를 생성하고, home_screen.dart 파일을 생성합니다.

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('건강 및 피트니스 앱'),
      ),
      body: ListView(
        children: [
          ExpandablePanel(
            header: Text('운동 루틴', style: TextStyle(fontSize: 18)),
            collapsed: Text('여기에 운동 루틴 요약이 표시됩니다.'),
            expanded: Text('여기에 전체 운동 루틴이 표시됩니다.'),
          ),
          ExpandablePanel(
            header: Text('식단 추천', style: TextStyle(fontSize: 18)),
            collapsed: Text('여기에 식단 추천 요약이 표시됩니다.'),
            expanded: Text('여기에 전체 식단 추천이 표시됩니다.'),
          ),
        ],
      ),
    );
  }
}

4. 앱 실행 및 확인

이제 플러터 앱을 실행하여 메인 홈 화면을 확인해 보세요. main.dart 파일을 열고 다음과 같이 수정합니다.

import 'package:flutter/material.dart';
import 'package:health_fitness_app/screens/home_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '건강 및 피트니스 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

플러터 앱을 실행하기 위해 다음 명령어를 터미널에서 실행합니다.

flutter run

앱은 에뮬레이터 또는 실제 기기에서 실행될 것입니다. 메인 홈 화면에서는 운동 루틴과 식단 추천이 expandable 위젯으로 구현되어 있습니다.

5. 추가 기능 및 화면 구현

위 예시와 같은 방식으로 다른 기능과 화면을 추가할 수 있습니다. 예를 들어, 운동 기록 화면이나 피트니스 정보 제공 화면 등을 추가할 수 있습니다. 필요한 기능과 UI 설계를 하고 구현해 보세요.

마무리

이번에는 플러터(expandable)을 사용하여 건강 및 피트니스 앱을 개발하는 방법에 대해 알아보았습니다. expandable 패키지를 활용하여 사용자에게 더 편리한 앱을 제공할 수 있습니다. 추가로 필요한 기능들을 구현하여 앱을 완성해 보세요. 플러터를 사용하여 다양한 앱을 개발할 수 있습니다. 즐거운 개발되시기 바랍니다!

참고 링크:

Flutter: https://flutter.dev/
샘플 코드: GitHub Repository