[Flutter 트랙] 앱개발 종합반 2-14 - 대표적인 앱 위젯을 통해 화면 구성해보기

이번 시간부터 대표적인 앱 화면을 직접 플러터 위젯을 이용해 구성하는 실습을 진행합니다.

우리가 선택한 앱은 알람 앱과 스레드 앱입니다. 지난 시간에 분석했던 UI 구조를 바탕으로 화면을 구현해보겠습니다.

중요한 점은 클론 코딩이 아니라는 점입니다. 기능을 완전히 구현하는 것이 아니라 위젯을 배치하여 비슷한 화면을 구성하는 것이 목표입니다.

1. 프로젝트 생성하기

플러터 프로젝트를 생성하는 방법은 두 가지가 있습니다:

• 터미널을 이용한 방법
• VS Code(또는 다른 IDE)를 이용한 방법

1-1. 터미널을 이용한 방법

# 터미널을 열고 아래 명령어 실행
flutter create alarm_app_sample
cd alarm_app_sample

이 명령어를 실행하면 alarm_app_sample이라는 폴더에 플러터 프로젝트가 생성됩니다.

1-2. VS Code를 이용한 방법

• VS Code 실행 후 Command Palette 열기 (Ctrl + P / Cmd + P).
• Flutter: New Project 선택.
• Application 선택 후, 프로젝트 저장 위치를 지정.
• 프로젝트 이름을 alarm_app_sample로 입력하고 생성.

⚠️ 만약 오류가 발생하면 Flutter SDK 경로가 올바르게 설정되었는지 확인해야 합니다.

2. 프로젝트 파일 열기 및 설정

• 생성된 프로젝트를 VS Code에서 열기.
• 보안 경고가 나오면 Trust 선택.
• 우측의 불필요한 오류 메시지는 무시하고 Dismiss 선택.
• lib/main.dart 파일을 열어 프로젝트 기본 코드를 확인.

3. 알람 앱 화면 구성

지난 시간에 분석한 UI를 토대로 알람 앱의 홈 화면을 구성합니다.

• Scaffold: 전체 레이아웃 구조 설정.
• AppBar: 상단 제목과 추가 버튼.
• SingleChildScrollView + Column: 알람 목록을 세로로 배치.
• Row: 알람 시간과 스위치를 가로 정렬.
• Divider: 알람 목록을 구분.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AlarmScreen(),
    );
  }
}

class AlarmScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("알람"),
        actions: [IconButton(icon: Icon(Icons.add), onPressed: () {})],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            AlarmTile(time: "07:00 AM", isOn: true),
            Divider(),
            AlarmTile(time: "08:30 AM", isOn: false),
            Divider(),
            AlarmTile(time: "10:00 AM", isOn: true),
          ],
        ),
      ),
    );
  }
}

class AlarmTile extends StatelessWidget {
  final String time;
  final bool isOn;

  AlarmTile({required this.time, required this.isOn});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(time, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
              Text("매일 반복", style: TextStyle(fontSize: 16, color: Colors.grey)),
            ],
          ),
          Switch(value: isOn, onChanged: (bool value) {}),
        ],
      ),
    );
  }
}

➡️ 위의 코드로 알람 앱의 기본적인 화면을 구성할 수 있습니다.

4. 스레드 앱 화면 구성

스레드 앱의 홈 화면도 비슷한 방식으로 구성됩니다:

• ListView: 피드를 스크롤 가능하게 설정.
• AppBar: 상단 제목과 버튼.
• Row: 프로필, 닉네임, 게시글 등을 가로 정렬.
• Column: 닉네임과 게시글을 세로로 정렬.
• Divider: 피드 구분.

import 'package:flutter/material.dart';

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

class ThreadApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ThreadScreen(),
    );
  }
}

class ThreadScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Threads"),
        actions: [IconButton(icon: Icon(Icons.add), onPressed: () {})],
      ),
      body: ListView(
        children: [
          ThreadTile(
            avatar: "https://via.placeholder.com/50",
            username: "사용자1",
            content: "이것은 스레드 테스트입니다!",
          ),
          Divider(),
          ThreadTile(
            avatar: "https://via.placeholder.com/50",
            username: "사용자2",
            content: "새로운 소셜 미디어 경험을 제공합니다.",
          ),
          Divider(),
        ],
      ),
    );
  }
}

class ThreadTile extends StatelessWidget {
  final String avatar;
  final String username;
  final String content;

  ThreadTile({required this.avatar, required this.username, required this.content});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
      child: Row(
        children: [
          CircleAvatar(
            backgroundImage: NetworkImage(avatar),
            radius: 25,
          ),
          SizedBox(width: 10),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(username, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
              SizedBox(height: 5),
              Text(content, style: TextStyle(fontSize: 14)),
            ],
          ),
        ],
      ),
    );
  }
}

➡️ 위의 코드로 스레드 앱의 기본 피드 화면을 구현할 수 있습니다.

5. 결론

• 알람 앱과 스레드 앱의 홈 화면을 플러터 위젯을 이용해 구성.
• Scaffold, AppBar, ListView, Column, Row, Divider 등 기본 위젯을 활용.
• 앞으로 계속해서 화면을 세분화하고 기능을 추가하는 실습을 진행.

➡️ 다음 시간에는 이 앱들에 추가적인 기능과 애니메이션을 적용하는 방법을 살펴보겠습니다.