修复Flutter主题切换报错：表达式无法解析为函数无法调用

报错原因 #

你在代码里把普通变量（比如你定义的isDarkMode布尔值）当成函数来调用了，比如写了isDarkMode()，但它只是个存储状态的变量，不是可执行的函数，所以触发这个报错。

针对主题切换场景的解决方法 #

要在login.dart和main.dart之间共享主题状态，不能直接跨文件引用变量（状态不互通，还容易出作用域问题），推荐两种常用方案：

方案一：回调函数（适合简单场景）

在login.dart里通过回调把开关状态传递给main.dart的父组件：

// login.dart
class LoginPage extends StatefulWidget {
  final bool initialDarkMode;
  final ValueChanged<bool> onThemeChanged;

  const LoginPage({
    super.key,
    required this.initialDarkMode,
    required this.onThemeChanged,
  });

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  late bool isDarkMode;

  @override
  void initState() {
    super.initState();
    isDarkMode = widget.initialDarkMode;
  }

  @override
  Widget build(BuildContext context) {
    return Switch(
      value: isDarkMode,
      onChanged: (value) {
        setState(() {
          isDarkMode = value;
        });
        // 将新状态传递给main.dart
        widget.onThemeChanged(value);
      },
    );
  }
}

在main.dart里维护主题状态，接收回调更新：

// main.dart
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: LoginPage(
        initialDarkMode: _isDarkMode,
        onThemeChanged: (value) {
          setState(() {
            _isDarkMode = value;
          });
        },
      ),
    );
  }
}

方案二：Provider状态管理（适合复杂全局场景）

先在pubspec.yaml添加依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

创建主题状态管理类：

// theme_provider.dart
import 'package:flutter/material.dart';

class ThemeProvider extends ChangeNotifier {
  bool _isDarkMode = false;

  bool get isDarkMode => _isDarkMode;

  void toggleTheme() {
    _isDarkMode = !_isDarkMode;
    notifyListeners();
  }
}

在main.dart配置Provider：

// main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'theme_provider.dart';
import 'login.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeProvider(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return MaterialApp(
      theme: themeProvider.isDarkMode ? ThemeData.dark() : ThemeData.light(),
      home: const LoginPage(),
    );
  }
}

在login.dart里调用Provider更新状态：

// login.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'theme_provider.dart';

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

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return Switch(
      value: themeProvider.isDarkMode,
      onChanged: (_) {
        themeProvider.toggleTheme();
      },
    );
  }
}

最后检查 #

确认代码里没有把isDarkMode变量写成isDarkMode()的形式，变量直接使用即可，不需要加括号调用。

内容的提问来源于stack exchange，提问作者Luka Petrovic