인프런 커뮤니티 질문&답변

zla_db님의 프로필 이미지
zla_db

작성한 질문수

[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

레이아웃 만들기

CrossAxisAlignment 질문

작성

·

276

·

수정됨

0

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('랜덤숫자 생성기'),
                IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.settings,
                  ),
                ),
              ],
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('123'),
                  Text('456'),
                  Text('789'),
                ],
              ),
            ),
            Container(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: () {},
                child: Text('생성하기!'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

그냥 수업 내용인데, 왜 첫번째 Column에서는 container나 sizedBox하지 않고 그냥 crossAxisAlignment가 바로 적용되는 건가요?? 혹시 SafeArea 영역이 width가 최대라서 바로 횡축 정렬이 가능해지나요?

답변 1

0

코드팩토리님의 프로필 이미지
코드팩토리
지식공유자

안녕하세요!

최상위 Column이 왜 가로로 최대 크기를 차지 하는지에 대한 질문 맞을까요?

Row와 Column은 모두 주축에서 최대 크기를 가져갑니다.

Column안에 Row가 입력 됐기때문에 가로로도 최대치를 차지하게됩니다.

만약에 Column 위에 SizedBox 등을 사용해서 강제로 크기를 줄여주면 Row가 최대로 가져갈 수 있는 크기도 줄기때문에 Column도 마찬가지로 같은 크기만큼만 늘어납니다.

혹시 제가 질문을 잘못 이해했다면 다시 질문주세요!

감사합니다!

zla_db님의 프로필 이미지
zla_db

작성한 질문수

질문하기