Flutter阴影效果插件shadow_widget的使用

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

Flutter阴影效果插件shadow_widget的使用

shadow_widget 是一个为任何Flutter小部件添加阴影效果的插件。它最初来自Flutter Bounty Hunters组织的swift_ui包。

使用方法

要为某个小部件添加阴影效果，只需用 ShadowWidget 包裹你想要添加阴影的小部件即可。下面是一个简单的例子：

ShadowWidget(
  offset: Offset(10, 10), // 阴影偏移量
  color: Colors.black.withOpacity(0.5), // 阴影颜色和透明度
  blurRadius: 10.0, // 模糊半径
  child: MyWidget(), // 要添加阴影效果的小部件
),

注意事项：

  • 阴影的透明度是独立于子小部件的透明度。
  • blurRadius 的值为 0.0 时阴影是清晰的，而更大的值会使阴影更加模糊。

示例代码

下面是一个完整的示例demo，展示了如何在项目中使用 shadow_widget 插件：

import 'package:flutter/material.dart';
import 'package:shadow_widget/shadow_widget.dart'; // 引入shadow_widget包

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const ShadowDemo(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Shadow Widget Demo'),
      ),
      body: Center(
        child: ShadowWidget(
          offset: const Offset(10, 10),
          color: Colors.black.withOpacity(0.5),
          blurRadius: 10.0,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: const Center(
              child: Text(
                'Hello World',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

此代码创建了一个带有阴影效果的蓝色方块，其中心显示“Hello World”文本。你可以根据需要调整 offset、color 和 blurRadius 参数来改变阴影的效果。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用shadow_widget插件来实现阴影效果的代码示例。

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

dependencies:
  flutter:
    sdk: flutter
  shadow_widget: ^latest_version  # 请替换为最新的版本号

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

接下来，你可以在你的Flutter项目中使用ShadowWidget来为你的组件添加阴影效果。以下是一个完整的示例：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shadow Widget Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用ShadowWidget包裹一个Container，并设置阴影效果
            ShadowWidget(
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text(
                  'Shadowed Box',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              elevation: 10, // 阴影的大小
              blurRadius: 20, // 阴影的模糊半径
              spreadRadius: 5, // 阴影的扩展半径
              color: Colors.black.withOpacity(0.5), // 阴影的颜色
              offset: Offset(5, 5), // 阴影的偏移量
            ),
            SizedBox(height: 20),
            // 另一个示例，使用不同的阴影参数
            ShadowWidget(
              child: Container(
                width: 150,
                height: 150,
                color: Colors.green,
                alignment: Alignment.center,
                child: Text(
                  'Another Box',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              elevation: 5,
              blurRadius: 10,
              spreadRadius: 0,
              color: Colors.grey.withOpacity(0.3),
              offset: Offset(2, -2),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了两个带有不同阴影效果的Container组件。ShadowWidget的参数如下：

  • child: 需要添加阴影效果的子组件。
  • elevation: 阴影的大小（高度）。
  • blurRadius: 阴影的模糊半径。
  • spreadRadius: 阴影的扩展半径。
  • color: 阴影的颜色。
  • offset: 阴影的偏移量。

你可以根据需要调整这些参数来实现不同的阴影效果。希望这个示例能帮助你理解如何在Flutter中使用shadow_widget插件来添加阴影效果。

回到顶部