Flutter 일기
참고 1 : https://api.flutter.dev/flutter/widgets/DefaultTextStyle/DefaultTextStyle.html

DefaultTextStyle

DefaultTextStyle. 플러터 튜토리얼 유튜브에서 볼 때, 가끔 등장했던 클래스이다. 자식으로 두는 텍스트 위젯들의 스타일을 결정한다. 자식으로 오는 텍스트 위젯에 스타일이 명시되어 있지 않으면, 일괄적으로 적용한다. 자식 위젯에 스타일이 따로 적용되어 있다면, 그것이 DefaultTextStyle의 속성보다 우선적으로 적용된다.

텍스트 위젯을 여러 개 써야할 때 스타일을 일일이 적용하지 않고, DefaultTextStyle 클래스를 활용해 몽땅 적용할 수 있다.

DefaultTextStyle은 안에 자손들 많이 넣을 때 쓰면 편한거라서, child 인자에 Text위젯 하나만 덜렁 써놓으면 사용하는 의미가 없다. Row나 Column을 먼저 넣어서 children 에 Text 위젯들을 몰아넣고, 한번에 스타일을 적용하는 것이다.

물론 모든 텍스트 위젯의 스타일이 다르다면? 안 사용하는게 낫다. 근데 텍스트가 한 10개 되는데 그 중에 한두 개만 스타일을 다르게(또는 추가로) 적용한다? 이럴 때 사용하는 것!

사용법도 어렵지 않으니 바로 코드로 넘어가보자.

코드 예시로 알아보자

오늘 건 너무 간단해서 내가 대충 만들었다.
필수 인자(argument)는 child, style 이다. 이것만 써 넣어도 돌아간다.

나머지 인자는 Text 위젯과 거의 비슷한 거 같은데, TextOverflow와 maxLines 정도는 Text 위젯에 쓸 때도 많으니 알아두는 것이 편할 것이다.

(그러고보니 Text 위젯은 자주 쓰는데도 인자들에 대해 공부해 본적이 없구만... 다음에 일기로 써봐야겠다.)

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DefaultTextStyle'),
      ),
      // 요기
      body: DefaultTextStyle(
      	// 스타일 적용
      	style: Theme.of(context).textTheme.headline1!,
        // 스타일을 적용할 자손들
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text('hello'),
            Text('World'),
            Text(
              'hi',
              style: TextStyle(color: Colors.red),
            ),
            Text(
              'how are you?',
              style: TextStyle(fontSize: 30),
            ),
            Text("I'm fine"),
          ],
        ),
      ),
    );
  }
}

코드에서는 세 번째, 네 번째 텍스트에는 따로 스타일을 적용했다. 그랬더니 이 두개만 스타일이 다르고, 나머지는 headline1 스타일이 그대로 적용되었다.




공부하다가 한번씩 발견하는데, 늘 정확한 사용법을 모르는 채로 따라해서 오늘은 일기에 적어보았다.
오늘의 일기는 여기까지!