Flutter图标与插画插件ms_undraw的使用
Flutter图标与插画插件ms_undraw的使用
UnDraw/UnDraw
UnDraw 是一个Flutter小部件，提供了由 Katerina Limpitsouni 设计的1372多个插图，它分叉自 westdabestdb。
你可以在这里查看 在线示例。
免责声明
这个库存在的原因是原始库已经过时，并且发布了很多新的插图。
使用方法
在你的Dart代码中使用 UnDraw 小部件来显示插图。以下是一个简单的例子：
UnDraw(
color: Colors.red,
illustration: UnDrawIllustration.mobile_application,
placeholder: Text("Illustration is loading..."), // 可选，默认是 CircularProgressIndicator().
errorWidget: Icon(Icons.error_outline, color: Colors.red, size: 50), // 可选，默认是 Text('Could not load illustration!').
)
如果你想了解更多其他的库，可以访问 这里。
示例Demo
下面是一个完整的示例应用，展示了如何在Flutter应用程序中使用 ms_undraw 插件：
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:ms_undraw/ms_undraw.dart';
import 'package:url_launcher/url_launcher.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MS Undraw - Demo',
theme: ThemeData(
primarySwatch: Colors.red,
secondaryHeaderColor: Colors.orangeAccent,
useMaterial3: false,
),
home: MyHomePage(title: "${UnDrawIllustration.values.length} Illustrations"),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color color = Colors.red;
UnDrawIllustration illustration = UnDrawIllustration.mobile_application;
Timer? timer;
final List<UnDrawIllustration> _filtered = [];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
actions: [
IconButton(
onPressed: () {
showAboutDialog(context: context, children: [
TextButton(
onPressed: () => launch("https://pub.dev/packages/ms_undraw"),
child: const Text('https://pub.dev/packages/ms_undraw')),
TextButton(
onPressed: () => launch("https://undraw.co/"),
child: const Text('https://undraw.co/')),
]);
},
icon: const Icon(Icons.info))
],
title: TextFormField(
onChanged: (s) {
timer?.cancel();
timer = Timer(const Duration(seconds: 1), () {
_filtered.clear();
if (s.isNotEmpty) {
_filtered.addAll(UnDrawIllustration.values.where((element) =>
_changeName(element.name)
.toLowerCase()
.contains(s.toLowerCase())));
}
setState(() {});
});
},
cursorColor: Colors.white,
style: const TextStyle(
color: Colors.white,
decorationColor: Colors.white,
),
decoration: const InputDecoration(
label: Text("Type to search"),
icon: Icon(
Icons.search,
color: Colors.white,
),
isDense: true,
iconColor: Colors.white,
focusColor: Colors.white,
prefixIconColor: Colors.white,
labelStyle: TextStyle(color: Colors.white),
suffixIconColor: Colors.white,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
color = Color((Random().nextDouble() * 0xFFFFFF).toInt() << 0)
.withOpacity(1.0);
});
},
backgroundColor: Colors.red,
child: const Icon(Icons.color_lens),
),
body: Center(
child: Container(
constraints: const BoxConstraints(maxWidth: 1024),
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1 / 1,
mainAxisExtent: 285 + 28 + 16,
crossAxisSpacing: 16,
mainAxisSpacing: 16),
padding: const EdgeInsets.all(16),
itemBuilder: (_, index) {
final undraw = _filtered.isEmpty
? UnDrawIllustration.values[index]
: _filtered[index];
return Container(
decoration: BoxDecoration(
color: Colors.grey.shade100,
border: Border.all(color: Colors.grey.shade300),
borderRadius: const BorderRadius.all(Radius.circular(16)),
boxShadow: const [
BoxShadow(
color: Colors.black12,
blurRadius: 6,
offset: Offset(0, 4))
],
),
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(_changeName(undraw.name)),
SizedBox(
// height: 220+67,
child: Center(
child: UnDraw(
color: color,
useMemCache: false,
height: 200,
width: 200,
illustration: undraw,
placeholder:
const Text("Illustration is loading..."),
errorWidget: const Icon(Icons.error_outline,
color: Colors.red, size: 50),
),
),
),
const Divider(),
Row(
children: [
TextButton.icon(
onPressed: () => _copyName(undraw),
icon: const Icon(Icons.copy),
label: const Text("Copy name")),
const Spacer(),
TextButton.icon(
onPressed: () => _copyCode(undraw),
icon: const Icon(Icons.code),
label: const Text("Copy Widget code")),
],
),
],
),
);
},
itemCount: _filtered.isEmpty
? UnDrawIllustration.values.length
: _filtered.length),
),
),
);
}
String _changeName(String name) {
return name
.replaceAll('_', ' ')
.trim()
.split(' ')
.map((e) => "${e[0].toUpperCase()}${e.substring(1).toLowerCase()}")
.toList()
.join(' ')
.trim();
}
_copyName(UnDrawIllustration undraw) {
Clipboard.setData(ClipboardData(text: "UnDrawIllustration.${undraw.name}"));
}
_copyCode(UnDrawIllustration undraw) {
Clipboard.setData(ClipboardData(text: """UnDraw(
color: Theme.of(context).primaryColor,
illustration: UnDrawIllustration.${undraw.name},
)"""));
}
}
功能说明
- 搜索功能：用户可以在应用栏中输入文字来搜索特定的插图。
- 颜色更改：通过浮动按钮可以随机更改插图的颜色。
- 复制功能：每个插图都有两个按钮，一个用于复制插图名称，另一个用于复制生成该插图的小部件代码。
希望这个详细的指南能帮助你在Flutter项目中成功集成和使用 ms_undraw 插件！如果你有任何问题或需要进一步的帮助，请随时提问。
更多关于Flutter图标与插画插件ms_undraw的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter图标与插画插件ms_undraw的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中，ms_undraw 是一个流行的图标与插画插件，它提供了一组高质量的SVG插画，这些插画非常适合用于移动应用和网页的UI设计。为了在你的Flutter项目中使用 ms_undraw 插件，你需要按照以下步骤进行配置和使用。
1. 添加依赖
首先，你需要在你的 pubspec.yaml 文件中添加 ms_undraw 依赖。
dependencies:
flutter:
sdk: flutter
ms_undraw: ^x.y.z # 请替换为最新版本号
运行以下命令来安装依赖：
flutter pub get
2. 导入库
在你的 Dart 文件中，你需要导入 ms_undraw 库。
import 'package:ms_undraw/ms_undraw.dart';
3. 使用插画
ms_undraw 提供了多个插画，你可以通过指定插画的名称来使用它们。下面是一个简单的例子，展示了如何在 Flutter 应用中使用 ms_undraw 插画。
import 'package:flutter/material.dart';
import 'package:ms_undraw/ms_undraw.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ms_undraw 示例'),
),
body: Center(
child: UndrawIllustration(
name: 'undraw_monitor_chart_4l9v', // 插画的名称
width: 300, // 插画的宽度
height: 300, // 插画的高度
),
),
),
);
}
}
在这个例子中，我们创建了一个简单的 Flutter 应用，并在应用的主页中显示了一个 UndrawIllustration 组件。name 属性指定了你要使用的插画名称（可以在 ms_undraw 的文档或GitHub仓库中找到可用的插画名称），width 和 height 属性则用于设置插画的尺寸。
4. 自定义插画
你还可以进一步自定义插画，比如改变颜色、添加阴影等。以下是一个稍微复杂一点的例子，展示了如何自定义插画。
import 'package:flutter/material.dart';
import 'package:ms_undraw/ms_undraw.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('自定义 ms_undraw 插画'),
),
body: Center(
child: CustomPaint(
painter: UndrawPainter(
name: 'undraw_monitor_chart_4l9v',
primaryColor: Colors.blue, // 设置主色调
secondaryColor: Colors.grey, // 设置次色调
width: 300,
height: 300,
),
size: Size(300, 300),
),
),
),
);
}
}
class UndrawPainter extends CustomPainter {
final String name;
final Color primaryColor;
final Color secondaryColor;
final double width;
final double height;
UndrawPainter({
required this.name,
this.primaryColor = Colors.black,
this.secondaryColor = Colors.white,
required this.width,
required this.height,
});
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
final path = MsUndraw.createPath(name, width, height, primaryColor, secondaryColor);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
注意：MsUndraw.createPath 是一个假设的方法，因为 ms_undraw 插件的API可能并不直接提供这样的方法。这个示例旨在展示如何自定义插画的思路，实际使用时，你可能需要根据 ms_undraw 插件的具体API来调整代码。
在实际项目中，请查阅 ms_undraw 的官方文档或GitHub仓库，以获取最新的API信息和可用的插画列表。
