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

本文章閱讀之前請確保已經按照Flutter中文網流程搭建好了環境,Flutter項目能運行起來。

Flutter相比於Weex的優勢就是開源社區的活躍度比較高,官方提供的插件以及開發社區的插件層出不窮。
插件傳送門

我們隨意搜索一個插件作爲例子:如flutter_color_plugin
搜索結果如圖


*插件的安裝
先雙擊打開pubspec.yaml文件,按照圖示執行步驟


*插件的使用
具體的使用請看插件搜索結果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')),
            ),
          ],
        ),
      ),
    );
  }
}

然後運行就能看到結果了,以上就是插件的簡單使用!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章