[월:] 2023년 02월

scaffold widget의 appBar에 대해서 전역 스타일일 적용하는 방법

개발하는 앱에서 AppBar를 사용하고 있다면 일괄적으로 style을 적용해야할것이다.

// main.dart

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: const AppBarTheme(
            backgroundColor: Colors.white,
            titleTextStyle: TextStyle(
              color: Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.w100,
            )),
      ),
      home: const SignUpScreen(),
    );
  }
}

main.dart의 theme: ThemeData를 통해 scaffold 전역 스타일을 지정할수 있다.

예를 들어 appBarTheme: AppBarTheme는 scaffold의 AppBar에 적용되는 스타일을 정의하는데 내용은 아래와 같다.

// appbar의 background color
backgroundColor: Colors.white

// title 속성의 Text 스타일
ttitleTextStyle: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.w100,
)