6. Flutter 수업-dart 제약 조건과 기본 문법

제약 조건
홍윤's avatar
Oct 01, 2024
6.  Flutter 수업-dart 제약 조건과 기본 문법

1. ListView의 사용 예제

notion image
💡
ListView 위젯을 사용하여 여러 개의 Text 위젯을 렌더링하는 부분입니다.
  1. ListView:
      • ListView는 스크롤 가능한 리스트를 제공하는 위젯입니다. 여기서는 children 프로퍼티를 통해 여러 위젯들을 자식으로 포함하고 있습니다.
  1. for 루프를 이용한 위젯 생성:
      • for (int i = 0; i < 20; i++)라는 반복문을 통해 20개의 Text 위젯을 동적으로 생성하고 있습니다.
      • 각 반복마다 Text('안녕')이라는 문자열을 출력하는 Text 위젯이 생성됩니다.

중요 포인트:

  • 렌더링 최적화:
    • Dart에서 for 문을 사용하여 여러 개의 위젯을 반복적으로 생성할 수 있습니다. 하지만 각각의 위젯을 개별적으로 렌더링하는 대신 배열 형태로 한번에 렌더링하는 방식입니다.
  • Scroll 성능:
    • ListView는 스크롤 가능한 리스트를 만들 때 사용되며, 많은 위젯을 한번에 렌더링할 때 매우 유용합니다. 이 경우에는 20개의 Text 위젯이 스크롤 가능한 형태로 렌더링됩니다.
 

2. 메소드 추출

notion image
💡
buildContainer()라는 이름으로 새로운 메소드를 만들고 있습니다.
사용 목적:
  • 코드의 가독성을 높이기 위해 복잡한 코드를 더 작은 메소드로 나누는 작업입니다.
  • 중복되는 코드나 반복되는 로직을 쉽게 재사용할 수 있습니다.
  • 큰 메소드 내에서 특정 기능을 분리하여 유지보수성을 높이는 역할을 합니다
 

3.google_fonts 라이브러리 사용하기

1. pub.dev 사이트 들어가기

notion image

2. font 사용시 추가해야하는 라이브러리(dependecies)

notion image

3. 제약조건

1. ListView

notion image
💡

1. ListView와 제약조건

  • ListView세로로 스크롤되는 위젯입니다. 부모 위젯의 크기에 맞춰 가로 방향은 늘어나지만, 자식 위젯을 세로로 배치합니다.
  • 예시로 주어진 코드는 ListView 내부에 두 개의 Container를 배치하고 있으며, 각각의 컨테이너가 heightwidth 속성을 가지고 있어 각기 다른 크기와 색상으로 표시됩니다.

2.Column, Row

notion image
💡

Column에서의 정렬

  • Column은 자식들을 세로 방향으로 배치합니다.
  • CrossAxisAlignment가로 축에서의 정렬을 제어하며, CrossAxisAlignment.center는 가로 방향의 가운데로 정렬합니다.
  • MainAxisAlignment세로 축에서의 정렬을 제어하며, MainAxisAlignment.start는 자식들을 위쪽에 정렬하는 속성입니다.

Row 사용

  • 자식 위젯들을 가로로 배치하려면 Row 위젯을 사용합니다. 가로와 세로 축 정렬을 각각 CrossAxisAlignmentMainAxisAlignment로 제어할 수 있습니다. 예를 들어, Row 위젯을 사용해 여러 컨테이너나 텍스트를 수평으로 배치할 수 있습니다.

3.Align

Align(
alignment: Alignment.center
💡

3. Align 위젯 사용

  • 자식 위젯을 원하는 위치에 배치하고 싶을 때는 Align 위젯을 사용할 수 있습니다.
  • 예를 들어, Align(alignment: Alignment.centerLeft)는 자식 위젯을 가로로 왼쪽에, 세로로 가운데에 정렬합니다.
  • ListView, Column, Row는 자식 위젯의 배치와 정렬을 제어하는 데 중요한 역할을 합니다. CrossAxisAlignmentMainAxisAlignment를 통해 각 축에서의 정렬을 세부적으로 조정할 수 있고, 필요에 따라 Align 위젯으로 정밀한 위치 조정을 할 수 있습니다.
 

1. ListView

notion image
💡

ListView의 높이 제한

  • ListView는 자체적으로 높이를 설정할 수 없습니다. 대신 부모 위젯의 제약 조건을 따릅니다. 즉, 자식 위젯이 부모 위젯에 의존하여 크기가 결정됩니다. 이를 통해 스크롤 가능한 리스트를 구성할 수 있습니다.

2. Container 위젯

notion image
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: 200, height: 50, constraints: BoxConstraints( minWidth: double.infinity, minHeight: 100, maxWidth: double.infinity, maxHeight: 200, ), ), ), ), ); } }
💡

