Flutter 主題模式

Question

我有一個正在處理的項目，我想將它切換為三種模式，亮、暗和根據系統。

除了保存要選擇的模式之外，我還想要一個附加代碼來執行此操作，遠離任何 state 管理，我為每種情況放了一個帶有三個按鈕的簡單代碼。

素材應用

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      darkTheme: ThemeData(scaffoldBackgroundColor: Colors.black),
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

主頁

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(onPressed: (){}, child: const Text('Dark mode')),
          ElevatedButton(onPressed: (){}, child: const Text('Light mode')),
          ElevatedButton(onPressed: (){}, child: const Text('System mode')),
        ],
      )
    );
  }
}

Answer 1

這是執行此操作的代碼

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

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

class _MyAppState extends State<MyApp> {
  ThemeMode mode = ThemeMode.dark;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      darkTheme: ThemeData(scaffoldBackgroundColor: Colors.black),
      themeMode: mode,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    mode = ThemeMode.dark;
                  });
                },
                child: const Text('Dark mode')),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  mode = ThemeMode.light;
                });
              },
              child: const Text('Light mode'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  mode = ThemeMode.system;
                });
              },
              child: const Text('System mode'),
            ),
          ],
        ),
      ),
    );
  }
}

這是結果

編輯：如果你不想合並這些類，你也可以像這樣單獨使用它

材質應用

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

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

class _MyAppState extends State<MyApp> {
  ThemeMode mode = ThemeMode.dark;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(scaffoldBackgroundColor: Colors.white),
      darkTheme: ThemeData(scaffoldBackgroundColor: Colors.black),
      themeMode: mode,
      home: HomePage(
        changeThemeToDark: () {
          setState(() {
            mode = ThemeMode.dark;
          });
        },
        changeThemeToLight: () {
          setState(() {
            mode = ThemeMode.light;
          });
          print("changes=d");
        },
        changeThemeToSystem: () {
          mode = ThemeMode.system;
        },
      ),
    );
  }
}

主頁

class HomePage extends StatelessWidget {
  const HomePage(
      {Key? key,
      required this.changeThemeToDark,
      required this.changeThemeToSystem,
      required this.changeThemeToLight})
      : super(key: key);

  final VoidCallback changeThemeToDark;
  final VoidCallback changeThemeToSystem;
  final VoidCallback changeThemeToLight;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
            onPressed: () {
              changeThemeToDark();
            },
            child: const Text('Dark mode')),
        ElevatedButton(
            onPressed: () {
              changeThemeToLight();
            },
            child: const Text('Light mode')),
        ElevatedButton(
            onPressed: () {
              changeThemeToSystem();
            },
            child: const Text('System mode')),
      ],
    ));
  }
}