* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
- GridView 사용법 문의
안녕하세요? 라이브러리 화면(Shazam 클론 코딩)에서 GridView사용 하는데
height: 600을 줬는데도 Text( // 23. 가수명 Text "산나비"가 안 보입니다.
그리고 원하는 아이콘을 직관적으로 확인하는 방법이 없을까요?
확인 부탁 드립니다.
감사합니다.
==============================================================================================================
보고 계신 화면 전체를 캡처해 주시
.jpg)
면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
debugPrint("■■■ [/main.dart] [main()] ==> [T_01] [Project Start] ■■■");
runApp(const MyApp()); // MyApp class 호출
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
debugPrint("■■■ [/MyApp.C] [build()] ==> [T_01] [MyApp Start]");
return MaterialApp(
home: FirstPage(), // HomePage class 호출
);
}
}
class FirstPage extends StatelessWidget {
const FirstPage({super.key});
@override
Widget build(BuildContext context) {
debugPrint(
"■■■ [/FirstPage.C] [build()] ==> [T_01] [FirstPage Start] [라이브러리] ■");
return Scaffold(
appBar: AppBar(
// 02. body 위젯■(Row ==> Feed()) =====================>
backgroundColor: Colors.white,
centerTitle: true,
elevation: 0.5, // 앱바 또는 바텀바 등의 위젯에서 음영을 줄 수있는 속성
title: Text(
"라이브러리",
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
body: Padding(
// 02. body■
padding: const EdgeInsets.all(10), // 패딩 설정(전방위 모두 동일하게 적용)
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
// 01. Shazam Container ■■■
color: Colors.red, // 배경색 설정(노란색)
width: double.infinity, // 버튼도 함께 최대 크기로 늘어남
height: 40,
child: Row(
children: [
Icon(
// 01. Shazam Icon
CupertinoIcons.heart_fill,
size: 16,
), // 01. Shazam Icon
SizedBox(
width: 12,
),
Text(
// 02. Shazam Text
"Shazam",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
overflow: TextOverflow.ellipsis,
), // 02. Shazam Text ■■■
],
),
), // 01. Shazam Container ■■■
Container(
// 02. 아티스트 Container ■■■
color: Color(0xff00FF00), // 배경색 설정(녹색)
width: double.infinity, // 버튼도 함께 최대 크기로 늘어남
height: 40,
child: Row(
children: [
Icon(
// 01. Shazam Icon
Icons.man_sharp,
size: 16,
), // 01. Shazam Icon
SizedBox(
width: 12,
),
Text(
// 02. 아티스트 Text
"아티스트",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
overflow: TextOverflow.ellipsis,
), // 02. 아티스트 Text ■■■
],
),
// 02. 아티스트 Text ■■■
), // 02. 아티스트 Container ■■■
Container(
// 03. 회원님을 위한 재생목록 Container ■■■
color: Colors.blue, // 배경색 설정(진한 파란색색)
width: double.infinity, // 버튼도 함께 최대 크기로 늘어남
height: 40,
child: Row(
children: [
Icon(
// 01. Shazam Icon
CupertinoIcons.heart_fill,
size: 16,
), // 01. Shazam Icon
SizedBox(
width: 12,
),
Text(
// 02. 아티스트 Text
"회원님을 위한 재생목록",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
overflow: TextOverflow.ellipsis,
), // 02. 아티스트 Text ■■■
],
), // 03. 회원님을 위한 재생목록 Text
), // 03. 회원님을 위한 재생목록 Container ■■■
SizedBox(
width: 12,
height: 30,
),
Container(
// 51. 최근 Shazam Text ■■■
color: Colors.yellow, // 배경색 설정(진한 파란색색)
width: double.infinity, // 버튼도 함께 최대 크기로 늘어남
height: 40,
child: Text(
// 03. 회원님을 위한 재생목록 Text
"최근 Shazam",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black,
),
softWrap: false,
maxLines: 2,
overflow: TextOverflow.ellipsis,
), // 03. 회원님을 위한 재생목록 Text
),
Row(
children: [
Container(
// 51. 최근 Shazam 리스트 Container ■■■
color: Color(0xffFF00FF), // 배경색 설정(분홍색)
padding: const EdgeInsets.all(10.0),
width: 290,
height: 380,
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
children: [
Container(
width: 150,
height: 600,
color: Colors.yellow,
child: SingleChildScrollView(
scrollDirection: Axis.vertical, // 스크롤 방향: 축 기준 수직
child: Row(
children: [
Column(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
ClipRRect(
// 정사각형을 동그라미 그리는 속성
child: Image.network(
// 00. 상품 Image
"https://cdn2.thecatapi.com/images/6bt.jpg", // 21. 차트 Image
width: 110,
height: 110,
fit: BoxFit.cover, // 이미지 크기 조절 fit 옵션
), // 21. 차트 Image
),
Text(
// 22. 노래 명 Text
"가을밤에 든 생각",
style: TextStyle(
fontSize: 16,
color: Colors.black,
),
softWrap: false,
maxLines: 2,
overflow: TextOverflow.ellipsis,
), // 22. 노래 명 Text
Text(
// 23. 가수명 Text
"산나비",
style: TextStyle(
fontSize: 16,
color: Colors.black,
),
softWrap: false,
maxLines: 2,
overflow: TextOverflow.ellipsis,
), // 23. 가수명 Text
],
),
],
),
),
),
Container(
width: 150,
height: 380,
color: Colors.blue,
),
],
),
// ),
), //51. 최근 Shazam 리스트 Container ■■■
],
),
],
),
), // 02. body 위젯■ =====================>
);
}
}
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
