Flutter圆角阴影容器插件rounded_shadow_container的使用
Flutter圆角阴影容器插件rounded_shadow_container的使用
安装
- 在您的
pubspec.yaml文件中添加最新版本的包，并运行dart pub get：
dependencies:
rounded_shadow_container: ^0.0.2- 导入包并在您的 Flutter 应用中使用：
import 'package:rounded_shadow_container/rounded_shadow_container.dart';示例
以下是 RoundedShadowContainer 的使用示例。您可以根据需求修改以下属性：
heightwidthtitlesubtitleradiusgradient（包括color1和color2）
class RoundedContainer extends StatelessWidget {
const RoundedContainer({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: const RoundedContainer(
title: '标题',
color1: const Color(0xFFCB1841), // 主渐变颜色
color2: const Color(0xFF2604DE), // 次渐变颜色
subtitle: '这是一个带有圆角阴影的容器插件',
),
),
);
}
}
1 回复
更多关于Flutter圆角阴影容器插件rounded_shadow_container的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
rounded_shadow_container 是一个用于 Flutter 的插件，它可以帮助你轻松地创建一个带有圆角和阴影的容器。这个插件非常适合用于需要美化 UI 的场景，比如卡片、按钮、对话框等。
安装插件
首先，你需要在 pubspec.yaml 文件中添加 rounded_shadow_container 插件的依赖：
dependencies:
flutter:
sdk: flutter
rounded_shadow_container: ^1.0.0 # 请检查最新版本然后运行 flutter pub get 来安装依赖。
使用 RoundedShadowContainer
安装完成后，你可以在你的 Flutter 项目中使用 RoundedShadowContainer。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:rounded_shadow_container/rounded_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('Rounded Shadow Container Example'),
),
body: Center(
child: RoundedShadowContainer(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.black.withOpacity(0.3),
elevation: 10.0,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text(
'Hello, World!',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),
),
),
),
);
}
}