BuildContext

Flutter에서 위젯 트리 위치와 상호작용 관리: BuildContext

Flutter에서 BuildContext는 위젯 트리의 현재 위치를 나타내는 객체입니다. 이를 통해 Flutter는 위젯 트리에서 해당 위젯의 위치를 알고, 부모 또는 자식 위젯과의 상호작용을 관리할 수 있습니다.

주요 속성

• 위젯 트리 탐색: BuildContext를 사용하여 부모, 자식 또는 형제 위젯에 접근할 수 있습니다.
• 테마 접근: Theme.of(context)를 사용하여 현재 테마에 접근할 수 있습니다.
• 네비게이터 사용: Navigator.of(context)를 사용하여 화면 전환을 관리할 수 있습니다.
• MediaQuery 사용: MediaQuery.of(context)를 사용하여 화면 크기, 해상도 등의 정보에 접근할 수 있습니다.

주요 활용도

• 위젯 트리 탐색: BuildContext를 통해 부모, 자식 또는 형제 위젯에 접근하여 위젯 트리 내에서 상호작용할 수 있습니다.
• 테마 접근: Theme.of(context)를 사용하여 현재 테마의 스타일과 색상 등을 적용할 수 있습니다.
• 네비게이터 사용: Navigator.of(context)를 사용하여 화면 전환을 관리하고, 새로운 화면을 푸시하거나 현재 화면을 팝할 수 있습니다.
• 화면 속성 정보 접근: MediaQuery.of(context)를 사용하여 디바이스의 화면 크기, 해상도, 방향 등의 정보를 얻을 수 있습니다.

위젯 트리와 BuildContext의 관계

1. 위젯 트리의 구성:
   Flutter는 모든 것이 위젯으로 만들어져 있으며, 이러한 위젯들을 조합하여 위젯 트리를 만듭니다. 위젯 인스턴스는 트리상의 다양한 위치에 결합될 수 있습니다. 위젯 트리상의 위치 정보는 위젯 인스턴스의 트리상 위치에 따라 다릅니다.

2. Element와 BuildContext:
   위젯 트리상의 위치 정보는 Element 객체가 가지고 있으며, Element는 위젯 생성 시 내부적으로 함께 생성됩니다. Element는 BuildContext를 구현한 클래스입니다. 따라서 BuildContext는 위젯 트리상의 위치 정보를 가진 객체로 이해할 수 있습니다.

3. BuildContext와 build() 메서드:
   위젯 트리상의 위치 정보는 build()가 호출될 때 BuildContext로 전달됩니다. 예를 들어:

   Widget build(BuildContext context) {
     return Container();
   }

BuildContext의 다양한 사용 사례

1. InheritedWidget 접근:
   context.dependOnInheritedWidgetOfExactType()를 사용하여 현재 위치를 기준으로 가장 가까운 부모 InheritedWidget을 조회할 수 있습니다.

2. Overlay 접근:
   Overlay.of(context)를 사용하여 조상 위젯에 있는 OverlayState를 조회하여 Overlay를 가져올 수 있습니다.

3. 위치에 따른 BuildContext의 차이:
   BuildContext는 위치에 따라 다른 정보를 가지고 있습니다. 예를 들어, Scrollable.ensureVisible()을 사용하여 특정 대상을 화면에 나타나도록 스크롤할 때, BuildContext를 이용하여 그 대상을 선정합니다.

코드 예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Column(
        children: [
          ThemedWidget(),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(builder: (context) => SecondPage()),
              );
            },
            child: Text('Go to Second Page'),
          ),
          ResponsiveWidget(),
          ChildWidget(),
        ],
      ),
    );
  }
}

class ThemedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).primaryColor,
      child: Center(
        child: Text('This is themed with the primary color'),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Text('This is the second page'),
      ),
    );
  }
}

class ResponsiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    return Center(
      child: Text('Screen size: ${screenSize.width} x ${screenSize.height}'),
    );
  }
}

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final scaffold = context.findAncestorWidgetOfExactType<Scaffold>();
    return Center(
      child: Text('Found ancestor: ${scaffold != null}'),
    );
  }
}

추가 팁

• 위젯 트리 탐색: context를 사용하여 부모 위젯이나 상위 트리의 다른 위젯에 접근합니다.
• 반응형 디자인: MediaQuery를 사용하여 다양한 화면 크기에 대응하는 반응형 디자인을 만듭니다.
• 테마 사용: Theme.of(context)를 사용하여 현재 테마의 스타일을 적용합니다.
• 네비게이터 사용: Navigator.of(context)를 사용하여 화면 전환을 관리합니다.

관련 자료

• BuildContext: BuildContext 클래스의 공식 문서입니다.
• Navigator: Navigator 클래스의 공식 문서입니다.
• MediaQuery: MediaQuery 클래스의 공식 문서입니다.
• Theme: Theme 클래스의 공식 문서입니다.