[flutter] Card 위젯을 이용한 출석부 화면 구성하기

12 Dec 2023

flutter

출석부 앱을 만들 때, 개별 학생의 출석 정보를 나타내는 화면이 필요합니다. 이를 위해 Flutter의 Card 위젯을 사용하여 화면을 구성할 수 있습니다.

1. Card 위젯

Card 위젯은 일반적으로 정보를 표시하거나 작은 작업을 수행하는 데 사용됩니다. 각각의 Card는 그림자와 함께 둥근 모서리를 갖고 있어, 앱의 UI에 깔끔한 느낌을 줄 수 있습니다.

Card(
  child: Column(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.person),
        title: Text('학생 이름'),
        subtitle: Text('출석 상태'),
      ),
      ButtonBar(
        children: <Widget>[
          FlatButton(
            child: Text('출석 수정'),
            onPressed: () {/* 수정 기능 추가 */},
          ),
          FlatButton(
            child: Text('자세히 보기'),
            onPressed: () {/* 상세 정보 페이지 이동 */},
          ),
        ],
      ),
    ],
  ),
)

위 코드에서, 각 Card는 ListTile과 ButtonBar를 포함하고 있어, 학생의 이름, 출석 상태 및 관련 작업을 표시할 수 있습니다.

2. 출석부 화면에 Card 적용하기

학생들의 출석 정보를 Card로 나타내기 위해서, 출석부 화면을 ListView와 Card를 이용해서 구성할 수 있습니다.

ListView(
  children: <Widget>[
    Card(
      child: Column(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.person),
            title: Text('학생 1 이름'),
            subtitle: Text('출석 상태'),
          ),
          ButtonBar(
            children: <Widget>[
              FlatButton(
                child: Text('출석 수정'),
                onPressed: () {/* 수정 기능 추가 */},
              ),
              FlatButton(
                child: Text('자세히 보기'),
                onPressed: () {/* 상세 정보 페이지 이동 */},
              ),
            ],
          ),
        ],
      ),
    ),
    // 학생 2, 3, ...에 대한 Card 추가
  ],
)

위 코드에서, ListView를 사용하여 여러 학생의 Card를 스크롤 가능한 목록으로 구성할 수 있습니다.

이제, Card를 사용하여 학생들의 출석 정보를 보여주는 가장 기본적인 형태의 출석부 화면을 구성할 수 있습니다.

이제 Flutter의 Card 위젯을 활용하여 간단한 학생 출석부 화면을 구성하는 방법에 대해 알아보았습니다. Card 위젯은 앱의 UI를 더욱 더 보기 좋고 깔끔하게 만들어줄 수 있는 매우 유용한 도구입니다.

(이 포스트는 Flutter 공식 문서를 참고하여 작성되었습니다.)