Flutter —— Packages 和 Plugin

1. Packages

1.1 简介

Dart package 最低要求是包含一个 pubspec.yaml 文件，package只包含dart部分。此外，一个 package 可以包含依赖关系 (在 pubspec.yaml 文件里声明)、 Dart 库、应用、资源、测试、图片和例子等，开发者可以使用package 快速构建应用。

1.2 创建 Packages

这里新建一个Flutter Package 项目,可以看到这里面是没有Android和iOS的文件的。

将之前的 friends页面里面的index_bar的内容拷贝到test_package_demo里面，去除掉没有的import，然后将所需要的内容拷贝进来。

library test_package_demo;


import 'package:flutter/material.dart';

class IndexBar extends StatefulWidget {
  final void Function(String str) indexBarCallBack;

  const IndexBar({Key? key, required this.indexBarCallBack}) : super(key: key);

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

String getIndex(BuildContext context, Offset globalPosition) {
  //拿到当前小部件
  RenderBox box = context.findRenderObject() as RenderBox;
  //拿到y值，globalToLocal当前位置距离部件的原点的距离
  double y = box.globalToLocal(globalPosition).dy;
  // 算出字符高度
  var itemHeight = screenHeight(context) / 2 / INDEX_WORDS.length;
  // 算出第几个item
  int index = (y ~/ itemHeight).clamp(0, INDEX_WORDS.length - 1);

  return INDEX_WORDS[index];
}

class _IndexBarState extends State<IndexBar> {
  Color _bkColor = Color.fromRGBO(1, 1, 1, 0.0);
  Color _textColor = Colors.black;

  @override
  void initState() {
    // TODO: implement initState
  }

  @override
  Widget build(BuildContext context) {
    final List<Widget> words = [];

    for (int i = 0; i < INDEX_WORDS.length; i++) {
      words.add(Expanded(
        child: Text(
          INDEX_WORDS[i],
          style: TextStyle(fontSize: 10, color: _textColor),
        ),
      ));
    }

    return Positioned(
      right: 0.0,
      top: screenHeight(context) / 8,
      height: screenHeight(context) / 2,
      width: 30,
      child: GestureDetector(
          onVerticalDragDown: (DragDownDetails details) {
            setState(() {
              _bkColor = const Color.fromRGBO(1, 1, 1, 0.5);
              _textColor = Colors.white;
            });
          },
          onVerticalDragUpdate: (DragUpdateDetails details) {
            getIndex(context, details.globalPosition);
          },
          onVerticalDragEnd: (DragEndDetails details) {
            setState(() {
              _bkColor = const Color.fromRGBO(1, 1, 1, 0.0);
              _textColor = Colors.black;
            });
          },
          child: Container(
            child: Column(
              children: words,
            ),
            color: _bkColor,
          )),
    );
  }
}

//主题色
const Color weChatThemColor = Color.fromRGBO(220, 220, 220, 1.0);

//屏幕宽高
double screenWidth(BuildContext context) => MediaQuery.of(context).size.width;
double screenHeight(BuildContext context) => MediaQuery.of(context).size.height;
const INDEX_WORDS = [
  '🔍',
  '☆',
  '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'
];

这里面使用到了资源，那么就需要进行处理。在package 中添加一个Directory images，然后添加图片进去。

然后到pubspec.yaml 里面添加images的引用。

然后看到顶部这里的四个参数。

• name：包的名称
• description： 包的描述
• version： 包的版本
• homepage：包的主页，需要是可以访问的否则会扣分

1.3 发布 Package

接下来要发布刚才创建的Package，那么先使用终端来到Package的文件夹中。

首先需要使用命令检查包是否有问题.

flutter packages pub publish --dry-run 

这里看到刚才创建的包是没有问题的

如果把刚才四个参数中的某一个去掉那么就会报错。