Flutter内边距阴影效果插件flutter_inset_shadow的使用

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

Flutter内边距阴影效果插件flutter_inset_shadow的使用

概述

Flutter目前不支持BoxShadow的inset属性，这种阴影效果在Neumorphism设计中非常常见。flutter_inset_shadow插件扩展了BoxShadow和BoxDecoration以支持inset属性。

注意事项

  • 该插件之前名为flutter_inset_box_shadow，但由于作者失去了对验证发布者的访问权限，因此改名为flutter_inset_shadow。
  • 更多信息可以参考GitHub Issue。

功能特点

  • 支持BoxShadow的所有属性。
  • 在过渡期间，如果BoxShadow的属性发生变化，旧的阴影会先消失再显示新的阴影。

使用方法

添加依赖

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

dependencies:
  flutter_inset_shadow: ^最新版本号

然后运行以下命令安装：

flutter pub add flutter_inset_shadow

导入库

由于此插件替换了Flutter默认的BoxDecoration和BoxShadow，所以在导入时需要隐藏它们：

import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
import 'package:flutter_inset_shadow/flutter_inset_shadow.dart';

示例代码

下面是一个完整的示例，展示了如何使用flutter_inset_shadow创建一个带有内边距阴影效果的容器：

import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
import 'package:flutter_inset_shadow/flutter_inset_shadow.dart';

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

const primaryColor = Color(0xFFE0E0E0);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: primaryColor,
        body: Center(
          child: Container(
            width: 150,
            height: 150,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(50),
              color: primaryColor,
              boxShadow: const [
                BoxShadow(
                  offset: Offset(-20, -20),
                  blurRadius: 60,
                  color: Colors.white,
                  inset: true,
                ),
                BoxShadow(
                  offset: Offset(20, 20),
                  blurRadius: 60,
                  color: Color(0xFFBEBEBE),
                  inset: true,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

关键点解释

  • BoxShadow中的inset: true表示这是一个内边距阴影。
  • offset参数控制阴影的位置，blurRadius控制阴影的模糊程度，color则是阴影的颜色。
  • 通过设置不同的offset和color，可以创建出类似Neumorphism风格的效果。

工作原理

插件使用与Chromium渲染引擎相同的算法来实现内边距阴影效果。具体来说，它绘制一个被另一个圆角矩形掏空的矩形，然后对这个掏空的矩形进行模糊处理。

希望这些信息能帮助你在项目中成功使用flutter_inset_shadow插件！如果有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用flutter_inset_shadow插件来创建内边距阴影效果的代码示例。首先，确保你已经在你的pubspec.yaml文件中添加了该插件的依赖：

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

然后，运行flutter pub get来安装该插件。

接下来，你可以在你的Flutter项目中使用该插件。以下是一个完整的示例，展示了如何在一个简单的应用中应用内边距阴影效果：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Inset Shadow Example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: InsetShadow(
            dx: 0.0,
            dy: 4.0,
            blur: 16.0,
            color: Colors.black.withOpacity(0.2),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12.0),
              ),
              padding: const EdgeInsets.all(24.0),
              child: Text(
                'This is a container with inset shadow!',
                style: TextStyle(fontSize: 24.0, color: Colors.black),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 依赖导入：

    import 'package:flutter_inset_shadow/flutter_inset_shadow.dart';

  2. InsetShadow 组件：

    • dx 和 dy 参数分别控制阴影在水平方向和垂直方向的偏移量。
    • blur 参数控制阴影的模糊程度。
    • color 参数设置阴影的颜色。
    • child 参数设置应用阴影效果的子组件。

  3. Container：

    • decoration 属性用于设置容器的背景颜色和圆角。
    • padding 属性用于设置容器内部的内边距。

  4. 整体布局：

    • 使用 Scaffold 组件来构建基本的页面结构。
    • 使用 AppBar 组件来创建应用栏。
    • 使用 Center 和 Padding 组件来居中对齐并添加额外的内边距。

这样，你就可以在Flutter中使用flutter_inset_shadow插件来创建带有内边距阴影效果的组件了。希望这个示例对你有帮助！

回到顶部