[flutter] Card 위젯을 이용한 일기장 화면 구성하기

12 Dec 2023

flutter

Flutter 앱을 개발할 때 Card 위젯을 사용하여 일기장 앱의 각 항목을 표시하는 멋진 UI를 만들 수 있습니다. 이 블로그 포스트에서는 Flutter의 Card 위젯을 사용하여 일기장 앱의 화면을 구성하는 방법에 대해 알아보겠습니다.

1. 프로젝트 설정하기

먼저 Flutter 프로젝트를 생성하고 필요한 의존성을 추가합니다.

flutter create diary_app
cd diary_app

pubspec.yaml 파일에 다음과 같이 flutter/material.dart 패키지를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

의존성을 추가한 후 패키지를 설치합니다:

flutter pub get

2. Card 위젯으로 화면 구성하기

다음으로, 일기장 앱의 화면을 구성하기 위해 Card 위젯을 사용합니다. 예를 들어, 일기 목록을 표시하는 화면을 구성하려면 다음과 같이 Card 위젯을 사용할 수 있습니다:

import 'package:flutter/material.dart';

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

class DiaryApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('나의 일기장'),
        ),
        body: ListView(
          children: <Widget>[
            Card(
              child: ListTile(
                title: Text('2022년 10월 10일'),
                subtitle: Text('오늘은 행복한 하루였다.'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('2022년 10월 9일'),
                subtitle: Text('비가 와서 우울했지만, 친구들과 함께해서 즐거웠다.'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 예제에서는 Card와 ListTile을 사용하여 각 일기 항목을 표시하고 있습니다.

3. 화면 디자인 및 기능 추가하기

Card 위젯을 사용하여 일기장 앱의 화면을 구성한 후, 필요에 따라 디자인을 개선하고 추가 기능을 구현할 수 있습니다. 예를 들어, 각 Card를 탭하여 상세 일기 내용을 보여주는 기능을 추가한다거나, 일기를 추가하거나 삭제하는 기능을 구현할 수 있습니다.

결론

Flutter의 Card 위젯을 활용하여 간단하게 일기장 앱의 화면을 구성하는 방법에 대해 알아보았습니다. Card 위젯은 간편하게 사용할 수 있으며, 다양한 디자인 및 기능을 추가하여 더욱 멋진 일기장 앱을 만들 수 있습니다.

더 많은 정보와 예제 코드는 Flutter 공식 문서에서 확인할 수 있습니다.