[캡스톤_front] Expended 사용법

피용희·2024년 3월 24일

FLUTTER

목록 보기

24/30

빠르게 개발을 해야하는 상황이라, 현재 적용된 것을 전부 다 기록해두지는 못했지만..
지금은 버튼으로 화면 연결하는 사항까지는 어느정도 완료가 된 상황이다.

현재는 화면들이 이런식으로 구현되어 있다.
중요한 것은, 저 선택 버튼들을 전부 아래 방향으로 구현하는 것인데,
Expended..Spacer를 사용하라 이런 말들이 있지만

구글링해서 그냥 적용하려니, 이게 이해를 못하고 사용하니까
자리를 못 찾는 문제가 발생했다.

이런식으로ㅠㅠ

그래서 기본적인 것은 끝났으니, 이제부터는 시간이 걸리더라도 하나하나 짚어가며 살펴볼 예정이다.

객지분 프로젝트 할때는 좀 더 자세한 사항들 까지도 기록하면서 공부해야지!

Expended

what is Expended

Row나 Column등에서 핸드폰 화면에 맞게 균일하게 배치하기 위해서 사용한다.
pixel 기준으로 할 경우, 핸드폰 규격에 맞추기 어렵지만 expended를 사용할 경우 핸드폰 규격에 맞추기 쉽다.

Expanded 이론

부모의 남은 범위를 Flex 비율에 맞춰서 모두 가져간다.
expended가 없는 것이 우선적으로 넓이를 가지고, expended가 남은 것들을 가져간다고 생각하면 된다.

이 부분은 이해가 쉽지 않아서 공식 문서를 참고했다.

Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.

쉽게 말하자면 부모의 범위 안에서 flex 비율에 따라 자식들이 나눠 갖는 것이라고 이해하면 된다.

An Expanded widget must be a descendant of a Row, Column, or Flex, and the path from the Expanded widget to its enclosing Row, Column, or Flex must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).

반드시 Row, Column과 같은 곳에서만 정의가 가능하다고 한다.

Expended 예시

공식 문서의 예제를 살펴보자.

import 'package:flutter/material.dart';

/// Flutter code sample for [Expanded].

void main() => runApp(const ExpandedApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Expanded Column Sample'),
        ),
        body: const ExpandedExample(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
          Expanded(
            child: Container(
              color: Colors.amber,
              width: 100,
            ),
          ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),
    );
  }
}