뉴스 상세 페이지 — 이미지, 본문, 공유 버튼까지 세련되게

뉴스 앱을 만든다면, 메인 목록 다음으로 중요한 건 바로 상세 페이지다.
썸네일, 본문, 날짜, 공유 버튼... 이 모든 요소들이 잘 어우러져야 사용자에게 정보 전달은 물론 디자인 감성까지 줄 수 있다.

이번 글에서는 Flutter로 세련된 뉴스 상세 페이지를 만드는 구조를 공유해본다.

---

🧱 기본 레이아웃 설계

class NewsDetailScreen extends StatelessWidget {
  final News news;
  const NewsDetailScreen({super.key, required this.news});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("뉴스 상세")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(news.title, style: Theme.of(context).textTheme.headline6),
            const SizedBox(height: 8),
            Text(news.publishedAt.toString(), style: TextStyle(color: Colors.grey)),
            const SizedBox(height: 16),
            ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.network(news.imageUrl),
            ),
            const SizedBox(height: 24),
            Text(news.content, style: Theme.of(context).textTheme.bodyText2),
            const SizedBox(height: 32),
            Center(
              child: ElevatedButton.icon(
                onPressed: () {
                  _shareNews(context, news);
                },
                icon: Icon(Icons.share),
                label: Text("공유하기"),
              ),
            )
          ],
        ),
      ),
    );
  }

SingleChildScrollView로 스크롤 가능하게 만들고,
텍스트, 이미지, 버튼을 자연스럽게 배치해준다.

---

📤 공유 기능 구현

공유 기능은 share_plus 패키지를 사용하면 간단하게 구현할 수 있다.

// pubspec.yaml
dependencies:
  share_plus: ^7.0.0

import 'package:share_plus/share_plus.dart';

void _shareNews(BuildContext context, News news) {
  final text = '${news.title}\n\n${news.link}';
  Share.share(text);
}

링크까지 포함한 뉴스 공유 기능은 실제 앱에서 가장 많이 쓰이는 UX 중 하나다.

---

🎨 감성 디자인 팁

• 제목은 큰 글씨 + bold, 본문은 여백 넉넉히
• 이미지 위에 반투명 gradient 넣으면 더욱 세련됨
• 텍스트가 긴 경우 Text.rich + 하이라이트 처리도 고려

디자인은 사용자 경험의 절반을 담당한다. 작은 감성은 오래 기억된다.

---

📱 다양한 디바이스 대응

텍스트 길이가 길어도 레이아웃이 깨지지 않도록 하고,
이미지가 없을 경우 대체 이미지 또는 Placeholder 위젯으로 대응하는 것도 중요하다.

Image.network(
  news.imageUrl,
  errorBuilder: (context, error, stackTrace) {
    return Image.asset("assets/placeholder.png");
  },
)

---

🧘 마무리하며

뉴스 앱의 핵심은 콘텐츠고, 그 콘텐츠를 아름답게 감싸는 것이 상세 페이지다.
이미지와 본문, 공유 버튼이 조화롭게 배치되면
그 뉴스는 정보 그 이상이 된다 — 경험이 된다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 뉴스 앱 만들기 여정입니다.