Flutter阴影效果插件flutter_inset_box_shadow的使用

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

Flutter阴影效果插件flutter_inset_box_shadow的使用

Flutter 目前不支持 inset 属性的阴影。这种类型的阴影通常用于Neumorphism设计风格。

此插件扩展了 BoxShadow 和 BoxDecoration 以支持 inset 属性。

特性

  • 支持 BoxShadow 的所有属性。
  • 如果 BoxShadow 的属性在过渡过程中发生变化，我们会先使旧的阴影消失，然后再显示新的阴影。

示例

一个简单的Neumorphic容器

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

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

const primaryColor = Color(0xFFE0E0E0);

class ExampleApp extends StatelessWidget {
  const ExampleApp({Key? key}) : super(key: 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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

使用方法

首先，在 pubspec.yaml 文件中添加该插件：

dependencies:
  flutter_inset_box_shadow: ^x.y.z

然后，导入它如下所示：

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

由于这个库替换了原有的 BoxDecoration 和 BoxShadow，因此需要隐藏它们。

BoxShadow 现在有一个布尔型的 inset 属性，默认值为 false。

return Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        blurRadius: 5,
        color: Colors.red,
      ),
      BoxShadow(
        offset: Offset(1, 2),
        blurRadius: 5,
        spreadRadius: 2,
        color: Colors.green,
        inset: true,
      ),
    ],
  ),
);

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用flutter_inset_box_shadow插件来实现阴影效果的代码示例。flutter_inset_box_shadow插件允许你在Flutter中创建内嵌的阴影效果，这是标准BoxShadow所不支持的。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_inset_box_shadow: ^x.y.z  # 请替换为最新版本号

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

接下来是一个完整的示例代码，展示如何使用flutter_inset_box_shadow插件：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Inset Box Shadow Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            InsetBoxShadowContainer(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16.0),
              ),
              shadow: InsetBoxShadow(
                color: Colors.black.withOpacity(0.3),
                blurRadius: 10.0,
                offset: Offset(0, 2),
              ),
              child: Container(
                width: 200,
                height: 100,
                alignment: Alignment.center,
                child: Text(
                  'Inset Box Shadow',
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
            SizedBox(height: 20),
            InsetBoxShadowContainer(
              decoration: BoxDecoration(
                color: Colors.grey[200],
                borderRadius: BorderRadius.circular(8.0),
              ),
              shadow: InsetBoxShadow(
                color: Colors.black.withOpacity(0.2),
                blurRadius: 5.0,
                spreadRadius: 2.0,
                offset: Offset(2, 0),
              ),
              child: Container(
                width: 300,
                height: 150,
                alignment: Alignment.center,
                child: Text(
                  'Another Example',
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们定义了一个自定义的InsetBoxShadowContainer组件，它接收一个decoration参数用于容器的背景装饰，一个shadow参数用于设置内嵌阴影效果，以及一个child参数用于容器的子组件。

InsetBoxShadow的参数包括：

  • color：阴影的颜色。
  • blurRadius：阴影的模糊半径。
  • spreadRadius：阴影的扩展半径（可选，默认为0）。
  • offset：阴影的偏移量。

你可以根据需要调整这些参数来实现不同的阴影效果。

注意：由于flutter_inset_box_shadow插件可能不是Flutter官方库的一部分，确保你查找并使用的是最新的社区插件版本，并根据实际情况调整代码。

回到顶部