Flutter阴影覆盖插件shadow_overlay的使用

shadow_overlay 是一个用于在图片或小部件上显示渐变阴影的Flutter包。它可以使您的图像或小部件与背景融合，增加美观度。

特性

该包非常直观，它会在您的图像或小部件上添加默认为白色的阴影，使它们更加美观并与背景相融合。

示例1 <--------> 示例2

开始使用

无需任何特殊要求，该包完全用Dart编写，可以在任何平台上运行。

使用方法

下面是一个简单的使用示例：

ShadowOverlay(
    child: Image.asset(
        'path to your image',
         height: 400,
         width:800,
    ),
    shadowWidth: 800,
    shadowHeight: 150,
);

完整示例Demo

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

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

void main(List<String> args) {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 可以根据需要更改主题以适应叠加效果
      themeMode: ThemeMode.light,
      darkTheme: ThemeData.dark(),
      theme: ThemeData.light(),
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final _isDark = Theme.of(context).brightness == Brightness.dark;
    return Scaffold(
      backgroundColor: _isDark ? Colors.black : Colors.white,
      body: Center(
        child: ShadowOverlay(
          shadowHeight: 150,
          shadowWidth: 400,
          shadowColor: _isDark ? Colors.black : Colors.white,
          child: Image.network(
            'https://raw.githubusercontent.com/afzl-wtu/shadow_overlay/main/resources/sample2.png',
            fit: BoxFit.cover,
            height: 400,
            width: 400,
          ),
        ),
      ),
    );
  }
}

额外信息

文档也包含在代码中，您可以通过将鼠标悬停在ShadowOverlay对象的属性上来查找更多选项。

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shadow Overlay Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用ShadowOverlay包裹一个Container
            ShadowOverlay(
              color: Colors.black.withOpacity(0.3),  // 阴影颜色
              offset: Offset(2, 2),                 // 阴影偏移
              blurRadius: 10.0,                      // 阴影模糊半径
              spreadRadius: 2.0,                     // 阴影扩展半径
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Shadowed Box',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            // 使用ShadowOverlay包裹一个Text
            ShadowOverlay(
              color: Colors.black.withOpacity(0.5),
              offset: Offset(1, 1),
              blurRadius: 5.0,
              spreadRadius: 1.0,
              child: Text(
                'Shadowed Text',
                style: TextStyle(
                  fontSize: 24,
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，并在MyHomePage中使用了ShadowOverlay包裹了两个Widget：一个Container和一个Text。通过调整ShadowOverlay的参数，你可以控制阴影的颜色、偏移、模糊半径和扩展半径。

color：阴影的颜色。
offset：阴影的偏移量。
blurRadius：阴影的模糊半径。
spreadRadius：阴影的扩展半径。

你可以根据需要调整这些参数，以实现你想要的阴影效果。

Flutter阴影覆盖插件shadow_overlay的使用

Flutter阴影覆盖插件shadow_overlay的使用

特性

开始使用

使用方法

完整示例Demo

额外信息

标签