์น์
7์ portfolio_screen_dart์์ header์ footer๊ฐ ๋ถ๋ ํ์ ์์ต๋๋ค.
๋ฌธ์ ํด๊ฒฐํจ. 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 createState() => _PortfolioScreenState(); } class _PortfolioScreenState extends State { final List 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๋ ๋นผ๋จน๊ฒ ๋์๊ณ ์ด์ ํด๊ฒฐํ์ต๋๋ค.