[flutter] Card 위젯을 이용한 뉴스 피드 화면 구성하기

12 Dec 2023

flutter

Flutter를 사용하여 간단한 뉴스 피드 화면을 구성하는 방법에 대해 알아보겠습니다. Card 위젯을 사용하여 각각의 뉴스 항목을 표시하는 것을 목표로 하겠습니다.

기본 화면 구성

가장 먼저, Flutter 앱의 기본 구조를 설정해야 합니다. MaterialApp 위젯을 사용하여 앱의 기본적인 틀을 만들고, Scaffold 위젯을 사용하여 앱의 기본 레이아웃을 생성합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('뉴스 피드'),
        ),
        body: // 뉴스 카드 위젯을 추가할 공간
      ),
    );
  }
}

Card 위젯을 이용한 뉴스 항목 표시

뉴스 항목을 표시하기 위해서, Card 위젯을 사용할 것입니다. 각 뉴스 항목은 이미지, 제목, 내용 등을 포함하고 있을 것이기 때문에 Card 위젯은 이러한 내용을 표시하기에 적합합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('뉴스 피드'),
        ),
        body: ListView(
          children: <Widget>[
            Card(
              child: Column(
                children: <Widget>[
                  Image.network('https://example.com/news_image.jpg'),
                  ListTile(
                    title: Text('뉴스 제목'),
                    subtitle: Text('뉴스 내용'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서, ListView를 사용하여 여러 개의 뉴스 카드를 스크롤 가능한 목록으로 표시합니다. 각 뉴스 항목은 Card 내부의 Column에 이미지와 ListTile을 포함하여 구성됩니다.

마치며

Card 위젯을 사용하여 간단한 뉴스 피드 화면을 만드는 방법에 대해 알아봤습니다. 뉴스 피드에 본문 내용이나 더 많은 정보를 표시하기 위해 다양한 위젯을 추가할 수 있습니다. Flutter의 다양한 위젯을 활용하여 보다 다채로운 화면을 구성할 수 있습니다.