flutter 면접질문 #4 BuildContextlitenews, 라이트 뉴스, ITNews, 어도비 뉴스,Adobe news

안녕하세요 아이티 박사 Ho입니다.

flutter 면접질문 #4 BuildContext에 대해서 알아보겠습니다.

Flutter에서 BuildContext는 위젯 트리 내의 위젯 위치에 대한 정보를 가지고 있는 객체입니다. 각 위젯은 build 메서드를 통해 자신의 부분을 그리는 데 BuildContext를 사용합니다. BuildContext는 위젯이 위젯 트리의 어디에 있는지, 부모와 자식 위젯은 무엇인지 등의 정보를 알 수 있게 해줍니다. 이를 통해 개발자는 위젯 트리의 다른 부분과 상호작용하거나, 특정 데이터에 접근하거나, 위젯을 조작할 수 있습니다.

BuildContext의 주요 사용 사례

테마 접근: 현재의 BuildContext를 사용하여 ThemeData 같은 가장 가까운 테마를 찾을 수 있습니다.

상속된 위젯 접근: BuildContext를 사용하여 InheritedWidget에서 데이터를 조회할 수 있습니다. 예를 들어, MediaQuery.of(context)를 호출하여 현재 미디어 쿼리 정보에 접근할 수 있습니다.

네비게이션: Navigator.of(context)를 사용하여 현재 BuildContext에서 네비게이터를 찾고, 새로운 화면으로 이동하거나 현재 화면을 종료할 수 있습니다.

예시 코드

다음은 BuildContext를 사용하여 현재 테마의 색상을 가져와 버튼 색상으로 설정하는 간단한 예시입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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('BuildContext Example')),
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}
 
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 현재 테마 데이터에 접근합니다.
    final ThemeData theme = Theme.of(context);
 
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: theme.primaryColor, // 버튼의 배경색을 테마의 기본 색상으로 설정합니다.
      ),
      onPressed: () {
        // 버튼이 눌렸을 때 실행할 동작
      },
      child: Text('Press Me'),
    );
  }
}
 
Colored by Color Scripter
cs

이 예시에서 MyButton 위젯의 build 메서드는 BuildContext 객체인 context를 매개변수로 받습니다. 이 context를 사용하여 Theme.of(context)를 호출함으로써 현재 테마 데이터에 접근할 수 있습니다. 그런 다음, 이 테마 데이터로부터 기본 색상을 가져와 ElevatedButton의 style에서 버튼의 배경색으로 설정합니다.