플러터 기초 - BuildContext

플러터에서 각 종 위젯 클래스와 State 클래스를 보면 위젯을 반환하는 Build 함수를 갖고 있는 것을 볼 수 있다.

 

그리고 해당 함수를 보면 BuildContext로 된 context를 매개변수로 갖는데 

 

여기서 BuildContext가 어떤 의미를 갖는지 알아본다.

 

(다음과 같이 BuildContext를 갖고 있는 build 함수)

 

class MyLargeTitle extends StatelessWidget {
  const MyLargeTitle({
    Key? key,
  }) : super(key: key);
	
  @override
  Widget build(BuildContext context) {
  
  ~~~
  
  }

---

예시 코드 만들기

BuildContext를 이해하기 위해 다음과 같이 코드를 작성한다.

 

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int counter = 0;

  // 단순하게 TextView를 하나 표시하는 UI
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(
          titleLarge: TextStyle(
            color: Colors.red,
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              MyLargeTitle(),
            ],
          ),
        ),
      ),
    );
  }
}

// 따로 Widget 클래스를 만들어서 빼놨음
class MyLargeTitle extends StatelessWidget {
  const MyLargeTitle({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Text(
      "My Large Title",
      style: TextStyle(
        fontSize: 28,
        color: Colors.red,
      ),
    );
  }
}

 

위 코드를 사용하여 다음과 같은 동작을 실현하려고 한다.

1. 최상위 위젯에 Theme을 정의
2. 하위 위젯에서 해당 Theme에 정의되어있는 내용을 사용
3. 위 과정에서 BuildContext를 이용

---

BuildContext 란?

BuildContext란 모든 부모요소의 정보를 갖고 있는 객체를 의미한다.

 

그렇기 때문에 하위 위젯에서 부모 위젯의 정보에 접근할 수 있다.

 

그렇게해서 Theme에 접근할 수 있다.

 

MyLargeTitle class

class MyLargeTitle extends StatelessWidget {
  const MyLargeTitle({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      "My Large Title",
      style: TextStyle(
        fontSize: 28,
        // of() 함수를 사용해서 부모 위젯에 접근 가능
        color: Theme.of(context).textTheme.titleLarge?.color,
      ),
    );
  }
}

 

이와 같이 BuildContext를 사용하면 부모 위젯의 정보에 접근할 수 있다.

---

 

플러터 기초 - https로 데이터 받고 JSON으로 변환하기