Container 위젯의 동작

  • Container는 두 가지 방식으로 동작합니다:
      1. 자식이 없는 경우: Container는 가능한 최대 크기를 차지하려고 합니다.
      1. 자식이 있는 경우: 자식 위젯의 크기에 맞게 Container의 크기가 조정됩니다.
  • 코드 예시에서는 두 개의 Container가 중첩되어 있으며, 각각의 Container는 주어진 heightwidth 값에 맞춰 크기가 결정됩니다.

BoxConstraints와 double.infinity

  • BoxConstraints는 위젯의 크기를 제약할 수 있습니다. minWidth, minHeight, maxWidth, maxHeight 등을 설정하여 위젯이 최소 또는 최대 얼마만큼 커질 수 있는지를 정의할 수 있습니다.
  • *double.infinity*는 Flutter에서 가능한 최대 크기를 의미합니다. 즉, minWidth: double.infinity로 설정하면 가로로 가능한 모든 공간을 차지하게 됩니다.

3. Align (CAC 정렬)

notion image
💡

CAC 정렬 (Align 안의 Container)

  • 부모 위젯에게서 제약 조건을 받는 것이 싫다면, Align 위젯을 사용해 자식 위젯을 특정 위치에 배치할 수 있습니다. 여기서 CAC 정렬Align 위젯 안에 Container를 넣어 정렬하는 방식을 의미합니다. 즉, Container -> Align -> Container 순서로 배치하여 특정한 위치에 정렬된 컨테이너를 만들 수 있습니다.

4. 다른화면에도 쓰일때는 위젯

notion image
💡

위젯 추출 (Extract Flutter Widget) 기능 설명:

  1. 중복된 UI를 재사용:
      • 특정 UI 부분이 다른 화면에서도 동일하게 사용된다면, 그 부분을 하나의 독립적인 위젯으로 추출하여 다른 위치에서도 쉽게 사용할 수 있습니다.
  1. 코드 가독성 향상:
      • 추출된 위젯은 기존의 복잡한 UI 코드를 단순화해주며, 각 위젯의 역할이 명확해집니다. 이렇게 하면 코드의 가독성과 유지보수성이 향상됩니다.
  1. 재사용 가능성:
      • 추출된 위젯은 다른 화면에서도 불필요한 복사/붙여넣기 없이 재사용할 수 있으므로, 코드 중복을 줄일 수 있습니다.

사용 예:

  1. 예를 들어, 리스트 항목이 여러 화면에서 동일하게 사용된다면, 해당 항목 UI를 별도의 위젯으로 추출할 수 있습니다.
  1. Flutter에서는 Extract Flutter Widget 기능을 사용해 쉽게 특정 UI를 추출할 수 있으며, 이 과정을 통해 별도의 StatelessWidget이나 StatefulWidget을 만들 수 있습니다.
UI를 재사용하고 유지보수할 수 있도록 분리하는 것이 Flutter 개발에서 중요한 역할을 합니다.

5. const 설명! (중요함!!!!)

💡

Flutter에서 const의 중요성

Flutter에서 const는 성능 최적화에 매우 중요한 역할을 합니다. 예를 들어, 반복적으로 사용되는 위젯이나 변경되지 않는 위젯const로 선언하면, 같은 메모리 주소를 참조하게 되어 재사용이 가능하고, 불필요한 빌드가 줄어듭니다.

