Flutter自定义背景插件funky_backgrounds的使用

Funky Backgrounds 是一个使用 CustomPainter 创建的背景集合，非常有趣。

如何使用

使用 funky_backgrounds 插件非常简单。只需要将视图或小部件包裹在 FunkyBackground 中，并选择一个可用的背景绘制器即可。

return Scaffold(
  body: const FunkyBackground(
    painter: FunkyStretchedTriangles(Colors.cyan),
    child: MyPage(),
  ),
);

如果你想在一个定位布局（例如 Stack）中使用 funky_backgrounds，可以使用 PositionedFunkyBackground 小部件。

特性

以下是一些可用的背景绘制器的截图。

示例代码

下面是一个完整的示例代码，展示了如何使用 funky_backgrounds 插件来创建不同的背景效果。

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

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

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

  // 这是你的应用的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Funky Backgrounds',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: const MyHomePage(title: 'Funky Backgrounds'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
    required this.title,
  });

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool hideContents = false;
  bool hideButtons = false;
  FunkyBackgroundPainter painter = NotFunkyBackgroundPainter();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
            onPressed: () {
              setState(() {
                hideButtons = !hideButtons;
              });
            },
            icon: Icon(
              hideButtons ? Icons.radio_button_off : Icons.radio_button_checked,
            ),
          ),
          IconButton(
            onPressed: () {
              setState(() {
                hideContents = !hideContents;
              });
            },
            icon: Icon(
              hideContents ? Icons.visibility_off : Icons.visibility,
            ),
          ),
        ],
      ),
      body: Center(
        child: FunkyBackground(
          painter: painter,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: ListView.separated(
                  itemCount: 100,
                  itemBuilder: (context, index) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 16.0),
                      child: hideContents
                          ? const SizedBox(height: 64)
                          : Card(
                              child: Padding(
                                padding: const EdgeInsets.all(32.0),
                                child: Center(child: Text('Item $index')),
                              ),
                            ),
                    );
                  },
                  separatorBuilder: (_, __) => const SizedBox(height: 32),
                ),
              ),
              if (!hideButtons)
                SizedBox(
                  height: 50,
                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: [
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            painter = FunkyConicCurve(Colors.red[200]!);
                          });
                        },
                        child: const Text('FunkyConicCurve'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            painter = const FunkyRotatingLines(Colors.blue);
                          });
                        },
                        child: const Text('FunkyRotatingLines'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            painter = const FunkySquareGrid(Colors.deepOrange);
                          });
                        },
                        child: const Text('FunkySquareGrid'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            painter = FunkyBezierLines(Colors.pink[100]!);
                          });
                        },
                        child: const Text('FunkyBezierLines'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            painter = FunkyHorizontalTriangles(
                              Colors.green[200]!,
                            );
                          });
                        },
                        child: const Text('FunkyHorizontalTriangles'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            painter = FunkyShiftedTriangle(Colors.purple[200]!);
                          });
                        },
                        child: const Text('FunkyShiftedTriangle'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            painter = FunkyLateralTriangles(Colors.yellow[200]!);
                          });
                        },
                        child: const Text('FunkyLateralTriangles'),
                      ),
                      const SizedBox(width: 16),
                      ElevatedButton(
                        onPressed: () {
                          setState(() {
                            painter = const FunkyStretchedTriangles(Colors.cyan);
                          });
                        },
                        child: const Text('FunkyStretchedTriangles'),
                      ),
                      const SizedBox(width: 16),
                    ],
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}

// 自定义背景绘制器
class NotFunkyBackgroundPainter extends FunkyBackgroundPainter {
  [@override](/user/override)
  void paint(Canvas canvas, Size size) {}
}