GoogleFonts

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.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: GoogleFonts.itimTextTheme(),
        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: GoogleFonts.itimTextTheme(
          ThemeData(brightness: Brightness.dark).textTheme,
        ),
        brightness: Brightness.dark,
        scaffoldBackgroundColor: Colors.black,
        bottomAppBarTheme: BottomAppBarTheme(
          color: Colors.grey.shade900,
        ),
        primaryColor: const Color(0xFFE9435A),
      ),
      home: const SignUpScreen(),
    );
  }
}

이 코드는 Flutter 앱에서 Google Fonts를 사용하여 앱 전체의 텍스트 스타일을 설정하는 방법을 보여줍니다. Google Fonts는 다양한 사용자 정의 폰트를 쉽게 Flutter 앱에 적용할 수 있는 방법을 제공합니다. 이 예제에서는 GoogleFonts.itimTextTheme()을 사용하여 앱의 기본 텍스트 테마를 구성하고 있습니다.

Google Fonts 적용 과정:

1. 의존성 추가:

   • pubspec.yaml 파일에 google_fonts 패키지를 의존성으로 추가합니다. 이를 통해 Google Fonts 라이브러리를 프로젝트에 포함시킬 수 있습니다.

2. 텍스트 테마 설정:

   • MaterialApp 위젯의 theme 및 darkTheme 속성에 GoogleFonts를 사용하여 앱의 라이트 모드와 다크 모드에 대한 텍스트 테마를 설정합니다.
   • textTheme: GoogleFonts.itimTextTheme()를 사용하여, Itim 폰트 스타일을 앱의 기본 텍스트 테마로 지정합니다. 다크 모드에서는 GoogleFonts.itimTextTheme(ThemeData(brightness: Brightness.dark).textTheme)를 사용하여 다크 모드의 텍스트 테마에 Itim 폰트 스타일을 적용합니다.

3. SystemChrome 설정:

   • SystemChrome.setPreferredOrientations() 메서드를 사용하여 앱이 세로 방향(portraitUp)에서만 실행되도록 설정합니다. 이는 앱의 지원 방향을 제한하는 데 사용됩니다.

코드의 주요 특징:

• ThemeMode.system: 사용자의 시스템 설정(라이트 모드 또는 다크 모드)에 따라 앱의 테마 모드가 자동으로 전환됩니다.
• Google Fonts 폰트 적용: textTheme에 GoogleFonts.itimTextTheme()을 적용하여, Itim 폰트를 앱의 기본 텍스트 테마로 사용합니다. 이를 통해 앱의 모든 텍스트 위젯에 일관된 폰트 스타일이 적용됩니다.
• 디자인 커스터마이징: AppBarTheme, TextSelectionThemeData, BottomAppBarTheme 등을 사용하여 앱 바, 텍스트 선택, 하단 앱 바 등의 디자인을 세부적으로 조정합니다. 이러한 설정은 Google Fonts 폰트와 함께 앱의 전반적인 사용자 경험을 향상시키는 데 기여합니다.

결론:

이 코드는 Google Fonts를 사용하여 Flutter 앱에 아름답고 일관된 폰트 스타일을 쉽게 적용하는 방법을 보여줍니다. google_fonts 패키지를 사용하면, 다양한 사용자 정의 폰트를 앱에 손쉽게 통합할 수 있으며, 이를 통해 앱의 시각적 매력을 높일 수 있습니다.