Flutter에서의 const

  1. 불변성:
      • const로 선언된 객체는 한 번 생성되면 절대 변경되지 않습니다. Flutter에서는 위젯 트리가 자주 다시 빌드되므로, 불필요한 객체 생성을 막기 위해 const를 사용하여 메모리에 한 번만 객체를 올려두고 재사용할 수 있습니다.
      • 이로 인해 중복된 객체 생성을 줄여 성능을 최적화할 수 있습니다. 예를 들어, Text 위젯을 여러 번 사용해도 const가 선언된 경우, 메모리에는 한 번만 객체가 할당됩니다.
  1. 컴파일 타임 상수:
      • const컴파일 타임에 결정되는 상수입니다. 이는 프로그램이 실행되기 전에 이미 객체가 정의되고 메모리에 할당된다는 의미입니다. 예를 들어, 숫자, 문자열 등은 const로 정의될 수 있지만, 런타임에 결정되는 값const로 사용할 수 없습니다.
      const x = 100; // 컴파일 타임 상수 final y = DateTime.now(); // 런타임 상수
      위와 같이, const컴파일 시점에 값이 정해진 객체에만 사용할 수 있습니다.
  1. 상태가 없는 객체에 적합:
      • 상태가 변하지 않는 객체에 const를 사용할 수 있습니다. 예를 들어, Flutter에서 StatelessWidget은 상태가 없으므로, const로 선언하여 메모리에서 재사용할 수 있습니다.
      • 하지만, 상태가 있는 객체나 변할 수 있는 데이터를 가진 **StatefulWidget*은 const로 선언할 수 없습니다. 이는 객체의 상태가 변할 수 있기 때문입니다.
  1. 위젯 재사용과 성능 최적화:
      • Flutter는 위젯 트리에서 자주 다시 빌드되지만, const로 선언된 위젯은 다시 빌드되지 않고, 기존에 메모리에 할당된 객체를 재사용합니다. 이로 인해 렌더링 성능이 크게 향상됩니다.

      Flutter에서 const의 중요성

      • Flutter에서 UI 성능을 최적화하기 위해 const는 매우 중요한 역할을 합니다. 매번 새로운 객체를 생성하지 않고, 기존에 생성된 객체를 재사용함으로써 메모리 사용을 최소화하고 렌더링 속도를 높일 수 있습니다.
      • 특히, 같은 값을 반복해서 사용하는 위젯이나 데이터는 가능한 한 const로 선언하는 것이 성능 최적화에 유리합니다.
       
      예제 1: const가 적용된 기본 클래스
      class Dog { const Dog(); } void main() { Dog d1 = const Dog(); print(d1.hashCode); Dog d2 = const Dog(); print(d2.hashCode); }

      설명:

      • 이 예제에서는 불변 객체를 설명합니다. Dog 클래스는 const 생성자로 선언되었으며, 객체 d1d2같은 인스턴스로 취급됩니다. 즉, 메모리 상에 한 번만 로드되고, d1d2는 동일한 객체를 가리킵니다.
      • 결과적으로 두 객체의 해시코드(hashCode)는 동일하게 출력됩니다. 이는 const의 핵심 개념 중 하나인 객체 재사용을 보여줍니다.

      핵심 포인트:

      • const로 선언된 객체는 동일한 상태를 가지면 메모리에서 한 번만 생성되어 성능 최적화가 가능합니다.

      2: 상태가 있는 const 클래스

      class Dog { final int age; const Dog(this.age); } void main() { Dog d1 = const Dog(10); print(d1.hashCode); Dog d2 = const Dog(11); print(d2.hashCode); }

      설명:

      • 이번에는 Dog 클래스에 상태(age)가 추가되었습니다. 두 개의 Dog 객체는 각각 다른 age 값을 가지기 때문에, 서로 다른 객체로 간주됩니다. 결과적으로 d1d2는 서로 다른 해시코드를 출력하게 됩니다.
      • 이 예제는 const객체의 값에 따라 다르게 동작한다는 것을 보여줍니다. 값이 다르면 서로 다른 객체로 취급되며, 이는 불변성을 유지하면서도 상태를 가진 객체를 처리하는 방법입니다.

      핵심 포인트:

      • const로 선언된 객체는 값이 다르면 다른 객체로 취급됩니다. 즉, 동일한 상태의 객체만 재사용됩니다.

      3: const 없는 객체 생성

      class Dog { int age; Dog(this.age); } void main() { Dog d1 = Dog(10); print(d1.hashCode); Dog d2 = Dog(10); print(d2.hashCode); }

      설명:

      • 이 예제에서는 const 없이 Dog 객체를 생성하고 있습니다. d1d2는 동일한 값을 가지지만, const를 사용하지 않았기 때문에 매번 새로운 객체로 생성됩니다.
      • 그 결과, 두 객체는 각각 다른 해시코드를 가지고 메모리 상에서 별도로 관리됩니다.

      핵심 포인트:

      • const를 사용하지 않으면 동일한 값을 가진 객체라도 매번 새로운 객체가 생성됩니다. 이는 메모리 사용 측면에서 비효율적일 수 있습니다.
Share article

Uni