Flutter自定义背景布局插件custom_background_scaffold的使用

特性

支持自定义纯色、渐变色、背景图片的Scaffold。

开始使用

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

dependencies:
  custom_background_scaffold: ^1.0.0

使用方法

以下是一个简单的示例，展示了如何使用custom_background_scaffold插件来创建一个带有背景渐变颜色的页面：

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PPScaffold(
      gradient: const LinearGradient(
        colors: [Colors.blue, Colors.red],
      ),
      // backgroundColor: Colors.yellow,
      // backgroundImage: const DecorationImage(
      //   image: AssetImage('assets/background.jpg'),
      // ),
      appBar: AppBar(
        title: const Text('自定义背景布局'),
      ),
      body: const Text('Hello World'),
    );
  }
}

完整示例

下面是一个完整的示例代码，展示了如何在一个应用中使用PPScaffold来设置不同的背景样式：

import 'package:custom_background_scaffold/custom_background_scaffold.dart';
import 'package:flutter/material.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(
        // 这是你的应用的主题。
        //
        // 尝试这样做：运行你的应用（使用 "flutter run"）。你会看到应用有一个紫色的工具栏。
        // 然后，在不退出应用的情况下，尝试将seedColor改为Colors.green，并触发热重载（在支持Flutter的IDE中按下热重载按钮，或者使用命令行时按 "r"）。
        //
        // 注意：计数器并没有重置为零；应用的状态在重载期间不会丢失。要重置状态，可以使用热重启。
        //
        // 这不仅适用于值，也适用于代码：大多数代码更改都可以通过热重载进行测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  // 这个小部件是你的应用的首页。它是有状态的，意味着它有一个包含影响其外观字段的状态对象。
  //
  // 这个类是状态的配置。它保存了由父级（在这个例子中是App小部件）提供的值（在这里是标题），并用于State的构建方法。
  // 小部件子类中的字段总是标记为 "final"。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这个调用告诉Flutter框架某些东西已经改变，因此它会重新运行构建方法以反映更新后的值。
      // 如果我们不调用setState()而只是改变了_counter，那么构建方法将不会被再次调用，因此看起来什么都没有发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次setState被调用时，此方法都会被重新运行。
    //
    // Flutter框架经过优化，使得重新运行构建方法非常快，这样你就可以重建任何需要更新的小部件，而不是逐个改变实例。
    return PPScaffold(
      // gradient: const LinearGradient(
      //   colors: [Colors.blue, Colors.red],
      // ),
      backgroundColor: Colors.yellow,
      // backgroundImage: const DecorationImage(
      //   image: AssetImage('assets/background.jpg'),
      //   fit: BoxFit.fill,
      // ),
      appBar: AppBar(
        // 尝试这样做：尝试将此处的颜色更改为特定颜色（例如Colors.amber），并触发热重载，以观察AppBar的颜色变化，同时其他颜色保持不变。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们取由App.build方法创建的MyHomePage对象的值，并用于设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局小部件。它接受一个子项并将其定位在父项的中间。
        child: Column(
          // Column 也是一个布局小部件。它接受一个子项列表并垂直排列它们。
          // 默认情况下，它根据子项水平调整自身大小，并尽可能高。
          //
          // Column 有一些属性可以控制其自身的大小以及如何定位其子项。这里我们使用mainAxisAlignment来垂直居中子项；
          // 主轴在这里是垂直方向，因为Columns是垂直的（交叉轴将是水平方向）。
          //
          // 尝试这样做：触发调试绘制（在IDE中选择“切换调试绘制”动作，或在控制台中按 "p"），以查看每个小部件的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按下了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ), // 这个尾随的逗号使自动格式化更美观。
    );
  }
}