Flutter内阴影效果插件inner_shadow_widget的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter内阴影效果插件inner_shadow_widget的使用

开始使用

InnerShadow 是一个用于在Flutter中实现内阴影效果的Widget。它可以通过以下参数进行配置：

  • blur: 阴影的模糊程度，值越大阴影越模糊。
  • color: 阴影的颜色。
  • offset: 阴影的偏移量，Offset 类型，表示阴影在X轴和Y轴上的偏移。

示例代码

下面是一个完整的示例代码，展示了如何使用 InnerShadow 插件来创建一个带有内阴影效果的圆形容器。这个示例中，我们嵌套了两个 InnerShadow Widget，以实现更复杂的阴影效果。

import 'package:flutter/material.dart';
import 'package:inner_shadow_widget/inner_shadow_widget.dart'; // 引入 inner_shadow_widget 包

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Inner Shadow Example'),
        ),
        body: Center(
          child: InnerShadow( // 第一个 InnerShadow
            blur: 9, // 设置模糊程度为9
            offset: const Offset(-5, -5), // 设置阴影偏移量为 (-5, -5)
            color: const Color(0xffA6B4C8).withOpacity(0.3), // 设置阴影颜色为浅灰色，透明度为0.3
            child: InnerShadow( // 第二个 InnerShadow
              blur: 10, // 设置模糊程度为10
              offset: const Offset(-5, -5), // 设置阴影偏移量为 (-5, -5)
              color: const Color(0x00fefeff).withOpacity(0.6), // 设置阴影颜色为半透明白色
              child: Container(
                width: 300, // 设置容器宽度为300
                height: 300, // 设置容器高度为300
                decoration: const BoxDecoration(
                  color: Color(0xffE9EDF0), // 设置容器背景颜色为浅灰色
                  shape: BoxShape.circle, // 设置容器形状为圆形
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用inner_shadow_widget插件来实现内阴影效果的代码案例。

首先，你需要在pubspec.yaml文件中添加inner_shadow_widget依赖：

dependencies:
  flutter:
    sdk: flutter
  inner_shadow_widget: ^latest_version  # 请替换为最新的版本号

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

接下来，你可以在你的Flutter代码中使用InnerShadow widget。以下是一个简单的示例，展示如何在文本组件上应用内阴影效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Inner Shadow Example'),
        ),
        body: Center(
          child: InnerShadow(
            offset: Offset(2, 2),  // 阴影偏移量
            blurRadius: 10.0,      // 阴影模糊半径
            color: Colors.black.withOpacity(0.5), // 阴影颜色
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(15),
                border: Border.all(color: Colors.grey, width: 1),
              ),
              padding: EdgeInsets.all(20),
              child: Text(
                'Hello, Flutter!',
                style: TextStyle(fontSize: 24, color: Colors.black),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  • InnerShadow widget 包裹了一个 Container，这个 Container 包含了一些简单的样式和文本。
  • offset 属性定义了阴影的偏移量，这里设置为 Offset(2, 2)，表示阴影在水平和垂直方向上各偏移2个单位。
  • blurRadius 属性定义了阴影的模糊半径，这里设置为 10.0。
  • color 属性定义了阴影的颜色，这里使用了半透明的黑色 Colors.black.withOpacity(0.5)。

你可以根据需要调整这些参数来达到你想要的内阴影效果。这个插件非常灵活，允许你根据具体需求自定义阴影的外观。

回到顶部