인프런 커뮤니티 질문&답변

문제 해결함.
import 'package:flutter/material.dart'; import 'package:flutter_web1/route_page.dart'; import 'package:flutter_web1/util/asset_path.dart'; import 'package:flutter_web1/util/my_color.dart'; import 'package:flutter_web1/util/screen_padding.dart'; import 'package:flutter_web1/widgets/menu/common_scaffold.dart'; import 'package:flutter_web1/widgets/menu/header.dart'; import 'package:flutter_web1/widgets/menu/menu.dart'; import 'package:flutter_web1/widgets/menu/screen_layout_builder.dart'; import 'package:flutter_web1/widgets/menu/page_drawer.dart'; class PortfolioScreen extends StatefulWidget { const PortfolioScreen({super.key}); @override State<PortfolioScreen> createState() => _PortfolioScreenState(); } class _PortfolioScreenState extends State<PortfolioScreen> { final List<String> imageList = [ AssetPath.bird, AssetPath.butterfly, AssetPath.flutter, AssetPath.office, AssetPath.office_2, ]; @override Widget build(BuildContext context) { return ScreenLayoutBuilder( myBuilder: (screenModel, web, tablet, mobile) { var screenWidth = MediaQuery.of(context).size.width; return CommonScaffold( currentIndex:1, screenModel: screenModel, horizontalPadding: ScreenPadding.get(web,screenWidth), //size responsive 패딩 children: [ Header( title: "포트폴리오", subTitle: "샐링잇은 모바일, 웹, 어드민 뿐만 아니라\n" "여러 디바이스 환경에 맞는 디자인을 제안합니다.", backgroundImage: "", screenModel: screenModel, titleColor: Colors.red, subTitleColor: Colors.black, ), /*이지미 블록에 회색 blur음영 넣기 */ SizedBox( width: screenWidth, // height: 1010, height:5, child: OverflowBox( maxWidth: screenWidth, // maxHeight: 1010, child: SizedBox( width: screenWidth, // height: 1010, child: Container( // width: screenWidth, // height: 1010, decoration: BoxDecoration( boxShadow: [ BoxShadow( color: MyColor.gray20, blurRadius: 7, spreadRadius:3, offset: Offset(0, -5), ) ] ), ), ), ), ), const SizedBox(height: 50), GridView.count( physics: NeverScrollableScrollPhysics(), crossAxisCount: web ? 2 : 1, //웹인경우 한줄에 2개 사진위젯 shrinkWrap: true, //이미지 위젯 사이즈 만큼만 그림. childAspectRatio: 1.1, //이미지 비율이 가로 1.5됨 children: List.generate( imageList.length, (index) { return InkWell( //InkWell: 마우스를 올리면 손모양으로 바뀐다. //GestureDetector : 마우스 올려도 모양 안바뀜 onTap: () { RoutePage.movePage(context, RoutePage.portfolioDetail); }, child: Image.asset( imageList[index], fit: BoxFit.cover, ) ); } ) ), const SizedBox(height: 150), ], ); } ); } }

위처럼, Conatainer 위에 sizedBox 위에 overFlowBox 위에 sizedBox를 해야 하는데,
container 위에 overflowbox 위에 sizedbox해서 안된듯합니다. 그로인해서, sizedBox 안에 width:screenWidth도 빼먹게 되었고
이제 해결했습니다.

안녕하세요, 인프런 AI 인턴입니다. 골든보이 GoldenBoy님.

질문해주셔서 감사합니다. 섹션 7에서 portfolio_screen.dart 파일에서의 header와 footer가 붙는 현상에 대해 문의하신 내용을 확인했습니다. 이와 관련된 유사한 질문과 답변을 찾아보았습니다.

1. 설명 하시는 전체 풀 소스는 어디에 있나요?

   • 해당 페이지에서는 강의에서 사용된 전체 소스 코드의 위치에 대한 답변을 얻을 수 있습니다. 여기서 전체 소스 코드의 위치와 이를 얻는 방법을 설명하고 있습니다.
     

2. 강의 소스 코드는 어디에 있나요?

   • 소스 코드가 어떻게 공유되며 어떤 방법으로 접근할 수 있는지 설명합니다. 강의자가 Github 링크를 제공하고 있습니다.
     

일반적으로 header와 footer가 붙는 현상은 레이아웃 상의 문제일 가능성이 큽니다. OverflowBox와 SizedBox가 포함된 이유는 레이아웃에서 특정 조건 하에 공간을 차지하도록 하기 위해 사용됩니다.

사라짐 현상을 해결하기 위한 몇 가지 조치:
1. SizedBox와 OverflowBox의 크기 및 위치를 확인하여 올바르게 설정되었는지 확인하십시오.
2. header와 footer 사이에 적절한 간격(Padding 또는 Margin)을 추가하여 겹치지 않도록 해보세요.
3. 만약 위젯을 제거하면 음영 선이 짧아지는 경우, 이를 해결하기 위해 BoxDecoration의 boxShadow 속성을 적절하게 조정해 보세요.

더 자세한 해결을 위해 아래 질문 링크들을 참조하는 것도 도움이 될 수 있습니다:

• Flutter에서 레이아웃 문제 해결 방법
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.