[Flutter] 정적 이미지 파일 가져오기 (화면에 따른 조정법)

flutter에서 이미지 파일 가져오는 방법을 알아봅시다!

하드코딩 해서 값을 픽셀 값으로 지정할 수 있지만 가로 모드로 변환하거나 디바이스의 사이즈마다 다를 땐 이미지로 인해 UI가 깨질 수도 잇습니다!

 

 

Expanded class

Expanded calss를 이용할 수 있습니다. ( 참고 : api.flutter.dev/flutter/widgets/Expanded-class.html )

즉, Row, Column 또는 Flex 위젯의 child 확장해서 child가 사용 가능한 공간을 채울 수 있도록 하는 위젯으로 확장 위젯을 이용하며 반응형처럼 만들 수 있습니다.

 

tip) 갑자기 생각 난 tip. window 경우, Ctrl + Shift를 누르면 전구 표시가 나오는 데, 클릭해서 레이아웃을 나눌 Row, Column, Container같은 위젯들로 자동으로 감싸줄 수 있다!

 

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: Text('Dice게임'),
          backgroundColor: Colors.blue,
        ),
        body: DicePage(),
      ),
    ),
  );
}

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: Image(
            // Expanded 클래스 이용 없이 Image 위젯으로 200픽셀 하드 코딩한 부분은 주석처리
            // width: 200,
            image: AssetImage('images/dice1.png'),
          ),
        ),
      ],
    );
  }
}

이미지 깨짐 현상 없이 적용된 모습

2개 이상의 이미지를 정렬하는 방법은?

2개 이상의 이미지가 있을 경우에 이미지의 너비 차이를 주고 싶을 때, HTML5의 flex를 Expanded클래스에서도 사용할 수 있습니다. ( defaults : 1 )

 

    children: <Widget>[
        Expanded(
          flex: 3,
          child: Image(
            image: AssetImage('images/dice1.png'),
          ),
        ),
        Expanded(
          flex: 2,
          child: Image(
            image: AssetImage('images/dice1.png'),
          ),
        ),
      ],

3:2의 flex가 적용. 기입 안하면 1이 적용

 

Image class의 유용한 생성자를 이용해 코드를 간결하게 한 수 있다.

child : Image.asset('images/dice1.png') 처럼 생성자를 이용해 코드를 간결하게 유지하자!

 

아래 코드를 보면 첫번 Expanded가 두 번째 보다 훨씬 간결함을 느낄 수 있습니다.

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          flex: 3,
          child: Image.asset('images/dice1.png'),
        ),
        Expanded(
          flex: 2,
          child: Image(
            image: AssetImage('images/dice1.png'),
          ),
        ),
      ],
    );
  }
}