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

이번 시간에는 알람 앱의 대표적인 위젯을 이용하여 화면을 구성해보겠습니다.

지난 시간에 기획한 UI를 기반으로 실제 플러터 코드를 작성하고, 레이아웃을 조정하면서 화면을 완성하는 과정입니다.

1. 프로젝트 파일 생성 및 초기화

• main.dart 파일을 초기화하고, 홈 화면을 호출하는 Home 위젯을 생성합니다.
• lib 폴더 내에 home.dart 파일을 새로 만들고, 기본적인 위젯 구조를 설정합니다.

2. 에뮬레이터 실행 및 디버깅 설정

• 플러터 에뮬레이터 또는 실제 디바이스를 연결하여 앱을 실행합니다.
• 디버깅 실행 방법: Start Debugging 또는 Run Without Debugging 중 선택하여 실행.
• 디버깅을 통해 실시간 코드 변경을 반영하고, 레이아웃 조정이 가능.

3. 테마 설정

• 플러터 앱의 전체적인 스타일을 지정합니다.
• 다크 모드 설정을 기본값으로 사용.
• Scaffold, AppBar, TextTheme 등의 스타일을 지정.

MaterialApp(
  theme: ThemeData(
    scaffoldBackgroundColor: Colors.black,
    textTheme: TextTheme(
      bodyMedium: TextStyle(color: Colors.white),
    ),
  ),
);

4. 헤더 영역 구성

• 앱의 상단에 위치하는 AppBar를 구성.
• 제스처 디텍터를 사용하여 제목과 버튼을 클릭할 수 있도록 설정.
• 앱 내에서 사용할 이미지 파일을 assets 폴더에 추가하고 pubspec.yaml에서 경로를 등록.

AppBar(
  title: Center(child: Text("알람")),
  actions: [
    Padding(
      padding: EdgeInsets.only(right: 15),
      child: GestureDetector(
        onTap: () {},
        child: Image.asset("assets/images/icon_add.png"),
      ),
    ),
  ],
);

5. 기상 알람 영역 구성

• 메인 알람을 표시하는 WakeUpAlarm 위젯을 생성.
• 컬럼(Column)과 패딩(Padding)을 사용하여 정렬.
• 사이즈 박스를 활용해 요소 간의 간격 조정.
• 제스처 디텍터를 적용하여 터치 가능한 버튼 구성.

Container(
  padding: EdgeInsets.symmetric(horizontal: 10),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text("기상 알람", style: TextStyle(fontSize: 18)),
      SizedBox(height: 10),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("오전 7:00", style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
          GestureDetector(
            onTap: () {},
            child: Container(
              padding: EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: Colors.grey[800],
                borderRadius: BorderRadius.circular(20),
              ),
              child: Text("변경", style: TextStyle(color: Colors.white)),
            ),
          ),
        ],
      ),
    ],
  ),
);

6. 기타 알람 영역 구성

• 추가적인 알람 리스트를 컬럼과 리스트로 구성.
• 각 알람 항목을 반복적으로 생성하기 위해 List.generate() 사용.
• 스위치(Switch)를 추가하여 알람 활성화/비활성화 기능 제공.

Column(
  children: List.generate(5, (index) => AlarmTile(time: "오전 6:${index}0", isOn: index.isEven)),
);

7. 알람 리스트 구성

• 알람 항목을 나타내는 AlarmTile 위젯을 생성.
• 로우(Row)와 컬럼(Column)을 조합하여 시간, 스위치 버튼을 정렬.
• 리스트 뷰 안에서 반복적으로 사용할 수 있도록 설계.

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: [
          Text(time, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
          Switch(value: isOn, onChanged: (bool value) {}),
        ],
      ),
    );
  }
}

8. 최종 결과

• 알람 앱의 홈 화면이 완성됨.
• 헤더, 기상 알람, 기타 알람 리스트가 정상적으로 배치됨.
• UI 요소 간 정렬과 터치 이벤트가 정상 동작함.

9. 마무리 및 다음 과정

• 다음 시간에는 스레드 앱의 홈 화면을 구성하는 실습을 진행.
• 리스트 뷰와 이미지 아바타, 피드 스타일링을 활용하여 UI 제작.
• 반복적인 패턴을 최적화하여 개발 속도를 향상시키는 연습을 진행.

이제 알람 앱의 기본 UI가 완성되었으며, 다음 시간에는 스레드 앱의 UI를 구성해보겠습니다.