[flutter] Card 위젯을 이용한 게시판 화면 구성하기

12 Dec 2023

flutter

이번 포스트에서는 Flutter의 Card 위젯을 사용하여 간단한 게시판 화면을 구성하는 방법에 대해 알아보겠습니다.

1. Card 위젯 소개

Card 위젯은 Material Design의 일부로, 정보를 조직화하고 시각적으로 연결하며 사용자와 상호작용하기 위한 컨테이너입니다. Material Design의 그리드 시스템을 사용하여 일반적으로 웹에서 정보를 표시하는 데 유용하게 사용됩니다.

2. 게시판 화면 구성

게시판 화면은 여러 개의 카드로 구성될 것입니다. 각 카드에는 게시글의 제목, 내용, 작성자, 작성일 등이 표시될 것입니다. 이를 위하여 ListView 위젯을 사용하여 다수의 카드를 스크롤 가능한 목록으로 표시할 것입니다.

3. 완성된 코드

import 'package:flutter/material.dart';

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

class BulletinBoardApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bulletin Board',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bulletin Board'),
        ),
        body: ListView(
          children: <Widget>[
            Card(
              child: ListTile(
                title: Text('First Post'),
                subtitle: Text('Content of the first post'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('Second Post'),
                subtitle: Text('Content of the second post'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. 마치며

이렇게하여 여러 개의 Card 위젯을 사용하여 게시판 형식의 화면을 만들어보았습니다. Card 위젯은 정보를 시각적으로 보기 쉽게 구성하는 데 유용하며, Flutter의 여러 다른 위젯과 조합하여 다양한 화면을 만들 수 있습니다.

더 많은 Card 위젯의 사용 예시와 속성에 대해서는 Flutter 공식 문서를 참고하시기 바랍니다.

목차

1. Card 위젯 소개

2. 게시판 화면 구성

3. 완성된 코드

4. 마치며