如何在 Flutter 中设置 PageViewModel 标题和 body 文本的颜色？

Question

这是我的 introScreen.dart，我想设置颜色 PageViewModel Title & body text在 Flutter 中。

我试过这行代码style: TextStyle(fontSize: 20, color: Colors.white),但它可能是错误的。

我们如何在 Flutter 中设置 PageViewModel 标题和 body 文本的颜色？

Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.only(top: 100),
        child: IntroductionScreen(
          pages: [
            PageViewModel(
              image: LottieBuilder.asset("assets/animations/1.json"),
              title: "Welcome to $appname",
              body: "I will take you around to see what's so exciting about $appname",
            ),
            PageViewModel(
              image: LottieBuilder.asset("assets/animations/2.json"),
              title: "Privacy Protection",
              body: "Internet access is mind-free, we'll keep you safe",
            ),
            PageViewModel(
              image: LottieBuilder.asset("assets/animations/3.json"),
              title: "Fast and Limitless!",
              body: "We provide you the without limits",
            ),
          ],
          showSkipButton: true,
          onDone: () {
            Preferences.init().then((value) {
              // ignore: invalid_use_of_protected_member
              rootState!.setState(() {
                value.saveFirstOpen();
              });
            });
          },

Answer 1

在里面试试这个 PageViewModel:

titleWidget: Text(
            "Welcome to $appname",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 18, color: appColorYellow),
          ),

bodyWidget: Text(
            "I will take you around to see what's so exciting about $appname",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 18, color: appColorYellow),
          ),

Answer 2

1. 更改 PageViewModel 文本颜色:

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: const Center(child: Icon(Icons.android)),
  decoration: const PageDecoration(
    titleTextStyle: TextStyle(color: Colors.orange),
    bodyTextStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 20.0),
  ),
)

2. 更改 PageViewModel 背景:

PageViewModel(
  title: "Title of first page",
  body: "Here you can write the description of the page, to explain someting...",
  image: Center(child: Image.asset("res/images/logo.png", height: 175.0)),
  decoration: const PageDecoration(
    pageColor: Colors.blue,
  ),
)

您可以参考pub.dev documentation了解更多相关信息。

如何在 Flutter 中设置 PageViewModel 标题和 body 文本的颜色？

How to set color of PageViewModel Title & body text in Flutter?

dart

flutter

flutter-layout