DARK MODE 15.1 ThemeMode 15.2 TextTheme 15.3 Google Fonts 15.4 Typography 15.5 Dark Mode part One 15.6 Dark Mode part Two 15.7 Dark Mode part Three 15.8 Material 3 Migration 15.9 Conclusions

shilf + ⌘ + a 누르면 다크 모드 된다.

 

15.1 ThemeMode

 

여기처럼 이미 하드코딩 되어 있는 곳은

여기서 처리하자

아니면 opacity로 처리

 

제일 좋은 방법은 main.dartp에 색 관련 설정 다 두기

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';

// phone 돌리지 않게 알리는 방법
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await SystemChrome.setPreferredOrientations(
    [
      DeviceOrientation.portraitUp,
    ],
  );
// dart모드 관련 설정:
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.dark,
  );
  runApp(const TikTokApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'TikTok Clone',
      
      
            -----------------
      // dark모드 관련 설정, system은 폰 설정에 따라간다.
      themeMode: ThemeMode.system,
      -----------------
      
      
      
      theme: ThemeData(
      
      
      -----------------
        //모든 텍스트에 관하여 dark모드에 맞는 색 적용
        brightness: Brightness.light,
      -----------------
      
      
        // 자세히 보면 scaffold는 약간 회색빛을 띄는데 이게 짜증나니 여기서 강제 흰색으로 지정
        scaffoldBackgroundColor: Colors.white,
        primaryColor: const Color(0xFFE9435A),
        textSelectionTheme: const TextSelectionThemeData(
          cursorColor: Color(0xFFE9435A),
        ),
        //onTap등의 누를 때의 파도치는 듯한 클릭 애니 안보이게 하기
        splashColor: Colors.transparent,
        //highlightColor: Colors.transparent,
        // appBar에서 글씨 지정하는 것도 어느정도 고정이니 여기서 전역적으로 지정하자
        appBarTheme: const AppBarTheme(
          foregroundColor: Colors.black,
          backgroundColor: Colors.white,
          // appbar와 navigationbar의 경계에 있는 그림자 수치
          elevation: 0,
          titleTextStyle: TextStyle(
            color: Colors.black,
            fontSize: Sizes.size16 + Sizes.size2,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
      
      
      
      ----------------
      // dark모드 관련 설정,
      darkTheme: ThemeData(
        //모든 텍스트에 관하여 dark모드에 맞는 색 적용
        brightness: Brightness.dark,
        scaffoldBackgroundColor: Colors.black,
        bottomAppBarTheme: BottomAppBarTheme(
          color: Colors.grey.shade900,
        ),
        primaryColor: const Color(0xFFE9435A),
              ----------------
              
              
              
      ),
      home: const SignUpScreen(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:tiktok_clone/constants/gaps.dart';
import 'package:tiktok_clone/constants/sizes.dart';
import 'package:tiktok_clone/features/authentication/login_screen.dart';
import 'package:tiktok_clone/features/authentication/username_screen.dart';
import 'package:tiktok_clone/features/authentication/widgets/auth_button.dart';
import 'package:tiktok_clone/utils.dart';

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

  // 버튼이나 글씨 누르면 다음 화면으로 넘어가는 함수
  void _onLoginTap(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        // 여기서 다음 dart파일로 이동하는 거 조종
        builder: (context) => const LoginScreen(),
      ),
    );
  }

  // 버튼이나 글씨 누르면 다음 화면으로 넘어가는 함수
  void _onEmailTap(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => const UsernameScreen(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    //smart폰의 방향을 알려주는 위젯
    return OrientationBuilder(
      builder: (context, orientation) {
        // // phone 돌리지 않게 알리는 방법
        // if (orientation == Orientation.landscape) {
        //   return const Scaffold(
        //     body: Center(child: Text("Plz rotate your phone.")),
        //   );
        // }
        return Scaffold(
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: Sizes.size40,
              ),
              child: Column(
                children: [
                  Gaps.v80,
                  const Text(
                    "Sign up for TikTok",
                    style: TextStyle(
                      fontSize: Sizes.size24,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                  Gaps.v20,
                  
                  
                  
          --------------------
                  // dark mode
                  const Opacity(
                    opacity: 0.7,
                    child: Text(
                      'Create a profile, follow other accounts, make your own videos, and more.',
                      style: TextStyle(
                        fontSize: Sizes.size16,
                        // dark mode
                        // color: isDarkMode(context)
                        //     ? Colors.grey.shade300
                        //     : Colors.black45,
                      ),
                                --------------------
                                
                                
                                
                                
                      textAlign: TextAlign.center,
                    ),
                  ),
                  Gaps.v40,
                  //correction if .. for는 하나 밖에 못쓴다.
                  if (orientation == Orientation.portrait)
                    //list를 이런식으로 써서 복수 적용(표시 안되게 함)
                    ...[
                    GestureDetector(
                      // email인증 하기 위해 클릭 가능하게
                      onTap: () => _onEmailTap(context),
                      child: const AuthButton(
                        icon: FaIcon(FontAwesomeIcons.user),
                        text: 'Use email and password',
                      ),
                    ),
                    Gaps.v16,
                    const AuthButton(
                      icon: FaIcon(FontAwesomeIcons.apple),
                      text: 'Continue with Apple',
                    ),
                  ],
                  if (orientation == Orientation.landscape)
                    Row(
                      children: [
                        //AuthButton에서 쓰고 있는 FractionallySizedBox관련 에러 고쳐 주기 위해 Expanded사용
                        Expanded(
                          child: GestureDetector(
                            // email인증 하기 위해 클릭 가능하게
                            onTap: () => _onEmailTap(context),

                            child: const AuthButton(
                              icon: FaIcon(FontAwesomeIcons.user),
                              text: 'Use email and password',
                            ),
                          ),
                        ),
                        Gaps.v16,

                        //AuthButton에서 쓰고 있는 FractionallySizedBox관련 에러 고쳐 주기 위해 Expanded사용
                        const Expanded(
                          child: AuthButton(
                            icon: FaIcon(FontAwesomeIcons.apple),
                            text: 'Continue with Apple',
                          ),
                        ),
                      ],
                    ),
                ],
              ),
            ),
          ),
          bottomNavigationBar: BottomAppBar(
          
          
          --------------------
            // dark mode
            color: isDarkMode(context) ? null : Colors.grey.shade50,
                      --------------------
                      
                      
            child: Padding(
              padding: const EdgeInsets.symmetric(
                vertical: Sizes.size32,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text('Already have an account?'),
                  Gaps.h5,
                  GestureDetector(
                    onTap: () => _onLoginTap(context),
                    child: Text(
                      'Log in',
                      style: TextStyle(
                          color: Theme.of(context).primaryColor,
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

 

15.2 TextTheme

 

하나하나 지정하지 말고 여기서 가져오기

https://m2.material.io/design/typography/the-type-system.html#type-scale

 

15.3 Google Fonts

 

15.4 Typography

 

Typography는 weight, height space, size 상관없이 내가 지정해서 쓸 수 있음

 

 

 

 

 

 

 

 

 

 

15.5 Dark Mode part One

 

왜인지 여기서 디폴트 컬러가 적용되고 있는 버그가 있어

 

이렇게 수정

 

 

 

 

 

 

 

 

 

15.6 Dark Mode part Two

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

15.7 Dark Mode part Three

option1

 

option2

 

 

 

 

 

 

15.8 Material 3 Migration

 

Material 3 에서는 BottomAppBar를 더 이상 쓸 수 없다.

 

 

 

스크롤할 때 색 변해서 색깔 통일

 

 

dark mode에서 타이틀 흰색으로 바꿧음

 

 

 

 

 

 

 

 

 

 

 

 

 

15.9 Conclusions

디자인 관련 설정 패키지: 위에서 한 거 이 패키지로 다 해결

https://pub.dev/packages/flex_color_scheme

플레이 그라운드도 있음