Flutter流畅动画效果插件smooth_widgets的使用
Flutter流畅动画效果插件smooth_widgets的使用
Smooth Widgets 是一个为 Flutter 设计的自定义小部件集合，旨在帮助开发者快速轻松地构建美观且响应式的用户界面。
特性
此包目前包含以下小部件：
<code>SmoothTextButton:</code>一个带有平滑动画和多种样式的可定制按钮小部件。
包含的小部件
1. SmoothTextButton
The SmoothTextButton widget is a customizable button with a smooth border radius and various properties. It’s highly configurable, enabling the creation of stylish buttons that seamlessly blend into different UI designs.
#### 示例用例：
```dart
SmoothTextButton(
title: '点击我', // 按钮上显示的文字
isLoading: false, // 是否处于加载状态
backgroundColor: Colors.blue, // 按钮背景颜色
isActive: true, // 控制按钮是否可用
onPressed: () {
// 按钮按下时执行的操作
},
)参数说明：
title: 按钮上显示的文本。isLoading: 布尔值，表示按钮是否处于加载状态。backgroundColor: 按钮的背景颜色。isActive: 布尔值，控制按钮是否处于激活状态。onPressed: 按钮按下时触发的回调函数。
2. SmoothIconButton
The SmoothIconButton widget is an icon button with a smooth border and a backdrop filter. It offers an elegant design suitable for various icon-based interactions within your app.
#### 示例用例：
```dart
SmoothIconButton(
icon: Icons.add, // 显示在按钮内的图标
onPressed: () {
// 点击图标按钮时执行的操作
},
)参数说明：
icon: 按钮内显示的图标。onPressed: 点击图标按钮时触发的回调函数。
3. SmoothModal
The SmoothModal widget presents a modal bottom sheet with a smooth design and blur effect, providing a sophisticated user experience for displaying additional content or actions.
#### 示例用例：
```dart
void _showModal(BuildContext context) {
smoothModal(
YourCustomWidget(), // 模态框中显示的子组件
context, // 当前上下文
willPopScope: true, // 是否允许通过返回键关闭模态框
);
}参数说明：
child: 模态框中显示的子组件。context: 当前的 BuildContext。willPopScope: 布尔值，用于启用或禁用模态框通过返回键关闭的功能。
4. SmoothTextField
The SmoothTextField widget offers a sleek text input field with smooth styling and customizable features, enhancing the user’s input experience.
#### 示例用例：
```dart
SmoothTextField(
hintText: '请输入您的文本', // 输入框为空时显示的提示文字
// 其他参数...
)
更多关于Flutter流畅动画效果插件smooth_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
smooth_widgets 是一个用于在 Flutter 中创建流畅动画效果的插件。它提供了一系列的组件和工具，帮助开发者轻松实现平滑的动画效果。以下是如何使用 smooth_widgets 插件的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 smooth_widgets 插件的依赖：
dependencies:
flutter:
sdk: flutter
smooth_widgets: ^1.0.0 # 请使用最新版本然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 smooth_widgets 包：
import 'package:smooth_widgets/smooth_widgets.dart';3. 使用 SmoothWidgets 组件
smooth_widgets 提供了多个组件，例如 SmoothContainer、SmoothText 等，这些组件可以帮助你实现平滑的动画效果。
示例：使用 SmoothContainer
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isExpanded = false;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Smooth Widgets Example'),
),
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
child: SmoothContainer(
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
width: _isExpanded ? 200.0 : 100.0,
height: _isExpanded ? 200.0 : 100.0,
color: Colors.blue,
child: Center(
child: Text(
'Tap Me',
style: TextStyle(color: Colors.white),
),
),
),
),
),
);
}
}在这个示例中，SmoothContainer 会根据 _isExpanded 状态的变化，平滑地改变其宽度和高度。
示例：使用 SmoothText
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isLarge = false;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Smooth Widgets Example'),
),
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
_isLarge = !_isLarge;
});
},
child: SmoothText(
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
text: 'Hello, World!',
style: TextStyle(
fontSize: _isLarge ? 32.0 : 16.0,
color: Colors.black,
),
),
),
),
);
}
}在这个示例中，SmoothText 会根据 _isLarge 状态的变化，平滑地改变字体大小。
4. 自定义动画
smooth_widgets 还允许你通过 SmoothAnimation 组件来自定义动画效果。你可以使用 SmoothAnimation 来包装任何小部件，并为其添加平滑的动画效果。
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isRotated = false;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Smooth Widgets Example'),
),
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
_isRotated = !_isRotated;
});
},
child: SmoothAnimation(
duration: Duration(milliseconds: 500),
curve: Curves.easeInOut,
transform: Matrix4.rotationZ(_isRotated ? 1.0 : 0.0),
child: Container(
width: 100.0,
height: 100.0,
color: Colors.green,
child: Center(
child: Text(
'Rotate Me',
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
);
}
}