美文网首页Fultter专题系列
Flutter系列(二)《如何使用Flutter插件》

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

作者: 清风徐来121 | 来源:发表于2019-07-01 15:08 被阅读0次

    本文章阅读之前请确保已经按照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')),
                ),
              ],
            ),
          ),
        );
      }
    }
    

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

    相关文章

      网友评论

        本文标题:Flutter系列(二)《如何使用Flutter插件》

        本文链接:https://www.haomeiwen.com/subject/flvgcctx.html