로고 크기 지정이 안 되는 문제

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

UI 배치하기

작성

384

안녕하세요 강사님. 다름이 아니라 아래 코드가 적용되지 않아서 글 남깁니다.

Image.asset(
  'asset/img/misc/logo.png',
  width: MediaQuery.of(context).size.width * (2 / 3),
),

width에 그 어떠한 값을 넣어봐도 로고 크기가 변하지 않았습니다. 이에 아래 코드와 같이 width가 아닌 height 값을 지정해 보니 드디어 로고 크기가 변하기 시작하더군요.

Image.asset(
  'asset/img/misc/logo.png',
  height: 100,
),

왜 width에 값을 넣었을 때는 로고 크기가 변하지 않았고, height에 값을 넣었을 때만 로고 크기가 변했는지 그 이유가 궁금합니다.

flutter 하이브리드-앱

답변 1

코드팩토리

지식공유자

안녕하세요!

변경 돼야 맞을 것 같습니다.

로고를 적용한 위젯 전체 코드를 보여주시면 제가 한번 분석해보겠습니다.

감사합니다!

David Heo

질문자

확인을 위해 제가 새로운 프로젝트를 만들어서 코드를 작성해 봤습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Image.asset(
            'asset/image/logo.png',
            //height: MediaQuery.of(context).size.width * (2 / 3),
            width: 100,
          ),
        ],
      ),
    );
  }
}

이 경우에도 width를 특정 값으로 지정해 줬을 때는 로고의 크기가 변하지 않았습니다. 하지만 height 값을 지정해 줬을 때는 로고의 크기가 변했습니다. 왜 그런지 이유를 모르겠네요 ㅠㅠ

(위 코드가 새로 만든 프로젝트의 전체 코드입니다.)

코드팩토리

지식공유자

Image.asset의 width를 지정 할 수 없는 이유는 바로 위의 Column 위젯의 crossAxisAlignment 프로퍼티에 CrossAxisAlignment.stretch를 지정하셨기 때문입니다. 최대로 늘리라고 했기때문에 Image.asset에서 정해주는 width 값이 적용되지 않습니다.

David Heo

질문자

아 제가 그 부분을 놓치고 있었군요... 감사합니다!

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

로고 크기 지정이 안 되는 문제