Flutter高级组件插件advanced_widgets的使用
Flutter高级组件插件advanced_widgets的使用
本包通过提供现代和有用的小部件使创建新应用变得更加容易。
特性
-
BlurredAppBar
- 使AppBar模糊其后面的所有内容。
-
ModernElevatedButton
- 一个现代化的按钮
-
GradientText
- 为文本添加渐变效果
-
GradientContainer
- 为容器添加渐变效果
-
GradientOverlay
- 为其子元素添加渐变效果
开始使用
要使用模糊AppBar，你需要导入dart:ui包。
使用示例
如何使用BlurredAppBar
extendBody: true,
appBar: BlurredAppBar(
appBar: AppBar(
backgroundColor: Color.fromARGB(0, 158, 158, 158),
title: Text(
widget.title,
style: TextStyle(color: const Color.fromARGB(255, 0, 0, 0)),
),
),
filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
),
完整示例代码
以下是一个完整的示例代码，展示了如何在应用中使用这些高级组件：
// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors, sort_child_properties_last
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:advanced_widgets/advanced_widgets.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: '高级小部件',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(title: '高级小部件'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromARGB(255, 240, 240, 240),
extendBody: true,
appBar: BlurredAppBar(
appBar: AppBar(
backgroundColor: Color.fromARGB(0, 158, 158, 158),
title: Text(
widget.title,
style: TextStyle(color: const Color.fromARGB(255, 0, 0, 0)),
),
),
filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
),
body: Stack(
clipBehavior: Clip.none,
children: [
SizedBox(
height: double.infinity,
child: Image.asset(
"lib/assets/background.jpg",
fit: BoxFit.fitHeight,
),
),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
child: SizedBox(),
),
SingleChildScrollView(
child: Center(
child: Column(
children: [
GradientText(
"高级小部件",
style: TextStyle(fontSize: 65, fontWeight: FontWeight.bold),
gradient: LinearGradient(
colors: [
Color.fromARGB(255, 0, 0, 0),
Color.fromARGB(255, 82, 82, 82),
Color.fromARGB(255, 0, 0, 0),
],
),
),
SizedBox(height: 150),
ModernElevatedButton(
elevation: 20,
color: Color.fromARGB(45, 184, 184, 184),
onPressed: () => print("A"),
child: Padding(
padding: EdgeInsets.fromLTRB(20, 5, 20, 5),
child: Text(
"现代化的提升按钮",
style: TextStyle(
fontSize: 23,
color: Colors.white,
),
),
),
),
SizedBox(height: 150),
Text(
"渐变容器:",
style: TextStyle(
fontSize: 35,
),
),
GradientContainer(
container: Container(
width: 250,
height: 250,
decoration: BoxDecoration(
color: Color.fromARGB(127, 255, 255, 255),
borderRadius: BorderRadius.circular(35),
),
),
gradient: LinearGradient(
colors: [
Color.fromARGB(255, 155, 183, 219),
Color.fromARGB(255, 218, 186, 224),
Color.fromARGB(255, 225, 233, 236),
],
),
),
SizedBox(height: 75),
Text(
"👇 向下滚动 👇",
style: TextStyle(fontSize: 50),
),
SizedBox(height: 75),
Text(
"渐变覆盖:",
style: TextStyle(
fontSize: 35,
),
),
GradientOverlay(
child: Card(
color: Colors.white,
child: SizedBox(height: 150, width: 150),
),
gradient: LinearGradient(
colors: [
Color.fromARGB(255, 155, 183, 219),
Color.fromARGB(255, 218, 186, 224),
Color.fromARGB(255, 225, 233, 236),
],
),
),
SizedBox(height: 150),
Text(
"👆 模糊AppBar 👆",
style: TextStyle(fontSize: 50),
),
SizedBox(height: 250),
],
),
),
),
],
),
);
}
}
更多关于Flutter高级组件插件advanced_widgets的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter高级组件插件advanced_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
advanced_widgets 是一个假设的 Flutter 插件，用于提供高级的、功能丰富的 UI 组件。虽然目前并没有一个官方或广泛认可的 advanced_widgets 插件，但我们可以通过自定义或组合现有的 Flutter 组件来实现类似的功能。
如果你正在寻找一个类似的高级 UI 组件库，可以考虑以下几个流行的 Flutter 插件和库：
- FlutterStaggeredGridViews: 用于创建交错的网格布局。
- Flutter_Slidable: 用于创建可滑动的列表项。
- Flutter_Spinkit: 提供多种加载动画。
- Flutter_Toast: 用于显示 Toast 消息。
- Flutter_Swiper: 用于创建轮播图。
- Flutter_Charts: 用于创建各种图表。
- Flutter_Map: 用于集成地图功能。
- Flutter_Reactive_Forms: 用于创建复杂的表单和验证。
自定义高级组件
如果你需要特定的高级组件，可以通过组合现有的 Flutter 组件来实现。以下是一个自定义高级组件的示例：
示例：自定义可折叠的卡片组件
import 'package:flutter/material.dart';
class ExpandableCard extends StatefulWidget {
final String title;
final Widget content;
ExpandableCard({required this.title, required this.content});
@override
_ExpandableCardState createState() => _ExpandableCardState();
}
class _ExpandableCardState extends State<ExpandableCard> {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: [
ListTile(
title: Text(widget.title),
trailing: IconButton(
icon: Icon(
_isExpanded ? Icons.expand_less : Icons.expand_more,
),
onPressed: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
),
),
if (_isExpanded) widget.content,
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Expandable Card Example')),
body: ListView(
children: [
ExpandableCard(
title: 'Card 1',
content: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('This is the content of Card 1.'),
),
),
ExpandableCard(
title: 'Card 2',
content: Padding(
padding: const EdgeInsets.all(16.0),
child: Text('This is the content of Card 2.'),
),
),
],
),
),
));
}
使用第三方插件
如果你想使用现有的高级组件插件，可以按照以下步骤进行：
-
添加依赖：在
pubspec.yaml文件中添加插件的依赖。dependencies: flutter: sdk: flutter advanced_widgets: ^1.0.0 # 假设的插件版本 -
导入插件：在 Dart 文件中导入插件。
import 'package:advanced_widgets/advanced_widgets.dart'; -
使用组件：在代码中使用插件提供的组件。
AdvancedWidget( // 配置参数 );
