1. ListView의 사용 예제

ListView
위젯을 사용하여 여러 개의 Text
위젯을 렌더링하는 부분입니다. ListView
:ListView
는 스크롤 가능한 리스트를 제공하는 위젯입니다. 여기서는children
프로퍼티를 통해 여러 위젯들을 자식으로 포함하고 있습니다.
- for 루프를 이용한 위젯 생성:
for (int i = 0; i < 20; i++)
라는 반복문을 통해 20개의Text
위젯을 동적으로 생성하고 있습니다.- 각 반복마다
Text('안녕')
이라는 문자열을 출력하는Text
위젯이 생성됩니다.
중요 포인트:
- 렌더링 최적화:
- Dart에서
for
문을 사용하여 여러 개의 위젯을 반복적으로 생성할 수 있습니다. 하지만 각각의 위젯을 개별적으로 렌더링하는 대신 배열 형태로 한번에 렌더링하는 방식입니다.
- Scroll 성능:
ListView
는 스크롤 가능한 리스트를 만들 때 사용되며, 많은 위젯을 한번에 렌더링할 때 매우 유용합니다. 이 경우에는 20개의Text
위젯이 스크롤 가능한 형태로 렌더링됩니다.
2. 메소드 추출

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

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

3. 제약조건
1. ListView

2.Column, Row

Column에서의 정렬
Column
은 자식들을 세로 방향으로 배치합니다.
CrossAxisAlignment
는 가로 축에서의 정렬을 제어하며,CrossAxisAlignment.center
는 가로 방향의 가운데로 정렬합니다.
MainAxisAlignment
는 세로 축에서의 정렬을 제어하며,MainAxisAlignment.start
는 자식들을 위쪽에 정렬하는 속성입니다.
Row 사용
- 자식 위젯들을 가로로 배치하려면
Row
위젯을 사용합니다. 가로와 세로 축 정렬을 각각CrossAxisAlignment
와MainAxisAlignment
로 제어할 수 있습니다. 예를 들어,Row
위젯을 사용해 여러 컨테이너나 텍스트를 수평으로 배치할 수 있습니다.
3.Align
Align(
alignment: Alignment.center
3. Align 위젯 사용
- 자식 위젯을 원하는 위치에 배치하고 싶을 때는
Align
위젯을 사용할 수 있습니다.
- 예를 들어,
Align(alignment: Alignment.centerLeft)
는 자식 위젯을 가로로 왼쪽에, 세로로 가운데에 정렬합니다.
ListView
,Column
,Row
는 자식 위젯의 배치와 정렬을 제어하는 데 중요한 역할을 합니다.CrossAxisAlignment
와MainAxisAlignment
를 통해 각 축에서의 정렬을 세부적으로 조정할 수 있고, 필요에 따라Align
위젯으로 정밀한 위치 조정을 할 수 있습니다.
1. ListView

2. Container 위젯

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
는 두 가지 방식으로 동작합니다:- 자식이 없는 경우:
Container
는 가능한 최대 크기를 차지하려고 합니다. - 자식이 있는 경우: 자식 위젯의 크기에 맞게
Container
의 크기가 조정됩니다.
- 코드 예시에서는 두 개의
Container
가 중첩되어 있으며, 각각의Container
는 주어진height
와width
값에 맞춰 크기가 결정됩니다.
BoxConstraints와 double.infinity
BoxConstraints
는 위젯의 크기를 제약할 수 있습니다.minWidth
,minHeight
,maxWidth
,maxHeight
등을 설정하여 위젯이 최소 또는 최대 얼마만큼 커질 수 있는지를 정의할 수 있습니다.
- *
double.infinity
*는 Flutter에서 가능한 최대 크기를 의미합니다. 즉,minWidth: double.infinity
로 설정하면 가로로 가능한 모든 공간을 차지하게 됩니다.
3. Align (CAC 정렬)

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

위젯 추출 (Extract Flutter Widget) 기능 설명:
- 중복된 UI를 재사용:
- 특정 UI 부분이 다른 화면에서도 동일하게 사용된다면, 그 부분을 하나의 독립적인 위젯으로 추출하여 다른 위치에서도 쉽게 사용할 수 있습니다.
- 코드 가독성 향상:
- 추출된 위젯은 기존의 복잡한 UI 코드를 단순화해주며, 각 위젯의 역할이 명확해집니다. 이렇게 하면 코드의 가독성과 유지보수성이 향상됩니다.
- 재사용 가능성:
- 추출된 위젯은 다른 화면에서도 불필요한 복사/붙여넣기 없이 재사용할 수 있으므로, 코드 중복을 줄일 수 있습니다.
사용 예:
- 예를 들어, 리스트 항목이 여러 화면에서 동일하게 사용된다면, 해당 항목 UI를 별도의 위젯으로 추출할 수 있습니다.
- Flutter에서는
Extract Flutter Widget
기능을 사용해 쉽게 특정 UI를 추출할 수 있으며, 이 과정을 통해 별도의 StatelessWidget이나 StatefulWidget을 만들 수 있습니다.
UI를 재사용하고 유지보수할 수 있도록 분리하는 것이 Flutter 개발에서 중요한 역할을 합니다.
5. const 설명! (중요함!!!!)
Flutter에서 const
의 중요성
Flutter에서
const
는 성능 최적화에 매우 중요한 역할을 합니다. 예를 들어, 반복적으로 사용되는 위젯이나 변경되지 않는 위젯을 const
로 선언하면, 같은 메모리 주소를 참조하게 되어 재사용이 가능하고, 불필요한 빌드가 줄어듭니다.Flutter에서의 const
- 불변성:
const
로 선언된 객체는 한 번 생성되면 절대 변경되지 않습니다. Flutter에서는 위젯 트리가 자주 다시 빌드되므로, 불필요한 객체 생성을 막기 위해const
를 사용하여 메모리에 한 번만 객체를 올려두고 재사용할 수 있습니다.- 이로 인해 중복된 객체 생성을 줄여 성능을 최적화할 수 있습니다. 예를 들어,
Text
위젯을 여러 번 사용해도const
가 선언된 경우, 메모리에는 한 번만 객체가 할당됩니다.
- 컴파일 타임 상수:
const
는 컴파일 타임에 결정되는 상수입니다. 이는 프로그램이 실행되기 전에 이미 객체가 정의되고 메모리에 할당된다는 의미입니다. 예를 들어, 숫자, 문자열 등은const
로 정의될 수 있지만, 런타임에 결정되는 값은const
로 사용할 수 없습니다.
const x = 100; // 컴파일 타임 상수
final y = DateTime.now(); // 런타임 상수
위와 같이,
const
는 컴파일 시점에 값이 정해진 객체에만 사용할 수 있습니다.- 상태가 없는 객체에 적합:
- 상태가 변하지 않는 객체에
const
를 사용할 수 있습니다. 예를 들어, Flutter에서StatelessWidget
은 상태가 없으므로,const
로 선언하여 메모리에서 재사용할 수 있습니다. - 하지만, 상태가 있는 객체나 변할 수 있는 데이터를 가진 **
StatefulWidget
*은const
로 선언할 수 없습니다. 이는 객체의 상태가 변할 수 있기 때문입니다.
- 위젯 재사용과 성능 최적화:
- Flutter는 위젯 트리에서 자주 다시 빌드되지만,
const
로 선언된 위젯은 다시 빌드되지 않고, 기존에 메모리에 할당된 객체를 재사용합니다. 이로 인해 렌더링 성능이 크게 향상됩니다. - Flutter에서 UI 성능을 최적화하기 위해
const
는 매우 중요한 역할을 합니다. 매번 새로운 객체를 생성하지 않고, 기존에 생성된 객체를 재사용함으로써 메모리 사용을 최소화하고 렌더링 속도를 높일 수 있습니다. - 특히, 같은 값을 반복해서 사용하는 위젯이나 데이터는 가능한 한
const
로 선언하는 것이 성능 최적화에 유리합니다. - 이 예제에서는 불변 객체를 설명합니다.
Dog
클래스는const
생성자로 선언되었으며, 객체d1
과d2
는 같은 인스턴스로 취급됩니다. 즉, 메모리 상에 한 번만 로드되고,d1
과d2
는 동일한 객체를 가리킵니다. - 결과적으로 두 객체의 해시코드(hashCode)는 동일하게 출력됩니다. 이는
const
의 핵심 개념 중 하나인 객체 재사용을 보여줍니다. const
로 선언된 객체는 동일한 상태를 가지면 메모리에서 한 번만 생성되어 성능 최적화가 가능합니다.- 이번에는
Dog
클래스에 상태(age
)가 추가되었습니다. 두 개의Dog
객체는 각각 다른age
값을 가지기 때문에, 서로 다른 객체로 간주됩니다. 결과적으로d1
과d2
는 서로 다른 해시코드를 출력하게 됩니다. - 이 예제는
const
가 객체의 값에 따라 다르게 동작한다는 것을 보여줍니다. 값이 다르면 서로 다른 객체로 취급되며, 이는 불변성을 유지하면서도 상태를 가진 객체를 처리하는 방법입니다. const
로 선언된 객체는 값이 다르면 다른 객체로 취급됩니다. 즉, 동일한 상태의 객체만 재사용됩니다.- 이 예제에서는
const
없이Dog
객체를 생성하고 있습니다.d1
과d2
는 동일한 값을 가지지만,const
를 사용하지 않았기 때문에 매번 새로운 객체로 생성됩니다. - 그 결과, 두 객체는 각각 다른 해시코드를 가지고 메모리 상에서 별도로 관리됩니다.
const
를 사용하지 않으면 동일한 값을 가진 객체라도 매번 새로운 객체가 생성됩니다. 이는 메모리 사용 측면에서 비효율적일 수 있습니다.
Flutter에서 const
의 중요성
예제 1:
const
가 적용된 기본 클래스class Dog {
const Dog();
}
void main() {
Dog d1 = const Dog();
print(d1.hashCode);
Dog d2 = const Dog();
print(d2.hashCode);
}
설명:
핵심 포인트:
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);
}
설명:
핵심 포인트:
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);
}
설명:
핵심 포인트:
Share article