[BookBox] 추천 페이지 구현

1. 텍스트 위젯 추가

Text(
  "00님\nBookBox 에서 추천하는 책을 만나보세요.",
  style: theme.bodyLarge,
),

2. GridView 설정

physics: NeverScrollableScrollPhysics(), // 그리드 스크롤 비활성화
shrinkWrap: true, // 그리드의 높이를 내용에 맞게 조절

2-1. 그리드 이미지 크기 구하기

var size = MediaQuery.of(context).size;
final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
final double itemWidth = size.width / 2.3;

 GridView.builder(
            physics: NeverScrollableScrollPhysics(), // 그리드 스크롤 비활성화
            shrinkWrap: true, // 그리드의 높이를 내용에 맞게 조절
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10,
              crossAxisCount: 3,
              mainAxisSpacing: 10,
              childAspectRatio: (itemWidth / itemHeight),
            ),

3. 위젯 만들기

위젯은 적절하게 스타일을 주고, 글자수가 길이를 초과하는 것을 방지하기 위해 maxLines , overflow 를 사용했다. maxLines : 줄 길이 설정

overflow : 넓이 초과하는 글자 처리 법

maxLines: 2,
overflow: TextOverflow.ellipsis, 

 

전체 코드

import 'package:bookbox/core/constants/size.dart';
import 'package:bookbox/core/constants/styles.dart';
import 'package:bookbox/ui/main/home/recommend_tab/recommend_item.dart';
import 'package:flutter/material.dart';

class RecommendTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TextTheme theme = textTheme();

    var size = MediaQuery.of(context).size;
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width / 2.3;

    return Padding(
      padding: const EdgeInsets.all(gap_s),
      child: ListView(
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: gap_s), // 아래 간격 조정
            child: Text(
              "00님\nBookBox 에서 추천하는 책을 만나보세요.",
              style: theme.bodyLarge,
            ),
          ),
          GridView.builder(
            physics: NeverScrollableScrollPhysics(), // 그리드 스크롤 비활성화
            shrinkWrap: true, // 그리드의 높이를 내용에 맞게 조절
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisSpacing: 10,
              crossAxisCount: 3,
              mainAxisSpacing: 10,
              childAspectRatio: (itemWidth / itemHeight),
            ),
            itemCount: 12,
            itemBuilder: (context, index) {
              return RecommendItem(
                imageUrl:
                    "https://picsum.photos/id/${index + 10}/200/280", // 이미지 URL
                title: "책 제목\n제목길면청길면 $index", // 책 제목
                author: "저자이름 $index 엄청길면", // 저자 이름
              );
            },
          ),
        ],
      ),
    );
  }
}

import 'package:bookbox/core/constants/size.dart';
import 'package:flutter/material.dart';

class RecommendItem extends StatelessWidget {
  final String imageUrl; // 이미지 URL
  final String title; // 책 제목
  final String author; // 저자

  RecommendItem({
    required this.imageUrl,
    required this.title,
    required this.author,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 이미지 표시
          ClipRRect(
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.grey,
                  width: 2,
                ),
              ),
              child: Image.network(
                imageUrl, // 너비를 부모에 맞추기
                fit: BoxFit.cover, // 이미지가 잘리도록 설정
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0), // 패딩 추가
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis, // 제목 스타일
                ),
                Text(
                  author,
                  style: TextStyle(color: Colors.grey),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis, // 저자 스타일
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}