Flutter主题管理插件flueco

Flueco Theming

Flueco Theming 是一个用于管理 Flutter 应用程序主题的工具。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flueco_theming: {version}

然后运行 flutter pub get 来获取该包。

使用示例

创建主题

首先，我们需要创建一些主题。这些主题可以包含颜色、字体等属性。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: createThemeData(),
      home: MyHomePage(),
    );
  }

  ThemeData createThemeData() {
    return ThemeData(
      primaryColor: Colors.blue,
      accentColor: Colors.red,
      textTheme: TextTheme(
        headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
        headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
        bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
      ),
    );
  }
}

使用主题

在应用中使用这些主题来改变 UI 的外观。

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("Flueco Theming Example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Hello, World!",
              style: Theme.of(context).textTheme.headline1,
            ),
            Text(
              "This is a themed text.",
              style: Theme.of(context).textTheme.bodyText2,
            ),
          ],
        ),
      ),
    );
  }
}

更改主题

你还可以通过按钮或其他方式动态更改主题。

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isDarkMode = false;

  void _toggleTheme() {
    setState(() {
      _isDarkMode = !_isDarkMode;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flueco Theming Example"),
        actions: [
          IconButton(
            icon: Icon(_isDarkMode ? Icons.brightness_7 : Icons.brightness_3),
            onPressed: _toggleTheme,
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Hello, World!",
              style: Theme.of(context).textTheme.headline1,
            ),
            Text(
              "This is a themed text.",
              style: Theme.of(context).textTheme.bodyText2,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleTheme,
        tooltip: 'Toggle Theme',
        child: Icon(Icons.brightness_3),
      ),
    );
  }

  ThemeData createLightTheme() {
    return ThemeData(
      primaryColor: Colors.blue,
      accentColor: Colors.red,
      textTheme: TextTheme(
        headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
        headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
        bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
      ),
    );
  }

  ThemeData createDarkTheme() {
    return ThemeData(
      brightness: Brightness.dark,
      primaryColor: Colors.grey[900],
      accentColor: Colors.purple,
      textTheme: TextTheme(
        headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
        headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
        bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    if (_isDarkMode) {
      // 初始状态为暗模式
      ThemeData themeData = createDarkTheme();
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Provider.of<ThemeProvider>(context, listen: false)
            .setTheme(themeData);
      });
    }
  }
}

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

yuanlaile 1楼

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

flueco_theming 是一个用于 Flutter 应用的主题管理插件，它可以帮助开发者更轻松地管理和切换应用的主题。以下是如何使用 flueco_theming 插件的基本步骤和示例。

1. 添加依赖

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

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

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

2. 初始化主题管理

在应用的入口文件（通常是 main.dart）中，初始化 flueco_theming：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeManager(
      defaultTheme: MyThemes.lightTheme,
      themes: {
        MyThemes.lightTheme: ThemeData.light(),
        MyThemes.darkTheme: ThemeData.dark(),
      },
      child: MaterialApp(
        title: 'Flueco Theming Demo',
        theme: ThemeManager.of(context).currentTheme,
        home: MyHomePage(),
      ),
    );
  }
}

class MyThemes {
  static const String lightTheme = 'light';
  static const String darkTheme = 'dark';
}

3. 切换主题

在应用中切换主题可以通过调用 ThemeManager.of(context).setTheme() 方法。例如：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flueco Theming Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Current Theme: ${ThemeManager.of(context).currentThemeName}'),
            ElevatedButton(
              onPressed: () {
                ThemeManager.of(context).setTheme(MyThemes.lightTheme);
              },
              child: Text('Set Light Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                ThemeManager.of(context).setTheme(MyThemes.darkTheme);
              },
              child: Text('Set Dark Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 获取当前主题

可以通过 ThemeManager.of(context).currentTheme 获取当前的主题数据，或者通过 ThemeManager.of(context).currentThemeName 获取当前主题的名称。

5. 自定义主题

你可以在 ThemeManager 的 themes 参数中定义自定义主题。例如：

themes: {
  MyThemes.lightTheme: ThemeData.light().copyWith(
    primaryColor: Colors.blue,
    accentColor: Colors.blueAccent,
  ),
  MyThemes.darkTheme: ThemeData.dark().copyWith(
    primaryColor: Colors.deepPurple,
    accentColor: Colors.deepPurpleAccent,
  ),
},