Flutter 入门与实战（四）：设置 App 的主色调与字体

2401_84149802

于 2024-04-17 07:29:20 发布

阅读量961

点赞数 11

分类专栏：程序员文章标签： flutter javascript 前端

本文链接：https://blog.csdn.net/2401_84149802/article/details/137853067

版权

本文介绍了如何在Flutter中设置App的主色调和字体，通过MaterialApp的theme属性配置ThemeData，包括primaryColor、accentColor和textTheme。此外，文章还展示了如何在Widget中继承和使用这些主题设置，并提供了代码示例。

摘要由CSDN通过智能技术生成

Flutter 的主题色和字体可以在MaterialApp 中设置，即在 main.dart 的入口返回的 MaterialApp 组件统一设置全局的主色调和字体。如下面的代码所示：

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘App 框架’,
theme: ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.blue[600],
textTheme: TextTheme(
headline1: TextStyle(
fontSize: 36.0, fontWeight: FontWeight.bold, color: Colors.white),
headline2: TextStyle(
fontSize: 32.0, fontWeight: FontWeight.w400, color: Colors.white),
headline3: TextStyle(
fontSize: 28.0, fontWeight: FontWeight.w400, color: Colors.white),
headline4: TextStyle(
fontSize: 24.0, fontWeight: FontWeight.w400, color: Colors.white),
headline6: TextStyle(
fontSize: 14.0, fontWeight: FontWeight.w200, color: Colors.white),
bodyText1: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w200,