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

12 Dec 2023

flutter

Flutter를 사용하여 간단한 메모장 앱을 만들고 싶다면, Card 위젯을 활용하여 각각의 메모를 나타내는 카드 형식의 UI를 만들 수 있습니다. 이 글에서는 Card 위젯을 사용하여 메모를 표시하는 화면을 만드는 방법에 대해 알아보겠습니다.

1. Card 위젯 생성

먼저, 메모를 보여줄 각각의 카드를 생성하기 위해 Card 위젯을 사용합니다. 아래의 예제는 Card 위젯을 사용하여 간단한 메모를 표시하는 방법을 보여줍니다.

import 'package:flutter/material.dart';

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

class MemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Memo App'),
        ),
        body: Center(
          child: Card(
            child: ListTile(
              title: Text('첫 번째 메모'),
              subtitle: Text('메모 내용'),
            ),
          ),
        ),
      ),
    );
  }
}

위 예제에서는, Card 위젯을 사용하여 간단한 메모를 포함하는 카드를 만들었습니다. ListTile을 사용하여 카드 내의 제목과 내용을 정의하였습니다.

2. 여러 개의 카드 생성

만약 여러 개의 메모를 표시하기 위해 카드를 여러 개 생성하려면 ListView.builder를 활용하여 카드를 동적으로 생성할 수 있습니다. 다음은 ListView.builder를 사용하여 여러 개의 메모를 표시하는 예제입니다.

class MemoApp extends StatelessWidget {
  final List<String> memos = ['첫 번째 메모', '두 번째 메모', '세 번째 메모'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Memo App'),
        ),
        body: ListView.builder(
          itemCount: memos.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: ListTile(
                title: Text(memos[index]),
                subtitle: Text('메모 내용'),
              ),
            );
          },
        ),
      ),
    );
  }
}

위 예제에서는, ListView.builder를 사용하여 memos 리스트의 각 항목을 반복하여 카드를 생성하였습니다.

위의 예제를 따라하면 Flutter 앱에서 Card 위젯을 활용하여 간단한 메모장 UI를 만들 수 있습니다. 이를 통해 사용자가 메모를 편리하게 작성하고 관리할 수 있는 앱을 구현할 수 있을 것입니다.