Flutter阴影效果插件drop_shadow的使用

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

Flutter阴影效果插件drop_shadow的使用

DropShadow

style: very good analysis

DropShadow 插件允许为任何Flutter小部件添加阴影效果。

Cover

插件逻辑

Logic

示例截图

screenshot

使用示例

下面是一个简单的例子，展示了如何使用 DropShadow 小部件来为不同的子组件添加阴影效果。

示例代码

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 网络图片带阴影
              DropShadow(
                child: Image.network(
                  'https://images.pexels.com/photos/1191639/pexels-photo-1191639.jpeg',
                  width: 250,
                ),
              ),
              const SizedBox(height: 35),
              
              // 带圆角和渐变色的容器带阴影
              DropShadow(
                child: Container(
                  height: 150,
                  width: 250,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    gradient: const LinearGradient(
                      colors: [Color(0xFF3366FF), Color(0xFF00CCFF)],
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 35),

              // 文本带阴影
              const DropShadow(
                child: Text(
                  'Ehuehuehueuhe',
                  style: TextStyle(fontSize: 35, color: Colors.orange),
                ),
              ),

              // 固定颜色阴影文本
              const DropShadow(
                color: Colors.black,
                child: Text(
                  'Solid color drop shadow',
                  style: TextStyle(fontSize: 35, color: Colors.orange),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

类型 名称 默认值
Widget child required
double blurRadius 10.0
double borderRadius 0.0
Offset offset Offset(0.0, 8.0)
double opacity 1.0
double spread 1.0
Color? color null

通过调整这些参数，您可以自定义阴影的效果以适应您的应用需求。例如，增加 blurRadius 可以使阴影更模糊，改变 offset 可以控制阴影的位置等。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用drop_shadow插件来实现阴影效果的代码案例。首先，确保你已经在pubspec.yaml文件中添加了drop_shadow依赖：

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

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

以下是一个简单的Flutter应用示例，展示了如何使用drop_shadow插件：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drop Shadow Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 原始文本
            Text(
              'Original Text',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            // 使用DropShadow效果的文本
            DropShadow(
              color: Colors.black.withOpacity(0.5),  // 阴影颜色
              offset: Offset(2, 2),  // 阴影偏移量
              blurRadius: 10.0,  // 阴影模糊半径
              spreadRadius: 0.0,  // 阴影扩展半径
              child: Text(
                'Text with Drop Shadow',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了drop_shadow包。
  2. 在MyHomePage的build方法中，我们创建了一个简单的界面，其中包含两个文本：一个是普通文本，另一个是应用了DropShadow效果的文本。
  3. DropShadow组件的color属性定义了阴影的颜色，offset属性定义了阴影的偏移量，blurRadius属性定义了阴影的模糊半径，spreadRadius属性定义了阴影的扩展半径。

你可以根据需要调整这些参数来实现不同的阴影效果。这个示例展示了一个简单的文本阴影效果，但DropShadow可以应用于任何Widget，因此你可以将其用于更复杂的UI组件。

回到顶部