Typography

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:tiktok_clone/constants/sizes.dart';
import 'package:tiktok_clone/features/authentication/sign_up_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setPreferredOrientations(
    [
      DeviceOrientation.portraitUp,
    ],
  );

  runApp(const TikTokApp());
}

class TikTokApp extends StatelessWidget {
  const TikTokApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TikTok Clone',
      themeMode: ThemeMode.system,
      theme: ThemeData(
        textTheme: Typography.blackMountainView,
        brightness: Brightness.light,
        scaffoldBackgroundColor: Colors.white,
        primaryColor: const Color(0xFFE9435A),
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: Color(0xFFE9435A),
        ),
        splashColor: Colors.transparent,
        appBarTheme: const AppBarTheme(
          foregroundColor: Colors.black,
          backgroundColor: Colors.white,
          elevation: 0,
          titleTextStyle: TextStyle(
            color: Colors.black,
            fontSize: Sizes.size16 + Sizes.size2,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      darkTheme: ThemeData(
        textTheme: Typography.whiteMountainView,
        brightness: Brightness.dark,
        scaffoldBackgroundColor: Colors.black,
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.grey.shade900,
        ),
        bottomAppBarTheme: BottomAppBarTheme(
          color: Colors.grey.shade900,
        ),
        primaryColor: const Color(0xFFE9435A),
      ),
      home: const SignUpScreen(),
    );
  }
}

이 코드에서 Typography는 Flutter의 ThemeData를 설정할 때 사용되며, 앱의 전반적인 텍스트 스타일링을 결정하는 데 도움을 줍니다. Typography 클래스는 미리 정의된 텍스트 스타일의 모음입니다. Flutter는 다양한 텍스트 테마를 제공하며, 여기서는 blackMountainView와 whiteMountainView를 사용하여 라이트 모드와 다크 모드의 텍스트 테마를 각각 설정합니다.

코드 설명:

• textTheme: Typography.blackMountainView: 이 설정은 라이트 모드에서 사용될 기본 텍스트 테마를 지정합니다. blackMountainView는 라이트 모드에 적합한 색상 대비를 가진 텍스트 스타일을 제공합니다.

• textTheme: Typography.whiteMountainView: 이 설정은 다크 모드에서 사용될 기본 텍스트 테마를 지정합니다. whiteMountainView는 다크 모드에 적합한 밝은 색상의 텍스트 스타일을 제공하여, 어두운 배경에서의 가독성을 높입니다.

주요 속성과 테마 설정:

• brightness: 앱의 전반적인 밝기 모드를 설정합니다. Brightness.light는 라이트 모드, Brightness.dark는 다크 모드를 나타냅니다.

• scaffoldBackgroundColor: Scaffold 위젯의 배경 색상을 설정합니다. 라이트 모드에서는 흰색(Colors.white), 다크 모드에서는 검은색(Colors.black)으로 설정됩니다.

• primaryColor: 앱의 주 색상을 설정합니다. 이 예제에서는 Color(0xFFE9435A)로 지정되어, 앱의 버튼, 아이콘 등에 사용됩니다.

• appBarTheme: 앱 바의 스타일을 설정합니다. 여기서는 foregroundColor, backgroundColor, elevation, titleTextStyle 등을 지정하여 라이트 모드와 다크 모드에서 앱 바의 외관을 조정합니다.

결론:

Typography를 사용함으로써, Flutter 앱은 라이트 모드와 다크 모드에 적합한 텍스트 스타일을 쉽게 적용할 수 있습니다. 이를 통해 앱의 사용성과 가독성을 향상시킬 수 있으며, 사용자가 시스템 설정을 변경할 때 자동으로 적절한 테마가 적용되도록 할 수 있습니다. ThemeData를 통해 정의된 스타일은 앱 전체에 일관되게 적용되어, 개발자가 앱의 시각적 일관성을 유지하기 쉽게 해줍니다.