（八）使用界面组件Material定制界面主题

最新推荐文章于 2024-09-24 07:47:49 发布

JaysenLeo

最新推荐文章于 2024-09-24 07:47:49 发布

阅读量340

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端 Flutter Flutter教程文章标签： ThemeData 主题

本文为博主原创文章，转载文章须附上文章来源与作者。

本文链接：https://blog.youkuaiyun.com/ChangerJJLee/article/details/88355853

Web前端同时被 3 个专栏收录

27 篇文章

订阅专栏

Flutter教程

9 篇文章

订阅专栏

Flutter

6 篇文章

订阅专栏

本文介绍了如何在Flutter项目中利用MaterialApp的theme属性，通过ThemeData类来定制和设置独特的界面主题，提供个性化的用户体验。并附带了项目的Git仓库链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MaterialApp的主题定制

theme 属性应用ThemeData类来固件

import 'package:flutter/material.dart';

void main() =>  runApp(App());

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( 
          appBar: AppBar(
            title: Text('顶部工具栏标题'),
            elevation: 10.0, // 设置顶部阴影大小
          ),// 添加顶部工具栏
          body: HelloWidget()
      ), 
      theme: ThemeData(
          primarySwatch: Colors.pink
      ),
    );
  }
}

class HelloWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
          'Hello Widget',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 45.0,
            fontWeight: FontWeight.bold,
            color: Colors.amberAccent,
          ),
        )
    );
  }
}