Flutter渐变效果插件gradientbox的使用

Flutter渐变效果插件gradientbox的使用

一个可以让您在Flutter应用中添加漂亮可修改渐变框的包。

安装

  1. 在pubspec.yaml文件中添加该包的最新版本（并运行dart pub get）：
dependencies:
  gradientbox: ^0.0.1
  1. 导入该包并在您的Flutter应用中使用它：
import 'package:gradientbox/gradientbox.dart';

开始使用

您可以修改以下属性：

  • onTap
  • height
  • width
  • padding
  • margin
  • alignment
  • borderRadius
  • showShadow
  • shadowColor
  • gradientColors
  • child

示例代码

class GradientBoxDemoScreen extends StatelessWidget {
  const GradientBoxDemoScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text(
            "Demo 💯",
            style: TextStyle(color: Colors.black, fontSize: 14),
          ),
          centerTitle: true,
          backgroundColor: Colors.white,
          elevation: 0.5,
        ),
        body: Column(
          children: [
            Expanded(
              child: Center(
                child: GradientBox(
                    margin: const EdgeInsets.all(20),
                    padding: const EdgeInsets.symmetric(
                        vertical: 25, horizontal: 30),
                    height: MediaQuery.of(context).size.height * 0.25,
                    borderRadius: 15,
                    gradientColors: GradientColors.blueSkies,
                    alignment: Alignment.topLeft,
                    showShadow: true,
                    shadowColor: Colors.grey,
                    onTap: () =>
                        ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text("Blue Skies"))),
                    child: content),
              ),
            ),
            const Padding(
              padding: EdgeInsets.all(15.0),
              child: Text(
                "GradientBox",
                style: TextStyle(fontSize: 10, color: Colors.blue),
              ),
            )
          ],
        ));
  }
}

示例

贡献

Gradient Box 是完全免费且开源的。此包接受来自公众的贡献——包括您。以下是您可以为不断增长的 GradientBox 社区做出贡献的几种方式：

添加渐变颜色到包中

  1. 要添加您的渐变颜色，请将此存储库分叉，然后转到 gradient_colors.dart 文件，并添加一个 GradientColors 变量，该变量接收一个颜色列表（所有渐变颜色都从 lib/utils/ 目录下的单个 gradient_colors.dart 文件加载）。
class GradientColors {

  ...

  static GradientColors flare = GradientColors(const [
    Color(0xFFf12711),
    Color(0xFFf5af19),
  ]);

}
  1. 然后将您的 GradientColors 变量添加到 _gradientColors 列表中，然后提交拉取请求。
class GradientColors {

  ...

  static final List<GradientColors> _gradientColors = [
    ...

    flare,
   ]
}

更多关于Flutter渐变效果插件gradientbox的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter渐变效果插件gradientbox的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于如何在Flutter中使用gradient_box插件来实现渐变效果，以下是一个示例代码。首先，确保你已经在pubspec.yaml文件中添加了gradient_box依赖：

dependencies:
  flutter:
    sdk: flutter
  gradient_box: ^最新版本号 # 请替换为实际最新版本号

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

以下是一个使用gradient_box插件实现渐变效果的完整示例代码：

import 'package:flutter/material.dart';
import 'package:gradient_box/gradient_box.dart'; // 引入插件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gradient Box Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gradient Box Demo'),
      ),
      body: Center(
        child: GradientBox(
          // 定义渐变的颜色
          gradient: LinearGradient(
            colors: [Colors.blue, Colors.red],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
          // 定义子组件（可以是任何Widget）
          child: Container(
            width: 200,
            height: 200,
            alignment: Alignment.center,
            child: Text(
              'Gradient Box',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
          // 圆角半径
          borderRadius: BorderRadius.circular(20),
          // 可选：阴影效果
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              spreadRadius: 5,
              blurRadius: 7,
              offset: Offset(0, 3), // changes position of shadow
            ),
          ],
        ),
      ),
    );
  }
}

代码说明：

  1. 引入插件：在文件顶部引入gradient_box插件。
  2. 定义MyApp和MyHomePage：创建Flutter应用的基本结构。
  3. 使用GradientBox：
    • gradient：定义渐变效果，这里使用LinearGradient从左上角到右下角实现蓝色到红色的渐变。
    • child：定义渐变效果的子组件，这里是一个包含文本的Container。
    • borderRadius：设置圆角半径。
    • boxShadow：添加阴影效果，以增强视觉效果。

运行这个示例，你会看到一个带有渐变背景、圆角和阴影效果的容器，容器内显示着白色文本“Gradient Box”。

请注意，gradient_box插件的具体API和用法可能会随着版本更新而变化，请参考官方文档或插件仓库的最新信息。

回到顶部