[Flutter] Expanded (레이아웃 그림 벗어남 방지)

 

Flutter Expanded

 

  Expanded는 화면의 이미지의 크기 아니면 레이아웃을 효율적으로 하기 위해 사용합니다.

 

위 코드블럭은 눈이 1인 주사위 이미지를 출력하는 구문인데, 이미지의 픽셀은 500,500 이라 휴대폰의 화면이 넘어가게 됩니다.

그러면 레이아웃이 망가지며 기기마다 일정한 크기의 레이아웃을 보여주기 어렵습니다.
그리고 원하는 이미지도 보여주질 못하는 경우도 있습니다.

 

그럴 떄 Expanded를 사용하시면 됩니다.

 

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: Text('Dicee'),
          backgroundColor: Colors.red,
        ),
        body: DicePage(),
      ),
    ),
  );
}

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

Flutter 레이아웃이 벗어남

반응형

그러면 Expanded를 사용해서 해보도록 하겠습니다.

 

import 'package:flutter/material.dart';

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(
          title: Text('Dicee'),
          backgroundColor: Colors.red,
        ),
        body: DicePage(),
      ),
    ),
  );
}

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

 

그러면 화면에 맞게 출력 된 것을 볼 수 있습니다 만약 2개를 출력한다고 한다면 Expanded를 두 개 사용해 출력하면 됩니다.

그리고 flex를 사용하면 배수로 크기를 컨트롤 할 수 있습니다.

 

 

Flutter Expanded 처리

 

 

 

Expanded class - widgets library - Dart API