[flutter] 플러터(expandable)을 이용한 소셜 미디어 관리 및 스케줄링 앱 개발 방법

04 Dec 2023

flutter

소개

이번 포스트에서는 플러터(expandable)을 이용하여 소셜 미디어 관리 및 스케줄링 앱을 개발하는 방법에 대해 알아보겠습니다.

환경 설정

먼저, 개발을 위해 다음과 같은 환경을 설정해야 합니다:

Flutter SDK
텍스트 편집기 (예: Visual Studio Code)

프로젝트 생성

Flutter SDK가 설치되었다면, 터미널에서 다음 명령어를 실행하여 새로운 Flutter 프로젝트를 생성합니다:

flutter create social_app

프로젝트 폴더로 이동합니다:

cd social_app

생성된 프로젝트를 에디터로 엽니다:

code .

UI 설계

앱의 UI를 설계하기 위해 다음과 같은 패키지를 사용합니다:

expandable 패키지: 접혀진 상태에서 확장 가능한 위젯을 제공합니다.

다음과 같은 UI 요소를 포함하는 화면을 설계해보겠습니다:

상단의 앱 로고
소셜 미디어 계정 목록 (확장 가능한 리스트 형태)
스케줄링된 게시물 목록 (확장 가능한 리스트 형태)

화면 구성

lib/main.dart 파일을 열고, 다음 코드로 기본 앱 구조를 작성합니다:

import 'package:flutter/material.dart';

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

class SocialApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Social App',
         home: HomePage(),
      );
   }
}

class HomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text('Social App'),
         ),
         body: ListView(
            children: [
               // 앱 로고
               Container(
                  // 로고 이미지 추가
               ),
               // 소셜 미디어 계정 목록
               ExpandablePanel(
                  header: Text('소셜 미디어 계정'),
                  expanded: _buildSocialMediaAccounts(),
               ),
               // 스케줄링된 게시물 목록
               ExpandablePanel(
                  header: Text('스케줄링된 게시물'),
                  expanded: _buildScheduledPosts(),
               ),
            ],
         ),
      );
   }

   Widget _buildSocialMediaAccounts() {
      // 소셜 미디어 계정 목록을 반환하는 코드 작성
   }

   Widget _buildScheduledPosts() {
      // 스케줄링된 게시물 목록을 반환하는 코드 작성
   }
}

pubspec.yaml 파일에 expandable 패키지를 추가합니다:

dependencies:
   flutter:
      sdk: flutter
   expandable: ^5.0.1

터미널에서 다음 명령어를 실행하여 패키지를 다운로드합니다:

flutter packages get

소셜 미디어 계정 목록

lib/main.dart 파일에 다음 코드로 buildSocialMediaAccounts 메서드를 작성합니다:

Widget _buildSocialMediaAccounts() {
   return ListView(
      children: [
         ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('Instagram'),
         ),
         ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('Twitter'),
         ),
         ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('Facebook'),
         ),
      ],
   );
}

화면에서 // 소셜 미디어 계정 목록 주석 부분을 _buildSocialMediaAccounts() 메서드를 호출하는 코드로 변경합니다.

스케줄링된 게시물 목록

lib/main.dart 파일에 다음 코드로 buildScheduledPosts 메서드를 작성합니다:

Widget _buildScheduledPosts() {
   return ListView(
      children: [
         ListTile(
            leading: Icon(Icons.calendar_today),
            title: Text('2022-01-10'),
         ),
         ListTile(
            leading: Icon(Icons.calendar_today),
            title: Text('2022-01-15'),
         ),
         ListTile(
            leading: Icon(Icons.calendar_today),
            title: Text('2022-01-20'),
         ),
      ],
   );
}

화면에서 // 스케줄링된 게시물 목록 주석 부분을 _buildScheduledPosts() 메서드를 호출하는 코드로 변경합니다.

실행

디바이스 또는 시뮬레이터를 선택하고 다음 명령어를 실행하여 앱을 실행합니다:

flutter run

앱이 성공적으로 실행되면, 소셜 미디어 계정 목록과 스케줄링된 게시물 목록이 표시되는 것을 확인할 수 있습니다.

결론

이번 포스트에서는 플러터(expandable)을 사용하여 소셜 미디어 관리 및 스케줄링 앱을 개발하는 방법에 대해 알아보았습니다. 이를 기반으로 더 많은 기능을 추가하여 완성도 높은 앱을 개발할 수 있습니다.