Flutter后台任务管理插件bg的使用

平台支持

开始使用

您可以创建自定义小部件并调用更改壁纸的方法。

// 导入bg插件
import 'package:bg/bg.dart';

// 更改壁纸
await Bg().changeWallpaper(
    url: '[您的URL]', // 替换为实际的URL
    scale: style, // [WallpaperScale] 可以是fit、fill、stretch等
    color: color.hex, // 默认值为#ffffff
);

您还可以使用showWallpaperOptions方法，该方法会显示一个底部模态对话框。

await Bg().showWallpaperOptions(
    url: imageUrl, // 图片URL
    context: context, // BuildContext来自父级小部件
);

底部模态对话框示例

自定义示例

文档

• 了解更多关于插件的信息：插件包
• 查看此视频演示（西班牙语）：视频链接

注意事项

• 此包仅支持MACOS。其他平台如iOS存在已知限制：StackOverflow讨论
• 我们不支持平铺缩放，因为不是所有图像都适合这种设置，并且MacOS本身也不总是显示此选项。

完整示例代码

以下是一个完整的示例代码，展示了如何使用bg插件来更改壁纸：

import 'package:bg/options.dart';
import 'package:flutter/material.dart';
import 'package:bg/bg.dart';
import 'package:flex_color_picker/flex_color_picker.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData.dark(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> {
  final _bgPlugin = Bg();

  String demoUrl =
      'https://live.staticflickr.com/65535/51106448871_213c324baf_o_d.jpg';

  WallpaperScale _style = WallpaperScale.stretch;

  // 颜色
  var color = Colors.white;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(demoUrl),
            fit: BoxFit.cover,
          ),
        ),
        child: Flex(
          direction: Axis.vertical,
          children: [
            ListTile(
              leading: DropdownButton<WallpaperScale>(
                underline: Container(),
                value: _style,
                onChanged: (value) {
                  setState(() {
                    _style = value!;
                  });
                },
                items: WallpaperScale.values
                    .map(
                      (e) => DropdownMenuItem(
                        value: e,
                        child: Text(e.toString().split('.').last),
                      ),
                    )
                    .toList(),
              ),
              title: TextFormField(
                initialValue: demoUrl,
                onChanged: (value) {
                  setState(() {
                    demoUrl = value;
                  });
                },
                decoration: const InputDecoration(
                  hintText: 'Image URL',
                ),
              ),
            ),
            ColorPicker(
              pickersEnabled: const {
                ColorPickerType.both: true,
              },
              color: color,
              onColorChanged: (value) {
                setState(() {
                  color = value;
                });
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            heroTag: 'changeWallpaper',
            onPressed: () async {
              await _bgPlugin.changeWallpaper(
                url: demoUrl,
                scale: _style,
                color: color.hex,
              );
            },
            child: const Icon(Icons.wallpaper),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            heroTag: 'showWallpaperOptions',
            onPressed: () async {
              await _bgPlugin.showWallpaperOptions(
                url: demoUrl,
                context: context,
              );
            },
            child: const Icon(Icons.settings),
          ),
        ],
      ),
    );
  }
}