[flutter] 플러터 Column을 사용한 알람 기능 구현하기

20 Dec 2023

flutter

플러터(Flutter)를 사용하여 간단한 알람 기능을 구현해 보겠습니다. 이를 위해 Column 위젯을 사용하여 시간 선택과 알람 설정 기능을 구현할 것입니다.

목표

Column을 사용하여 시간 선택 UI를 만들기
알람 설정 기능 추가하기
각 요소들을 효과적으로 정렬하기

Column이란?

Column은 세로 방향으로 위젯을 배치하는 데 사용되는 플러터의 레이아웃 위젯입니다.

필요한 위젯

Column: 세로 방향으로 위젯을 배치하는 데 사용
ListTile: 목록 항목을 간편하게 만들어주는 위젯
TimePicker: 시간을 선택할 수 있는 위젯
RaisedButton: 눌렀을 때 특정 작업을 수행하는 버튼을 만드는 위젯

구현

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('알람 설정'),
        ),
        body: AlarmScreen(),
      ),
    );
  }
}

class AlarmScreen extends StatefulWidget {
  @override
  _AlarmScreenState createState() => _AlarmScreenState();
}

class _AlarmScreenState extends State<AlarmScreen> {
  TimeOfDay _selectedTime;

  @override
  void initState() {
    super.initState();
    _selectedTime = TimeOfDay.now();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ListTile(
          title: Text(
            '알람 시간',
            style: TextStyle(fontSize: 20),
          ),
          trailing: Text(
            '${_selectedTime.hour}:${_selectedTime.minute}',
            style: TextStyle(fontSize: 20),
          ),
          onTap: () {
            _pickTime(context);
          },
        ),
        RaisedButton(
          child: Text('알람 설정'),
          onPressed: () {
            _setAlarm();
          },
        ),
      ],
    );
  }

  Future<void> _pickTime(BuildContext context) async {
    final TimeOfDay time = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
    );

    if (time != null) {
      setState(() {
        _selectedTime = time;
      });
    }
  }

  void _setAlarm() {
    // 알람 설정 기능 구현
  }
}

결론

이제 위의 코드를 실행하면 알람 설정 화면이 나타납니다. 사용자는 ListTile을 터치하여 시간을 선택하고, RaisedButton을 터치하여 알람을 설정할 수 있습니다. Column을 사용하면 UI 요소들을 세로로 효과적으로 배치할 수 있습니다.

위 코드를 참고하여 본인만의 알람 설정 기능을 구현해 보세요!

참고: Flutter 공식 문서 - Column