如何从flutter应用程序的主题中获取原色

Question

我在为 Flutter 应用程序主题化时遇到问题。我无法从主题中获取原色。这是示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Colors.blue,
          secondary: Colors.amber,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: const ColorScheme.dark(
          primary: Colors.grey,
          secondary: Colors.white,
        ),
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 200,
            width: 200,
            child: Container(
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
      ),
    );
  }
}

我希望容器具有主题的主色，即浅色模式下为蓝色，深色模式下为灰色。但在浅色和深色模式下它总是显示紫色

灯光模式

深色模式

我多次尝试不同的解决方案。但结果是一样的。我是颤振的新手。我希望得到善意的答复。 谢谢你。

Answer 1

pasanmaduranga，开始得很好！

尝试首先将您的 themeData 集中在一个单独的文件中，然后调用它。您可以使用带有静态变量的类。

集中文本（字符串）、颜色和主题数据使得在项目或程序的长期运行中更容易编辑。

主题.dart 文件：

class AppTheme {
    /// Customize as needed
    /* --- Light Theme ---*/
    static ThemeData ligthTheme = ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        primaryColor: Colors.blue,
        )

    /* --- Dark Theme ---*/
    static ThemeData darkTheme  = ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        primaryColor: Colors.grey,
    )
}

用途：

import 'package:flutter/material.dart';
import 'theme.dart'; /// Import the theme file

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.lightTheme, /// Assign Light Theme
      darkTheme: AppTheme.darkTheme, /// Assign Dark Theme
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 200,
            width: 200,
            child: Container(
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
      ),
    );
  }
}

回到你的问题：

使用 Theme.of(context) 就很接近了，因为 Theme.of(context) 允许您通过 Buildcontext、context 访问应用程序上当前活动的主题。

您只需要使用：

Theme.of(context).primaryColor

它将根据上下文检索 themeData 中当前可用的原色。

意思是，如果是灯光模式，它将返回灯光模式的原色，反之亦然。

所以就你而言：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Colors.blue,
          secondary: Colors.amber,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: const ColorScheme.dark(
          primary: Colors.grey,
          secondary: Colors.white,
        ),
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 200,
            width: 200,
            child: Container(
              color: Theme.of(context).primaryColor, /// Changed to .primaryColor
            ),
          ),
        ),
      ),
    );
  }
}

快乐编码 pasanmaduranga！！！