[노마드코더: Flutter 로 웹툰 앱 만들기] #4.3 BuildContext

 

이번 강의에서는 Theme 설정을 주는 방법을 알아본다
매번 위젯에 색상 설정을 하는 게 아니라 아예 앱의 디폴트 값을 설정하는 방법이다.

 

import 'package:flutter/material.dart';

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

class App extends StatefulWidget {
  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          textTheme: const TextTheme(
              titleLarge: TextStyle(
            color: Colors.red,
          )),
          backgroundColor: const Color(0xFFF4EDDB)),
      home: Scaffold(
        body: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            MyLargeTitle(),
          ],
        )),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Text(
      'My Large Title',
      style: TextStyle(
        fontSize: 30,
        color: Theme.of(context).textTheme.titleLarge!.color,
      ),
    );
  }
}

 

MyLargeTitle 함수를 작성하고
Extract Widget을 한다. 

그리고 MaterialApp() 하위에 이러한 코드를 작성해준다.

theme: ThemeData(
	textTheme: const TextTheme(
    	titleLarge: TextStyle(
        	color: Colors.red,
        )), backgroundColor: const Color(0xFFF4EDDB)),

 

 

 @override
  Widget build(BuildContext context) {
    return Text(
      'My Large Title',
      style: TextStyle(
        fontSize: 30,
        color: Theme.of(context).textTheme.titleLarge!.color,
      ),
    );
  }

nullSafety인 Dart는 에러를 띄우는데 그래서 titleLarge옆에 느낌표를 붙여준다.
물음표를 붙여줘도 에러가 사라짐

 

헷갈리는 강의...........

다시 듣고 오니 이해가 간다............!

화면 상에서 titleLarge는 가장 큰 폰트를 가진 가진 속성 값을 설정하는 함수인 것 같다

 

context contains information about the widget tree

it allows us to get the data from very far away father.
it allows us to access to the data of your parents.