[Flutter] Flutter 앱 개발에서의 계층 구조

계층 구조는 Flutter 앱 개발에서 중요한 개념 중 하나입니다. Flutter에서는 위젯과 레이아웃을 조합하여 앱의 계층 구조를 형성합니다. 계층 구조를 이해하면 앱의 UI를 유연하게 구성하고 상호작용할 수 있습니다.

위 코드는  Flutter 프로젝트를 생성했을 때 제공되는 간단한 앱 예제입니다. 아래에서 각 부분을 자세히 살펴보겠습니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),  // 앱 바의 제목을 위젯의 속성으로 설정
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headlineMedium,  // 테마를 사용하여 텍스트 스타일을 설정
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,  // 버튼이 클릭되었을 때 호출되는 함수 설정
      tooltip: 'Increment',
      child: const Icon(Icons.add),  // 버튼에 아이콘 추가
    ),
  );
}

위 코드에서는 `Scaffold` 위젯을 기반으로 계층 구조를 형성하고 있습니다. `Scaffold`는 일반적인 앱 구조를 제공하는 위젯으로, 앱 바, 본문, 부동 액션 버튼 등을 포함할 수 있습니다.

• `appBar`: 앱 바를 구성하는 위젯으로, `AppBar` 위젯을 사용하여 제목을 표시합니다. `title` 속성을 통해 제목을 설정할 수 있습니다.

• `body`: 앱의 본문을 구성하는 위젯으로, `Center`와 `Column`을 조합하여 가운데 정렬된 칼럼 형태의 위젯을 생성합니다. 텍스트 위젯과 변수 값을 보여주는 위젯이 포함되어 있습니다. 이렇게 계층 구조를 형성하여 여러 위젯을 배치할 수 있습니다.

• `floatingActionButton`: 부동 액션 버튼을 구성하는 위젯으로, `FloatingActionButton` 위젯을 사용하여 버튼을 만듭니다. `onPressed` 속성에는 버튼이 클릭되었을 때 호출되는 함수를 설정할 수 있으며, `tooltip` 속성을 통해 버튼에 대한 설명을 추가할 수 있습니다.

이러한 계층 구조를 통해 위젯은 부모와 자식 관계를 형성하고, 상태를 관리하거나 상호작용할 수 있습니다. 예를 들어 버튼을 클릭했을 때 상태를 변경하거나 다른 위젯의 속성을 업데이트할 수 있습니다.

Flutter 앱 개발에서 계층 구조는 앱의 UI를 구성하고 관리하는 핵심 개념입니다. 위젯과 레이아웃을 조합하여 다양한 UI 요소를 배치하고 상호작용할 수 있습니다. 앱의 계층 구조를 활용하여 사용자 경험을 향상하는 앱을 개발해 보시는 건 어떨까요?