本文章阅读之前请确保已经按照Flutter中文网流程搭建好了环境,Flutter项目能运行起来。
Flutter相比于Weex的优势就是开源社区的活跃度比较高,官方提供的插件以及开发社区的插件层出不穷。
插件传送门
我们随意搜索一个插件作为例子:如flutter_color_plugin
搜索结果如图
14_55_39__07_01_2019.jpg
*插件的安装
先双击打开pubspec.yaml文件,按照图示执行步骤
15_00_07__07_01_2019.jpg
*插件的使用
具体的使用请看插件搜索结果README(今后插件的使用可自行操作)
首先我们先引用插件
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
然后可以这么使用
import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
class PluginUse extends StatefulWidget {
@override
_PluginUseState createState() => _PluginUseState();
}
class _PluginUseState extends State<PluginUse> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('如何使用Flutter包和插件'),
leading: GestureDetector(
onTap: (){
Navigator.pop(context);
},
child: Icon(Icons.arrow_back_ios),
),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
style: TextStyle(color: ColorUtil.color('#f2f2f2')),
),
],
),
),
);
}
}
然后运行就能看到结果了,以上就是插件的简单使用!
网友评论