在Flutter中创建双色边框按钮的内阴影效果，无需外部封装

Question

如何为使用容器创建的按钮创建与边框颜色相同的内部阴影效果？该按钮有两种颜色的边框，如下图所示。

我遇到了一些可以实现这种效果的包，但我更喜欢不使用任何包来实现它。

这是我的代码：

import 'package:flutter/material.dart';
import 'package:taskk/second_screen.dart';

class HomeScreen extends StatelessWidget {
HomeScreen({super.key});
final kInnerDecoration = BoxDecoration(
color: Color(0xFF18181B),
border: Border.all(color: Color(0xFF18181B)),
borderRadius: BorderRadius.circular(32),
);

final kGradientBoxDecoration = BoxDecoration(
gradient: LinearGradient(colors: [Color(0xFF2EB0CA), Color(0xFF8F56A4)]),
border: Border.all(
  color: Color(0xFF18181B),
),
borderRadius: BorderRadius.circular(32),
);
@override
Widget build(BuildContext context) {
  return Scaffold(
   body: SafeArea(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        InkWell(
          onTap: () => Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => Second(),
              )),
          child: Container(
            width: 221,
            child: Padding(
              padding: const EdgeInsets.all(2.0),
              child: Container(
                child: Center(
                    child: Text(
                  "Enter now",
                  style:
                      TextStyle(fontWeight: FontWeight.w700, fontSize: 16),
                )),
                decoration: kInnerDecoration,
              ),
            ),
            height: 43.0,
            decoration: kGradientBoxDecoration,
            ),
          ),
        ],
      ),
    ),
  );
 }
}

Answer 1

您可以使用内部容器上的盒子阴影来近似这种效果，以在您移动到内部时创建从更透明到更不透明的渐变。首先，用一些少量的透明度更新背景颜色。然后，添加一个带有负值

spread

的盒子阴影，以在盒子内部投射阴影。当您靠近文本时，将半透明背景颜色与阴影堆叠起来会使其变得更加不透明。

尝试将

kInnerDecoration

替换为以下内容，以获得与所附图像类似的内容。您可能需要调整其中一些值以完全匹配您的屏幕截图。

final kInnerDecoration = BoxDecoration(
  color: const Color(0x9918181B),
  borderRadius: BorderRadius.circular(32),
  boxShadow: const [
    BoxShadow(
      color: Color(0xFF18181B),
      blurRadius: 12,
      spreadRadius: -5,
    )
  ],
);

Answer 2

我能够通过将 kInnerDecoration 更改为以下内容来获得所需的结果：

 final kInnerDecoration = BoxDecoration(
color: Color(0x9918181B),
borderRadius: BorderRadius.circular(32),
boxShadow: [
  BoxShadow(
    color: Color.fromARGB(255, 10, 70, 116).withOpacity(1),
    blurRadius: 40,
    spreadRadius: -8,
  ),
  BoxShadow(
    offset: Offset(-5, 0),
    color: Color.fromARGB(255, 66, 7, 87),
    spreadRadius: -8,
    blurRadius: 40.0,
  ),
],
);

这里我将 spreadRadius 更改为负值，并将两种所需的阴影颜色添加到 boxShadow 列表中。