Flutter - 4.3 BuildContext

BuildContext.
Flutter 공식 문서에 따르면...https://api.flutter.dev/flutter/widgets/BuildContext-class.html

BuildContext class - widgets library - Dart API

아니다. 대충 읽어봤는데, 그냥 넘어가도 되겠더라.

context의 뜻은 '맥락', '문맥' 이런 뜻이라는 것을 알면 뭔가 감이 올지도 모르겠다.
일단 그렇다 치고 넘어가자.

BuildContext에 있는 'context'는 부모 요소들에 대한 정보가 들어가 있다.
BuildContext는 그러니까, 위젯 트리 안에서 위젯의 위치를 제공하고, 이를 통해서 상위 요소 데이터에 접근이 가능하다.

이제 내가 왜 context 뜻을 왜 언급했냐면.... 딱 '맥락'을 뜻하기 때문이다.
부모 요소들에 대한 정보들을 참고해서 '맥락에 맞게' 위젯을 변화한다고 이해하면 될 것 같다.

그래서, MaterialApp의 테마를 지정해주고, MyLargeTitle이라는 위젯으로 새로 만들어주면...

class _AppState extends State<App> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData(

        textTheme: const TextTheme(

          titleLarge: TextStyle(

            color: Colors.red,

          ),

        ),

      ),

      home: const Scaffold(

        backgroundColor: Color(0xFFF4EDDB),

        body: Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              MyLargeTitle(),

            ],

          ),

        ),

      ),

    );

  }

}

theme에서 textTheme를 설정한 모습니다.(titleLarge만 설정했다.)
이렇게 해주면 MaterialApp에 있는 테마를 MyLargeTitle에서 불러올 수 있다.
아래와 같이.

class MyLargeTitle extends StatelessWidget {

  const MyLargeTitle({

    super.key,

  });

  @override

  Widget build(BuildContext context) {

    return Text(

      'My Large Title',

      style: TextStyle(

          fontSize: 30,

          color: Theme.of(context).textTheme.titleLarge!.color),

    );

  }

}

Theme.of(context).textTheme.titleLarge.color
이것을 이용해서 MaterialApp에서 설정한 테마를 가져온 것이다.
하지만, dart는 titleLarge가 null값이 될 수 있음을 걱정한다.

그래서 '!'를 붙여서 해결한다.('?'를 붙여서 해결할 수도 있다.)

1. ! : null이 아니라고 강력하게 확신한다는 의미
2. ? : null이 아니라면 사용하라는 의미.

'상위 요소 데이터에 접근 가능하다'는 사실에 주의하자. 이후에 있는 값들은 불러오지 못하는 것 같다.

하... 내가 AI로 flutter 앱 만들때 테마가 적용이 안되서 개고생해서 고친 기억이 있는데, 이런 방법이 있었으면.... 편하게 했을텐데.............

전체 코드:

import 'package:flutter/material.dart';

void main() {

  runApp(const App());

}

// 위젯 그 자체

class App extends StatefulWidget {

  const App({super.key});

  @override

  State<App> createState() => _AppState();

}

// state: 위젯에 들어갈 데이터와 UI를 넣는 곳

class _AppState extends State<App> {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      theme: ThemeData(

        textTheme: const TextTheme(

          titleLarge: TextStyle(

            color: Colors.red,

          ),

        ),

      ),

      home: const Scaffold(

        backgroundColor: Color(0xFFF4EDDB),

        body: Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              MyLargeTitle(),

            ],

          ),

        ),

      ),

    );

  }

}

class MyLargeTitle extends StatelessWidget {

  const MyLargeTitle({

    super.key,

  });

  @override

  // context: 모든 부모 요소들에 대한 정보

  // 위젯 트리 안에서 위젯의 위치를 다룸.

  // 위젯 트리에서 위젯의 위치를 제공하고, 이를 통해 상위 요소 데이터에 접근 가능.

  Widget build(BuildContext context) {

    return Text(

      'My Large Title',

      style: TextStyle(

          // ! : null이 아니라고 강력하게 확신한다는 의미.

          // ? : null이 아니라면 사용하라는 의미.

          fontSize: 30,

          color: Theme.of(context).textTheme.titleLarge!.color),

    );

  }

}

결과는 다음과 같다: