Flutter主题管理插件theme_pkg的使用

Flutter主题管理插件theme_pkg的使用

theme_pkg 是一个用于在 Flutter 中简化按钮样式的插件。通过这个插件，您可以轻松地定义不同类型的按钮而无需使用不同的按钮小部件。

特性

  • 展示不同类型的按钮。

开始使用

要使用此插件，您需要定义不同类型的按钮而无需使用不同的按钮小部件。

使用方法

简单示例：

Buttons.type_name()

完整示例代码

以下是一个完整的示例，展示了如何使用 theme_pkg 插件来创建不同样式的按钮。

import 'package:flutter/material.dart';
import 'package:theme_pkg/buttons/button.dart';
import 'package:theme_pkg/buttons/button_util.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 设置颜色方案
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("按钮演示"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 创建一个轮廓按钮
            Buttons.outline(
              text: "轮廓按钮",
              onPressed: () {
                print("轮廓按钮被点击");
              },
              size: ButtonSize.md,
              backgroundColor: Colors.blue,
              textColor: Colors.white,
            ),
            const SizedBox(height: 20),
            // 创建一个主按钮
            Buttons.primary(
              text: "主要按钮",
              onPressed: () {
                print("主要按钮被点击");
              },
              size: ButtonSize.md,
              backgroundColor: Colors.blue,
              textColor: Colors.white,
            ),
            const SizedBox(height: 20),
            // 创建一个文本按钮
            Buttons.text(
              text: "文本按钮",
              onPressed: () {
                print("文本按钮被点击");
              },
              textColor: Colors.black,
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


theme_pkg 是一个 Flutter 主题管理插件，它可以帮助开发者更轻松地管理和切换应用的主题。通过使用 theme_pkg，你可以定义多个主题，并在运行时动态切换它们。

安装 theme_pkg

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

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

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

使用 theme_pkg

1. 定义主题

首先，你需要定义你的应用的主题。你可以创建多个 ThemeData 对象来表示不同的主题。

import 'package:flutter/material.dart';

final ThemeData lightTheme = ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.light,
);

final ThemeData darkTheme = ThemeData(
  primarySwatch: Colors.blue,
  brightness: Brightness.dark,
);

2. 创建主题管理器

使用 theme_pkg 提供的 ThemeManager 来管理你的主题。

import 'package:theme_pkg/theme_pkg.dart';

final themeManager = ThemeManager(
  themes: {
    'light': lightTheme,
    'dark': darkTheme,
  },
  initialThemeId: 'light', // 设置初始主题
);

3. 在应用中使用主题管理器

在你的应用的 MaterialApp 中使用 themeManager 来动态切换主题。

import 'package:flutter/material.dart';
import 'package:theme_pkg/theme_pkg.dart';
import 'theme.dart'; // 导入你定义的主题

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ThemeProvider(
      themeManager: themeManager,
      child: MaterialApp(
        title: 'Flutter Theme Demo',
        theme: themeManager.currentTheme,
        home: MyHomePage(),
      ),
    );
  }
}

4. 切换主题

你可以在应用中的任何地方通过 themeManager 来切换主题。

import 'package:flutter/material.dart';
import 'package:theme_pkg/theme_pkg.dart';
import 'theme.dart'; // 导入你定义的主题

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                themeManager.setTheme('light');
              },
              child: Text('Light Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                themeManager.setTheme('dark');
              },
              child: Text('Dark Theme'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部