Flutter阴影容器插件shadow_container的使用

特性

Shadow Container
一个带有阴影和圆角边框的可定制化容器。该插件提供了 ShadowContainer 小部件，可以用于您的 Flutter 应用程序中创建美观且时尚的容器。

开始使用

在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  shadow_container: ^1.0.0

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

使用方法

导入插件并使用 ShadowContainer

以下是一个简单的示例，展示如何使用 ShadowContainer：

import 'package:flutter/material.dart';
import 'package:shadow_container/shadow_container.dart'; // 导入插件

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Shadow Container 示例"),
        ),
        body: Center(
          child: ShadowContainerExample(), // 使用自定义的示例小部件
        ),
      ),
    );
  }
}

class ShadowContainerExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 第一个 ShadowContainer 示例
        ShadowContainer(
          height: 150,
          width: 150,
          child: Text(
            "Hello, world!",
            style: TextStyle(fontSize: 20, color: Colors.white),
          ),
          color: Colors.blue, // 背景颜色
          shadowColor: Colors.black, // 阴影颜色
          blurRadius: 10, // 阴影模糊半径
          spreadRadius: 5, // 阴影扩展半径
          circularBorder: 15, // 圆角半径
        ),
        SizedBox(height: 20), // 添加间距
        // 第二个 ShadowContainer 示例
        ShadowContainer(
          height: 100,
          width: 200,
          child: Text(
            "Custom Shadow",
            style: TextStyle(fontSize: 18, color: Colors.green),
          ),
          color: Colors.transparent, // 背景透明
          shadowColor: Colors.red.withOpacity(0.7), // 半透明红色阴影
          opacityLevel: 0.8, // 阴影透明度
          blurRadius: 15, // 更大的模糊半径
          spreadRadius: -5, // 缩小阴影范围
          circularBorder: 0, // 不带圆角
        ),
      ],
    );
  }
}

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

1 回复

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


在Flutter中，shadow_container 并不是一个官方的插件或组件，但你可以通过使用Flutter内置的 Container 组件和 BoxShadow 来轻松实现带有阴影效果的容器。以下是如何使用 Container 和 BoxShadow 来创建一个带有阴影的容器的示例。

示例代码

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('Shadow Container Example'),
        ),
        body: Center(
          child: ShadowContainer(
            child: Text(
              'Hello, Shadow!',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

class ShadowContainer extends StatelessWidget {
  final Widget child;

  ShadowContainer({required this.child});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: child,
    );
  }
}
回到顶部