tiktokclone: AppBarTheme

앱의 ui를 설계할 때 디자인이 통일되도록 비슷하게 설정할 때가 있다. 이를 매 페이지에 복사붙여넣기 하지 않고 테마로 설정해두면 유용하게 사용할 수 있다. 여러 위젯 중 AppBar의 테마 설정을 위해 AppBarTheme을 기록한다.

위 사진처럼 회원가입 과정에 화면에 나타낼 AppBar의 글자 색, 글자 스타일, 배경 색을 main.dart의 theme으로 미리 설정해둘 수 있다. 이렇게 설정하면 매 Screen마다 디자인을 반복적으로 설정하지 않아도 자동으로 설정된다.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tiktok Clone',
      theme: ThemeData(
        appBarTheme: const AppBarTheme(
            foregroundColor: Colors.black,
            backgroundColor: Colors.white,
            titleTextStyle: TextStyle(
              fontSize: Sizes.size24,
              color: Colors.black,
              fontWeight: FontWeight.w600,
            )),
        primaryColor: const Color(0xFFE9435A),
        scaffoldBackgroundColor: Colors.white,
      ),
      home: const SignUpScreen(),
    );

https://github.com/soaringwave/tiktokclone/commit/e610886cd80e1cb619b15b2cda99e104fb4b1100