인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

김수민님의 프로필 이미지
김수민

작성한 질문수

Flutter로 웹 서비스 개발하기 (1) - Responsive Web

모바일/태블릿 화면을 위한 Drawer 위젯 추가

[섹션4] 햄버거 아이콘

해결된 질문

작성

·

83

0

안녕하세요,

해당강의수강중인데(띄워쓰기가안되네요..)

tablet/mobile스크린모델에서drawer를구현할때쓰는햄버거(hamburger.png)가build했을때크롬웹에서안보이네요..

assetpath/menu_tablet_and_mobile파일에서코드는정확하게다넣었는데그림이보이지않아문의드립니다.

 

답변 2

0

김수민님의 프로필 이미지
김수민
질문자

참고로 다른 이미지들은 정상적으로 잘 나옵니다.

김진한님의 프로필 이미지
김진한
지식공유자

안녕하세요.

해당 내용 확인중입니다.

  1. 오류 로그 발생하는게 있을까요?

  2. menu_tablet_and_mobile을 호출하고 있는 부분 코드 댓글로 공유 부탁드립니다.

감사합니다.

김수민님의 프로필 이미지
김수민
질문자

  1. 오류로 따로 찍히는 건 없었습니다.


  2. import 'package:flutter/material.dart'; import 'package:flutter_responsive_web/util/asset_path.dart'; import 'package:flutter_responsive_web/util/menu_util.dart'; class MenuTabletAndMobile extends StatelessWidget { const MenuTabletAndMobile( {required this.currentIndex, required this.tablet, super.key}); final int currentIndex; final bool tablet; @override Widget build(BuildContext context) { return Container( width: double.infinity, height: tablet ? 20 : 16, color: Colors.white, padding: EdgeInsets.only(left: tablet ? 20 : 16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ InkWell( onTap: () { MenuUtil.changeIndex(context, currentIndex); }, splashColor: Colors.transparent, hoverColor: Colors.transparent, highlightColor: Colors.transparent, child: Image.asset( AssetPath.menuLogoBlack, width: tablet ? 180 : 120, height: 50, fit: BoxFit.fitWidth, ), ), InkWell( onTap: () { Scaffold.of(context).openEndDrawer(); }, child: Padding( padding: EdgeInsets.all(tablet ? 20 : 16), child: Image.asset(AssetPath.hamburger, width: 20, height: 20), ), ) ], ), ); } }

    위 코드 공유드리면 될까요?

김진한님의 프로필 이미지
김진한
지식공유자

괜찮으시다면 학습중이신 프로젝트 github로 공유 가능하신가요?
제가 제가 직접 빌드해보면서 확인을 해봐야 할 것 같습니다.

github 계정 : jinhan38@naver.com

김진한님의 프로필 이미지
김진한
지식공유자

안녕하세요.

문제 해결이 됐는지 문의 드립니다.

제공해주신 내용으로만은 파악이 어려워서 직접 코드를 보고 문제를 해결해 볼 수 있을 것 같습니다.

github 계정 : jinhan38@naver.com
만약 github계정 초대가 어려우시다면 해당 이메일로 코드를 압축해서 보내주셔도 괜찮습니다.

 

감사합니다.

 

김수민님의 프로필 이미지
김수민
질문자

메일로 보내드렸습니다. 감사합니다!

김진한님의 프로필 이미지
김진한
지식공유자

안녕하세요. 문제점을 찾았습니다.

MenuTabletAndMobile 위젯의 최상위 Container의 height 값에 문제가 있었습니다.
제공해주신 코드에서는 20 or 16으로 입력돼 있었습니다. 60 or 54로 변경해주시기 바랍니다. 감사합니다.

  • 변경전

height: tablet ? 20 : 16
  • 변경후

height: tablet ? 60 : 54,
김수민님의 프로필 이미지
김수민
질문자

아이고.. 저걸 놓쳤었군요
말씀주신대로 수정하니 아이콘 잘 나타납니다.

친절한 답변 감사드립니다!

0

안녕하세요, 인프런 AI 인턴입니다. 김수민님.

강의 수강 중 햄버거 아이콘이 크롬 웹에서 보이지 않는 문제를 겪고 계신 것 같습니다. 이 문제는 일반적으로 이미지 파일의 경로 설정 문제에서 비롯되며, 아래와 같은 사항들을 체크해보시면 도움이 될 수 있습니다:

  1. pubspec.yaml 파일 확인: 이미지 파일이 assets로 제대로 등록되어 있는지 확인하세요. pubspec.yaml 파일에 assets 경로가 제대로 설정되어 있어야 합니다. 예시는 다음과 같습니다:
    ”`yaml
    flutter:
    assets:

       - assets/path/to/hamburger.png
    

    ”`

  2. 파일 경로 및 이름 확인: 파일의 경로와 이름이 정확히 일치하는지, 대소문자 구분도 제대로 하고 있는지 확인하세요.

  3. 빌드 캐시 문제: 간혹 빌드 캐시 문제로 인해 파일이 업데이트되지 않을 수 있습니다. 이 경우, flutter clean 명령어를 사용하여 캐시를 삭제한 후 다시 빌드해보세요.

  4. 크롬 캐시 문제: 브라우저 캐시로 인해 업데이트된 이미지가 보이지 않을 수 있습니다. 이 경우, 크롬에서 캐시를 비우거나 Incognito 모드를 사용하여 리로드를 시도하세요.

추가로, 다음 유사한 질문들도 도움이 될 수 있습니다:

문제 해결이 어려우시다면 지식공유자님에게 직접 문의하시거나 관련 질문 게시판에서 추가적인 도움을 요청하실 수 있습니다.

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

김수민님의 프로필 이미지
김수민

작성한 질문수

질문하기