Flutter系列(二)《如何使用Flutter插件》

本文章阅读之前请确保已经按照Flutter中文网流程搭建好了环境,Flutter项目能运行起来。

Flutter相比于Weex的优势就是开源社区的活跃度比较高,官方提供的插件以及开发社区的插件层出不穷。
插件传送门

我们随意搜索一个插件作为例子:如flutter_color_plugin
搜索结果如图


Flutter系列(二)《如何使用Flutter插件》_第1张图片
14_55_39__07_01_2019.jpg

*插件的安装
先双击打开pubspec.yaml文件,按照图示执行步骤


Flutter系列(二)《如何使用Flutter插件》_第2张图片
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 {

  @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: [
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(color: ColorUtil.color('#f2f2f2')),
            ),
          ],
        ),
      ),
    );
  }
}

然后运行就能看到结果了,以上就是插件的简单使用!

你可能感兴趣的:(Flutter系列(二)《如何使用Flutter插件》)