[Flutter] Expanded, Flexible & 상품 레이아웃

Expanded, Flexible & 상품 레이아웃

• Row()안에 박스 2개를 넣었는데 박스의 폭을 50%로 설정하고자 한다면
  • Flexible() 로 감싼 다음 사용하면 사용할 수 있다.
  • 물론 Column() 도 가능하다.

  body: Row(
  	children: [
  		Flexible(child: Container(color: Colors.blue), flex: 3),
  		Flexible(child: Container(color: Colors.green), flex: 7)
  	]
  )
  

• Row() 안에서 박스 하나만 꽉채우고 싶다면 Expanded()를 사용하면 된다.
  • 즉 Expanded()를 사용하면 남은 공간을 모두 채우는 역할을 한다.

  body: Row(
  	children: [
  		Expanded(child: Container(color: Colors.blue)),
  		Flexible(child: Container(color: Colors.green), flex: 7)
  	]
  )
  

• Expanded와 Flexible 특성을 알고 지난 숙제의 코드를 정정한다면 아래와 같다.

import 'package:flutter/material.dart';

void main() {
  //runApp 안에 있는 MyApp을 실행해달라는 코드
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text('금호동3가', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900)),
          actions: [
            Row(
              children: [Icon(Icons.search), SizedBox(width: 20), Icon(Icons.menu), SizedBox(width: 20), Icon(Icons.notifications_none_sharp)],
            )
          ],
          actionsIconTheme: IconThemeData(color: Colors.black, size: 40),
          leading: Icon(Icons.access_time),
        ),
        body: Container(
          child: Row(
            children: [
              Container(
                  width: 300,
                  height: 300,
                  alignment: Alignment.topCenter,
                  child: Image.asset('JJangu.jpg'),
                  margin: EdgeInsets.fromLTRB(15, 30, 15, 0),
                ),
              Expanded(
                child: Container(
                  height: 300,
                  margin: EdgeInsets.fromLTRB(15, 30, 15, 0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('캐논 DSLR 100D (단렌즈, 충전기 16기가SD 포함)', style: TextStyle(fontSize: 30, fontWeight: FontWeight.w700)),
                      Text('성동구 행당동 끌올 10분 전', style: TextStyle(fontSize: 12, color: Colors.grey, fontWeight: FontWeight.w700)),
                      Text('210.000원', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700)),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Icon(Icons.favorite_border, color: Colors.grey),
                          Text('4', style: TextStyle(fontSize: 20, color: Colors.grey, fontWeight: FontWeight.w300),)
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

• 그래서 다시 한번 정리하자면
  • Flexible: 박스폭을 %로 주고자 할 때 사용
  • Expanded: 박스폭을 풀로 채우고자 할 때 사용