[Flutter] 위젯의 특성

5. 위젯의 특성

Oct 02, 2024

Contents

1. ListView vs Column 2. Column과 Row의 기본 정렬 3. Container 특징 4. 위젯 추출 방법 5. 기타 참고사항

💡

Flutter에서 위젯의 제약조건(Constraints)은 부모 위젯이 자식 위젯에 제공하는 규칙이나 가이드라인으로, 자식 위젯의 크기를 결정하는 중요한 요소입니다. 각 위젯은 부모 위젯으로부터 constraints를 받아 그 범위 내에서 자신의 크기를 정하게 됩니다. 제약조건은 주로 minWidth, maxWidth, minHeight, maxHeight 값으로 표현되며, 이를 기반으로 자식 위젯이 적절한 크기를 선택합니다.

1. ListView vs Column

왼쪽의 ListView는 부모의 크기만큼 늘어난다

오른쪽의 Column은 가로 길이가 자식의 크기만큼 늘어난다(세로 방향은 끝까지 차지한다)

Row의 세로 길이가 자식의 크기만큼 늘어난다(가로 방향은 끝까지 차지한다)

2. Column과 Row의 기본 정렬

Column의 기본적으로 세로축 방향으로 Center 정렬을 한다(좌우 가운데 정렬)

반대로, Row는 가로축 방향으로 Center 정렬을 한다(상하 가운데 정렬)

💡

Column의 세로 길이는 화면의 크기에 따라 정해지고, 가로 길이는 자식의 크기에 정해진다.crossAxisAlignment: CrossAxisAlignment 가로 축으로 Center 정렬이 된다.

Row의 세로 길이는 자식의 크기에 따라 정해지고, 가로 길이는 화면의 크기에 따라 정해진다.crossAxisAlignment: CrossAxisAlignment 세로 축으로 Center 정렬이 된다.

모든 위젯의 제약 조건은 바로 위 부모에 영향을 받는다.

3. Container 특징

자식이 없는 Container는 가능한 한 박스를 크게 만든다

자식이 있는 Container는 자식의 크기에 맞게 조정된다

CAC다(Container Align Container 로 배치를 할 수 있다)

( Align으로 감싸서 그 위에 그릴 수 있도록 구성할 수 있다 )


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Constraints Example')),
        body: Center(
          child: Container(
            color: Colors.blue,
            width: 300,
            height: 300,
            child: Align(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red
              ),
            ),
          ),
        ),
      ),
    );
  }
}

4. 위젯 추출 방법

💡

Flutter에서 위젯 추출(Widget Extraction)은 복잡한 UI를 더 작은, 재사용 가능한 위젯으로 분리하는 과정입니다. 위젯 추출은 코드의 가독성을 높이고 유지보수성을 향상시키며, 재사용 가능한 컴포넌트를 만들 수 있게 해줍니다.

위젯 추출의 목적

코드의 가독성 향상: 큰 UI 코드 블록을 더 작은 부분으로 나누어 각 부분의 역할을 명확하게 하고 코드를 더 쉽게 읽을 수 있게 만듭니다.

재사용성: UI의 특정 부분이 여러 화면에서 동일하게 사용된다면, 해당 부분을 추출해 위젯으로 만들면 코드의 중복을 줄이고 일관된 디자인을 유지할 수 있습니다.

유지보수성: UI의 특정 부분을 수정해야 할 때, 추출된 위젯 하나만 수정하면 되므로 유지보수가 용이합니다.

상태 관리: 추출한 위젯에 StatefulWidget을 사용하여 상태를 관리하거나, InheritedWidget, Provider와 같은 상태 관리 기법을 사용할 수 있습니다.

코드를 해당 페이지에서만 사용할 경우 메서드로 묶어서 사용하고,

다른 페이지에서도 여러 번 사용할 경우에는 위젯으로 묶어 관리를 한다.

5. 기타 참고사항

메서드로 만들때 파일 명에 _ 를 붙이면 private 역할을 한다

Row나 Column 처럼 코드를 짠 이후 Expanded를 묶어서 메서드를 만들 때, Expanded를 같이 묶어서 메서드를 만드는 것일 아니라 따로 묶어서 만든 이후에 Expanded 로 묶는 것이 이후 코드 관리에 편하다

추가로 핫리로드는 Scaffold 내부만 가능

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Constraints Example')), body: Center( child: Container( color: Colors.blue, width: 300, height: 300, child: Align( child: Container( width: 100, height: 100, color: Colors.red ), ), ), ), ), ); } }