본문 바로가기
공부방/Flutter

[Flutter] Center위젯(함수)

by SmartCow 2024. 4. 8.
목차
1. Center위젯의 기능
1) 화면 가운데 정렬
2) 자식 위젯과 함께 사용
3) Center위젯의 속성

2. 사용예시
1) 기본 사용 예시
2) 자식 위젯과 함께 사용하는 예시

3. 주의사항
1) 중첩 사용 시 주의사항
2) 성능 고려사항

1. Center위젯의 기능

1) 화면 가운데 정렬
Center 위젯은 자식 위젯을 화면의 중앙에 정렬. 이는 모든 플랫폼에서 일관된 가운데 정렬을 보장한다.

2) 자식 위젯과 함께 사용
Center 위젯은 다양한 자식 위젯과 함께 사용될 수 있다. 텍스트, 이미지, 그리고 다른 복합적인 위젯들을 가운데 정렬할 수 있다.

3) Center위젯의 속성

속성 설명
child 가운데로 정렬할 자식 위젯을 지정
widthFactor 자식 위젯의 너비를 조절하기 위한 요소. 기본값은 1.0
heightFactor 자식 위젯의 높이를 조절하기 위한 요소. 기본값 1.0

 

2. 사용예시

1) 기본 사용 예시

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Center 위젯 예시'),
        ),
        body: Center(
          child: Text('이 텍스트는 화면 가운데에 정렬됩니다.'),
        ),
      ),
    ),
  );
}

2) 자식 위젯과 함께 사용하는 예시

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Center 위젯 예시'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Text(
              '이 컨테이너는 화면 가운데에 정렬되며, 파란색 배경을 가집니다.',
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    ),
  );
}

3. 주의사항

1) 중첩 사용 시 주의사항
Center 위젯을 중첩하여 사용할 경우, 예상치 못한 UI 레이아웃 문제가 발생할 수 있다. 중첩을 최소화하고 필요한 경우에만 사용하는 것이 좋다.

2) 성능 고려 사항
Center 위젯은 자식 위젯을 가운데로 정렬하는 간단한 작업을 수행하므로 성능에 부담을 주지 않는다. 그러나 과도한 사용은 성능에 영향을 줄 수 있으므로 적절하게 사용해야 한다.