Expanded class를 활용한 레이아웃

Expanded class - widgets library - Dart API

 

다음과 같이 이미지를 불러오는 경우, 이미지가 모바일에 비해 크면 overflow가 일어납니다. overflow를 해결하기 위해서 강제라고 width값을 주어서 해결할 수도 있지만, 각 모바일 기기의 크기가 다르다는 점을 생각해보면다면 그렇게 적합한 방법은 아닙니다.

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Image(image: AssetImage("images/dice1.png"), width: 200.0,),
      ],
    );
  }
}

 

이 경우 Expanded 클래스로 각 이미지를 감싸주면, 모바일 환경에 맞게 적절히 확대, 축소됩니다. 

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

 

Expanded의 flex 속성을 이용해 각 비율을 조정할 수도 있습니다. (이건 RN이랑 비슷하군요!)

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