Flutter 嵌入式阴影

Flutter 目前不支持阴影的 inset 属性。例如，新拟态主义会用到这种阴影。

这个包扩展了 BoxShadow 和 BoxDecoration，以支持 inset 属性。

特点

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

示例

A simple neumorphic container

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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

用法

首先，添加这个包

flutter pub add flutter_inset_box_shadow

然后，按如下方式导入它

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,
      ),
    ],
  ),
);

它是如何工作的？

所使用的算法与 Blink（Chromium 渲染引擎）的算法相同。

其思想是绘制一个被另一个圆角矩形挖空的矩形，然后模糊这个挖空的矩形。

GitHub

查看 Github