Flexible과 Expanded(이미지 넣기)

Flexible

• 위젯들의 크기를 비율로 정하고 싶을 때

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Row(
          children: [
            Flexible(child: Container(color: Colors.green), flex: 1,),
            Flexible(child: Container(color: Colors.blue), flex: 2,),
            Flexible(child: Container(color: Colors.green), flex: 3,),
          ],
        ),
      ),
    );
  }
}

---

Expanded

• flex :1 가진 Flexible 박스랑 똑같음
• 나머지 공간을 꽉 채움

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Row(
          children: [
            Expanded(child: Container(color: Colors.blue)),
            Container(width: 100, color: Colors.green,)

          ],
        ),
      ),
    );
  }
}

두 번째 Container의 크기가 100이면 나머지는Expanded가 차지함.

---

정리

• 박스폭을 퍼센트로 주고 싶으면 Flexible
• 박스 하나 넓게 채우려면 Expanded

---

박스 디자인 했는데 이상하다면?

1. 박스 사이즈 확인
2. 박스 위치 확인
3. 안드로이드 스튜디오의 터미널의 'DevTools' 클릭 후 확인
   (alt + 4 누르면 터미널 켜짐)
   
   
   여기서 분석

---

• 이미지 넣는 예시

	child: Row(
    	children: [
        	Image.asset('/dog.png', width:150), // 이미지 코드
            Container()
            ],
          ),