[flutter] Card 위젯을 이용한 시험 일정 관리 앱 화면 구성하기

12 Dec 2023

flutter

Flutter를 이용하여 시험 일정 관리 앱을 구현하려면, 화면에 시험 일정을 나타내는 카드 형태의 UI가 필요합니다. 이번 글에서는 Flutter의 Card 위젯을 사용하여 시험 일정을 카드 형태로 화면에 구성하는 방법을 소개하겠습니다.

2. Card 위젯

Flutter의 Card 위젯은 그림자 효과와 둥근 꼭지 모양 등을 가진 일종의 표면이며, 주로 정보를 나타내거나 사용자 입력을 받는 인터페이스 요소로 사용됩니다.

아래는 Card 위젯을 생성하는 간단한 예제 코드입니다.

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        title: Text('시험 일정'),
        subtitle: Text('2022년 6월 15일 오후 2시'),
      ),
      ButtonBar(
        children: <Widget>[
          FlatButton(
            child: Text('수정'),
            onPressed: () { /* 수정 버튼 동작 */ },
          ),
          FlatButton(
            child: Text('삭제'),
            onPressed: () { /* 삭제 버튼 동작 */ },
          ),
        ],
      ),
    ],
  ),
)

3. 시험 일정 관리 앱 화면 구성

이제 위의 예제 코드를 활용하여 시험 일정 관리 앱의 화면을 구성해보겠습니다. 시험 일정이 표시되는 각각의 카드는 ListView나 GridView와 같은 리스트 뷰 위젯을 사용하여 화면에 배치될 수 있습니다.

아래는 시험 일정을 나타내는 카드들을 리스트 뷰로 표시하는 예제 코드입니다.

ListView(
  children: <Widget>[
    Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text('시험 일정'),
            subtitle: Text('2022년 6월 15일 오후 2시'),
          ),
          ButtonBar(
            children: <Widget>[
              FlatButton(
                child: Text('수정'),
                onPressed: () { /* 수정 버튼 동작 */ },
              ),
              FlatButton(
                child: Text('삭제'),
                onPressed: () { /* 삭제 버튼 동작 */ },
              ),
            ],
          ),
        ],
      ),
    ),
    // 다른 시험 일정 카드들...
  ],
)

4. 마무리

이렇게 Card 위젯을 활용하여 Flutter 앱에서 시험 일정을 나타내는 카드 UI를 구성할 수 있습니다. 이를 바탕으로 시험 일정 관리 앱의 화면을 구현할 수 있을 것입니다.

Flutter 공식 문서에 자세한 내용이 담겨 있으니 참고하시기 바랍니다.

Flutter 공식 문서: https://flutter.dev/docs

이상으로 Flutter를 이용한 시험 일정 관리 앱 화면 구성에 대해 알아보았습니다. 혹시 추가 질문이 있으시다면 언제든지 문의해 주세요.

목차

1. 개요

2. Card 위젯

3. 시험 일정 관리 앱 화면 구성

4. 마무리