Flutter内阴影容器插件inwardsshadowcontainer的使用

使用说明

此小部件可用于为其子项投射阴影。可以调整阴影的颜色、扩展范围和强度。以下是一个空容器应用阴影的示例。

开始使用

只需将shadowcontainer.dart文件包含到您的项目中，并通过SideShadow调用它以向您的小部件添加阴影。

示例代码

以下示例展示了如何最简单地构建一个向内阴影，并将其应用于一个SizedBox。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('内阴影容器示例')),
        body: Center(
          child: SideShadow(
            shadowColor: Colors.black, // 阴影颜色
            beginAlignment: Alignment.topCenter, // 起始对齐方式
            endAlignment: Alignment.bottomCenter, // 结束对齐方式
            maxIntensity: 0.5, // 阴影的最大不透明度
            indent: 0.1, // 阴影的最大扩展范围（0.1表示子项大小的10%）
            child: SizedBox( // 子项为一个固定大小的盒子
              width: 300,
              height: 300,
            ),
          ),
        ),
      ),
    );
  }
}

wuwangju 1楼•16 天前

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

InwardsShadowContainer 是一个用于在 Flutter 中创建内阴影效果的插件。它可以帮助你在容器内部添加阴影，从而创建出更加立体的 UI 效果。以下是如何使用 InwardsShadowContainer 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  inwardsshadowcontainer: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 inwardsshadowcontainer 包：

import 'package:inwardsshadowcontainer/inwardsshadowcontainer.dart';

3. 使用 `InwardsShadowContainer`

你可以像使用普通的 Container 一样使用 InwardsShadowContainer，但它提供了额外的参数来配置内阴影效果。

InwardsShadowContainer(
  width: 200,
  height: 200,
  borderRadius: BorderRadius.circular(20),
  shadowColor: Colors.black.withOpacity(0.5),
  shadowBlur: 10,
  shadowSpread: 5,
  child: Center(
    child: Text(
      'Hello, Inwards Shadow!',
      style: TextStyle(fontSize: 20, color: Colors.white),
    ),
  ),
)

4. 参数说明

width 和 height: 容器的宽度和高度。
borderRadius: 容器的圆角半径。
shadowColor: 阴影的颜色。
shadowBlur: 阴影的模糊程度。
shadowSpread: 阴影的扩散程度。
child: 容器内的子部件。

5. 示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 InwardsShadowContainer：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Inwards Shadow Container Example'),
        ),
        body: Center(
          child: InwardsShadowContainer(
            width: 200,
            height: 200,
            borderRadius: BorderRadius.circular(20),
            shadowColor: Colors.black.withOpacity(0.5),
            shadowBlur: 10,
            shadowSpread: 5,
            child: Center(
              child: Text(
                'Hello, Inwards Shadow!',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Flutter内阴影容器插件inwardsshadowcontainer的使用