Flutter暗黑主题插件simple_dart_dark_theme的使用

简介

simple_dart_dark_theme 是一个用于 Flutter 应用的暗黑主题插件。通过该插件，您可以轻松实现应用的暗黑模式切换功能。

以下是一个完整的示例，展示如何在 Flutter 应用中使用 simple_dart_dark_theme 插件。

完整示例代码

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 simple_dart_dark_theme 依赖：

dependencies:
  simple_dart_dark_theme: ^1.0.0

然后运行以下命令安装依赖：

flutter pub get

2. 初始化插件

在主应用文件中初始化 simple_dart_dark_theme 插件，并设置初始主题模式。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 初始化 DarkThemeProvider
    return DarkThemeProvider(
      initTheme: getInitialTheme(), // 设置初始主题模式
      child: MaterialApp(
        title: 'Dark Theme Example',
        theme: ThemeData.light(), // 默认亮色主题
        darkTheme: ThemeData.dark(), // 暗黑主题
        home: MyHomePage(),
      ),
    );
  }

  // 获取初始主题模式（可以根据本地存储设置）
  ThemeMode getInitialTheme() {
    return ThemeMode.system; // 系统默认模式
  }
}

3. 切换主题模式

在应用中添加一个按钮，用于切换主题模式。

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dark Theme Example'),
      ),
      body: Center(
        child: Text(
          'Hello, Dark Theme!',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 切换主题模式
          DarkThemeProvider.of(context).toggleTheme();
        },
        child: Icon(Icons.brightness_6), // 显示当前主题模式图标
      ),
    );
  }
}

更多关于Flutter暗黑主题插件simple_dart_dark_theme的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter暗黑主题插件simple_dart_dark_theme的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


simple_dart_dark_theme 是一个用于在 Flutter 应用中轻松实现暗黑主题的插件。它允许你通过简单的配置来切换应用的主题模式（亮色或暗色），并且可以自定义主题的颜色。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 simple_dart_dark_theme 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_dart_dark_theme: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

  1. 导入插件

    在你的 Dart 文件中导入 simple_dart_dark_theme 插件：

    import 'package:simple_dart_dark_theme/simple_dart_dark_theme.dart';

  2. 初始化主题

    在 main.dart 文件中，使用 SimpleDarkTheme 来初始化主题：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SimpleDarkTheme(
      defaultThemeMode: ThemeMode.light, // 默认主题模式
      lightTheme: ThemeData.light(),     // 亮色主题
      darkTheme: ThemeData.dark(),       // 暗色主题
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: SimpleDarkTheme.of(context).theme, // 获取当前主题
        home: MyHomePage(),
      ),
    );
  }
}

  3. 切换主题

    你可以在应用中的任何地方使用 SimpleDarkTheme.of(context).toggleTheme() 来切换主题：

    class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Dark Theme Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            SimpleDarkTheme.of(context).toggleTheme(); // 切换主题
          },
          child: Text('Toggle Theme'),
        ),
      ),
    );
  }
}

自定义主题

你可以通过自定义 ThemeData 来定义自己的亮色和暗色主题：

SimpleDarkTheme(
  defaultThemeMode: ThemeMode.light,
  lightTheme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
  ),
  darkTheme: ThemeData(
    primarySwatch: Colors.blueGrey,
    brightness: Brightness.dark,
  ),
  child: MaterialApp(
    title: 'Flutter Demo',
    theme: SimpleDarkTheme.of(context).theme,
    home: MyHomePage(),
  ),
);

获取当前主题模式

你可以使用 SimpleDarkTheme.of(context).themeMode 来获取当前的主题模式：

ThemeMode currentThemeMode = SimpleDarkTheme.of(context).themeMode;
回到顶部