해결된 질문
24.09.18 15:38 작성
·
22
답변 2
0
문제 해결함.
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도 빼먹게 되었고
이제 해결했습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 골든보이 GoldenBoy님.
질문해주셔서 감사합니다. 섹션 7에서 portfolio_screen.dart
파일에서의 header
와 footer
가 붙는 현상에 대해 문의하신 내용을 확인했습니다. 이와 관련된 유사한 질문과 답변을 찾아보았습니다.
일반적으로 header
와 footer
가 붙는 현상은 레이아웃 상의 문제일 가능성이 큽니다. OverflowBox
와 SizedBox
가 포함된 이유는 레이아웃에서 특정 조건 하에 공간을 차지하도록 하기 위해 사용됩니다.
사라짐 현상을 해결하기 위한 몇 가지 조치:
1. SizedBox
와 OverflowBox
의 크기 및 위치를 확인하여 올바르게 설정되었는지 확인하십시오.
2. header
와 footer
사이에 적절한 간격(Padding
또는 Margin
)을 추가하여 겹치지 않도록 해보세요.
3. 만약 위젯을 제거하면 음영 선이 짧아지는 경우, 이를 해결하기 위해 BoxDecoration
의 boxShadow
속성을 적절하게 조정해 보세요.
더 자세한 해결을 위해 아래 질문 링크들을 참조하는 것도 도움이 될 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
2024. 09. 19. 08:51
안녕하세요.
네 자체 해결 하셔서 다행입니다.
감사합니다!