likes
comments
collection
share

Flutter插件之packages

作者站长头像
站长
· 阅读数 12

Flutter插件插件分两种:

1.packages是纯dart的

2.插件是包涵了原生代码的

我们要在pub.dev上注册,我们自己的账号。

1.Flutter-packages

  1. 打开AS选择->Flutter->ProjectType-Package如下图: 项目名称:my_flutter_package Flutter插件之packages

然后成功创建Package项目:

Flutter插件之packages

先上代码(代码不是重点)记录关键步骤才是:

library my_flutter_package;

import 'package:flutter/material.dart';

class IndexBar extends StatefulWidget {
  final void Function(String str) indexBarCallBack;
  final ImageProvider image;
  const IndexBar(
      {Key? key, required this.indexBarCallBack, required this.image})
      : super(key: key);

  @override
  State createState() => _IndexBarState();
}

int getIndex(BuildContext context, Offset globalPosition) {
  //定位转换!!!
  //拿到Box
  RenderBox box = context.findRenderObject() as RenderBox;
  //拿到Y值
  double y = box.globalToLocal(globalPosition).dy;
  //算出字符高度
  var itemHeight = screenHeight(context) / 2 / indexWords.length;
  //算出事第几个Item. ~/ 取法取整 . 给一个取值范围!!
  int index = (y ~/ itemHeight).clamp(0, indexWords.length - 1);
  return index;
}

class _IndexBarState extends State<IndexBar> {
  Color _bkColor = const Color.fromRGBO(1, 1, 1, 0.0);
  Color _textColor = Colors.black;
  double _indicatorY = 0.0;
  String _indicatorText = 'A';
  bool _indicatorHidden = true;

  @override
  Widget build(BuildContext context) {
    final List<Widget> words = [];
    for (int i = 0; i < indexWords.length; i++) {
      words.add(
        Expanded(
          child: Text(
            indexWords[i],
            style: TextStyle(fontSize: 10, color: _textColor),
          ),
        ),
      );
    }
    return Positioned(
        right: 0.0,
        height: screenHeight(context) / 2,
        top: screenHeight(context) / 8,
        width: 120,
        child: Row(
          children: [
            //指示器
            Container(
              alignment: Alignment(0, _indicatorY),
              width: 100,
              child: _indicatorHidden
                  ? null
                  : Stack(
                alignment: const Alignment(-0.2, 0),
                children: [
                  Image(image: widget.image, width: 60),
                  Text(_indicatorText,
                      style: const TextStyle(
                          fontSize: 35, color: Colors.white))
                ],
              ),
            ),
            //索引条
            GestureDetector(
              //持续拖拽
              onVerticalDragUpdate: (DragUpdateDetails details) {
                int index = getIndex(context, details.globalPosition);
                //回调,告诉外界我们选中了哪一个Item!
                widget.indexBarCallBack(indexWords[index]);
                setState(() {
                  _indicatorText = indexWords[index];
                  _indicatorY = 2.3 / 27 * index - 1.15;
                  _indicatorHidden = false;
                });
              },
              //鼠标点击进入
              onVerticalDragDown: (DragDownDetails details) {
                int index = getIndex(context, details.globalPosition);
                //回调,告诉外界我们选中了哪一个Item!
                widget.indexBarCallBack(indexWords[index]);
                setState(() {
                  _bkColor = const Color.fromRGBO(1, 1, 1, 0.3);
                  _textColor = Colors.white;
                  _indicatorText = indexWords[index];
                  _indicatorY = 2.3 / 27 * index - 1.15;
                  _indicatorHidden = false;
                });
              },
              //拖拽结束
              onVerticalDragEnd: (DragEndDetails details) {
                setState(() {
                  _bkColor = const Color.fromRGBO(1, 1, 1, 0.0);
                  _textColor = Colors.black;
                  _indicatorHidden = true;
                });
              },
              child: Container(
                width: 20,
                color: _bkColor,
                child: Column(
                  children: words,
                ),
              ),
            ),
          ],
        ));
  }
}

//屏幕宽高
double screenWidth(BuildContext context) => MediaQuery.of(context).size.width;
double screenHeight(BuildContext context) => MediaQuery.of(context).size.height;

const indexWords = [
  '🔍',
  '☆',
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z'
];

配置资源图片

Flutter插件之packages

在通过命令发布:

flutter packages pub publish --dry-run. 检查命令

Flutter插件之packages 验证成功:

Flutter插件之packages

  1. 注意点

我们的地址是国内镜像地址:所以我们必须替换地址

通过命令:

open ./

或者 vim ~/.bashrc

查看修改镜像

source ~/.bashrc  修改源

Flutter插件之packages

然后在运行 检查命令(记得重启AS):

Flutter插件之packages

在看修改后的地址 pub.dev

3.发布命令

1.flutter packages pub publish 
or 

flutter packages pub publish --server=https://pub.dartlang.org

2. to https://pub.dev (y/N)? 

3.这里注意 查看 flutter doctor -v 的环境,最好没有错误⚠警告

4.如果终端超时 time out 

vim ~/.bash_profile

function proxy_on(){
    export http_proxy=http://127.0.0.1:1087
    export https_proxy=http://127.0.0.1:1087
    echo -e "已开启代理"
}
function proxy_off(){
    unset http_proxy
    unset https_proxy
    echo -e "已关闭代理"
}

5.在项目cd 目录下在执行
flutter packages get

最后:
sudo flutter packages pub publish -v  

flutter packages pub publish --server=[https://pub.dartlang.org](https://pub.dartlang.org/)  
即可

Flutter插件之packages

点击这个地址,允许访问(请科学上网)。

Flutter插件之packages 授权失败:

Authorization received, processing...
It looks like accounts.google.com is having some trouble.
Pub will wait for a while before trying to connect again.
OS Error: Operation timed out, errno = 60, address = accounts.google.com, port = 54374
pub finished with exit code 69

参考Github解决方案:

https://github.com/flutter/flutter/issues/17070

重新发布、授权,成功上传:

Waiting for your authorization...
Authorization received, processing...
Successfully authorized.
Uploading...
Successfully uploaded package.

Flutter插件之packages

最后查看pub.dev

Flutter插件之packages

(ps: 还是得自己动手才能真正掌握。)