flutter插件开发,自定义下拉组件,可自定义UI,只提供框架

![示例图1](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_cunstimize_dropdown/cunstumize_dropdown1.gif?raw=true "示例图1")




# flutter_custom_dropdown

> ​	还有一个停产的版本  失误造成的 名字叫flutter_cunstimize_dropdown,那个不维护了,尴尬了命名错了



> 创建命令

```dart
flutter create --org com.example --template=plugin --platforms=android,ios -a java -i objc flutter_custom_dropdown
```

**本组件由Github作者[best-flutter](https://github.com/best-flutter)插件[flutter_dropdown_menu](https://github.com/best-flutter/flutter_dropdown_menu)更改而来,由于更新问题,以及使用上不满足业务问题自己修改了相关bug做了更新迭代,所以重新集成为新插件**


***DefaultDropdownMenuController***

> 功能：包裹页面提供默认Controller

|  功能参数  | 是否必要 |  类型  | 备注                                          |
| :--------: | :------: | :----: | :-------------------------------------------- |
| onSelected |   true   |  bool  | 选中时，触发controller.selected时会回调此方法 |
|   child    |   true   | widget | 包裹内容                                      |

***DropdownHeader***

> 功能：下拉头部模块

|       功能参数        | 是否必要 |     类型     | 备注                                                         |
| :-------------------: | :------: | :----------: | :----------------------------------------------------------- |
|      isSideline       |  false   |     bool     | 是否需要分割线                                               |
|         onTap         |  false   |     func     | 触发头部回调,内部自动提供,自定义头部事件需自定义             |
|        titles         |   true   | List<String> | 头部显示title列表                                            |
| selectIsChangingColor |  false   |     bool     | 选中是否更改回显title字段可specialModules联合使用            |
|    specialModules     |  false   |  List<int>   | 选中是否只改变title颜色不更改title文字,此功能selectIsChangingColor必须为true,权重大于selectIsChangingColor功能 |

***DropdownMenu***

> 功能：悬停筛选模块

|   功能参数    | 是否必要 |              类型               | 备注                                       |
| :-----------: | :------: | :-----------------------------: | ------------------------------------------ |
|     menus     |   true   |    List<DropdownMenuBuilder>    | list长度必须与titles长度一致               |
| packUpHeight  |  false   |             double              | 收起长度不够时可自行添加                   |
| hideDuration  |  false   |            Duration             | 收起时自定义时长                           |
| showDuration  |  false   |            Duration             | 展开时自定义时长                           |
|   showCurve   |  false   |              Curve              | 自定义动画                                 |
|   hideCurve   |  false   |              Curve              | 自定义动画                                 |
|     blur      |  false   |             double              | 蒙层透明值                                 |
|    onHide     |  false   |          VoidCallback           | 蒙层触发操作回调                           |
|  switchStyle  |  false   | DropdownMenuShowHideSwitchStyle | 菜单样式                                   |
| maxMenuHeight |  false   |             double              | 最大高度,未提供自动计算时,需要指定最大高度 |

***DropdownMenuBuilder***

> 功能：menus内容

|      功能参数       | 是否必要 |     类型      | 备注                                     |
| :-----------------: | :------: | :-----------: | ---------------------------------------- |
|       builder       |   true   | WidgetBuilder | 下拉内容                                 |
|    screenHeight     |  false   |    double     | 最大高度,默认屏幕高度,自动计算时必须填写 |
|    draughtHeight    |   true   |    double     | 内容高度,                                |
| bottomSpacingHeight |  false   |    double     | 距离屏幕底部高度,自动计算时必须填写      |

***单选图片功能详解***

|   功能   | 实现功能                                 | 内容                                                         |
| :------: | :--------------------------------------- | :----------------------------------------------------------- |
| 交易类型 | 单选选中,不提供title变色,不提供title更改 | 条件:剔除元数据title字段                                     |
|   范围   | 单选选中,提供title变色,不提供title更改   | 条件:添加元数据title字段,将header下标放入specialModules,开启selectIsChangingColor |
|   排序   | 单选选中,提供title变色,提供title更改     | 条件:添加元数据title字段,禁止将header下标放入specialModules,开启selectIsChangingColor |

![示例图2](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_cunstimize_dropdown/cunstumize_dropdown2.gif?raw=true "示例图2")

***DropdownListMenu***

> 多功能tempalte,单选+多选+自定义按钮+自定义输入



|     功能参数      | 是否必要 |       类型       | 备注                                                         |
| :---------------: | :------: | :--------------: | ------------------------------------------------------------ |
|   selectedIndex   |  false   |      Object      | 默认选中                                                     |
| isOperatingButton |  false   |       bool       | 是否需要按钮                                                 |
|   isCustomInput   |  false   |       bool       | 是否需要自定义输入                                           |
|    customInput    |  false   | CustomInputClass | 定义自定义输入回显值的key与输入框HintText                    |
|     keyWords      |   true   |      String      | 数据是否重复判断依据                                         |
|     valueKey      |  false   |      String      | 当元数据没有title字段时,显示内容的key需要传入\|也可以自定义itemBuilder内容 |
|    isMultiple     |  false   |       bool       | 是否多选                                                     |
|       data        |   true   |   List<Object>   | 元数据内容                                                   |
|    itemBuilder    |   true   | MenuItemBuilder  | 展示item布局,可自定义                                        |



| 功能实现 |          实现功能          | 内容 |
| :------: | :------------------------: | :--- |
| 交易金额 | 多选+自定义输入+自定义按钮 | 看图 |
|   范围   |            多选            | 看图 |
|   排序   |      多选+自定义按钮       | 看图 |

![示例图3](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_cunstimize_dropdown/cunstumize_dropdown3.gif?raw=true")

***DropdownMenuCustomize***

> 功能：自定义下拉内容



|  功能参数   | 是否必要 |         类型         | 备注         |
| :---------: | :------: | :------------------: | ------------ |
|    data     |  false   |       List<T>        | 传入内容     |
| itemBuilder |   true   | BlankMenuItemBuilder | 内容整个布局 |

> 额外使用功能:
>
> ```flutter
> DropdownMenuController controller; 控制显示关闭,可以配合WillPopScope返回时监听是否关闭并进行关闭之后再进行页面退出
>
>  onWillPop: () async{
>           if(controller == null || controller.event == DropdownEvent.HIDE){
>             Navigator.pop(context);
>           }
>           controller.hide();
>           return;
>         }
>
> GlobalKey _globalKey;获取context,必须有变化的组件下,绝对布局或者滚动,需要获取绝对布局的context
> ScrollController scrollController;控制动画的
> ```
>
> ```
> controller.assignment({'title': '更多---'}, menuIndex);///自定义内容时没有用到select传输数据可以由次方法重新更改title
> ```

![示例图4](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_cunstimize_dropdown/cunstumize_dropdown4.gif?raw=true "示例图4")

**贴段代码吧**

```dart
/// TODO : 单选实例
/// @param
/// @return
/// @author 丁平
/// created at 2021/1/12 11:06
///
class MotionlessScreeningFilter extends StatefulWidget {
  @override
  _MotionlessScreeningFilterState createState() => _MotionlessScreeningFilterState();
}

class _MotionlessScreeningFilterState extends State<MotionlessScreeningFilter> {

  String value1;
  String value2;
  String value3;

  @override
  Widget build(BuildContext context) {
    return Container(
      child:DefaultDropdownMenuController(
        onSelected: ({int menuIndex, dynamic data}) {
          print("int menuIndex, dynamic data = $menuIndex,$data");
          if(menuIndex == 0){
            value1 = '选中下标$menuIndex,\n选中内容$data';
          }
          if(menuIndex == 1){
            value2 = '选中下标$menuIndex,\n选中内容$data';
          }
          if(menuIndex == 2){
            value3 = '选中下标$menuIndex,\n选中内容$data';
          }
          setState(() {});
        },
        child:  Stack(
          children: [
            Column(
              children: [
                Container(
                    color: Colors.white,
                    child: buildDropdownHeader()
                ),
                Expanded(
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('交易类型选中 : ${value1??''}'),
                          const SizedBox(height: 10.0,),
                          Text('范围选中 : ${value2??''}'),
                          const SizedBox(height: 10.0,),
                          Text('排序选中 : ${value3??''}'),
                        ],
                      ),
                    )
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  color:const Color(0XFF00CCA9),
                  child: Text(
                    '交易类型筛选：单选,不提供选中头部回显,在元数据中剔除title字段即可 \n\n范围筛选：单选，不提供选中头部回显，但是提供选中头部颜色更改，使用specialModules属性标注，\n\n排序类型筛选：单选，提供选中内容头部回显不剔除title字段，设置selectIsChangingColor属性',
                    style: TextStyle(
                        color: Colors.white
                    ),
                  ),
                )
              ],
            ),
            Padding(
                padding: const EdgeInsets.only(top: 40),
                child: buildDropdownMenu(context))
          ],
        ),
      )
    );
  }


  DropdownHeader buildDropdownHeader({DropdownMenuHeadTapCallback onTap}) {
    return DropdownHeader(
      isSideline : false,
      onTap: onTap,
      titles: ['交易类型','范围','排序'],
      selectIsChangingColor: true,
      specialModules: [1] ,///特殊模块,选中数据只亮起,不需要更改头部title,下标为1
    );
  }

  DropdownMenu buildDropdownMenu(BuildContext context) {
    return new DropdownMenu(
        menus: [
          DropdownMenuBuilder(
              builder : (BuildContext context) {
                return DropdownListMenu(
                  selectedIndex:  FilterData.housingTypes[0],
                  isOperatingButton : false,
                  keyWords : "key",
                  data: FilterData.housingTypes,
                  valueKey: 'value',
                  itemBuilder: buildCheckItem,
                );
              },
              screenHeight : MediaQuery.of(context).size.height,
              draughtHeight : 60 * 2.5,
              bottomSpacingHeight : 168.0
          ),
          DropdownMenuBuilder(
              builder : (BuildContext context) {
                return DropdownListMenu(
                  selectedIndex:  FilterData.ranges[0],
                  isOperatingButton : false,
                  keyWords : "key",
                  data: FilterData.ranges,
                  itemBuilder: buildCheckItem,
                );
              },
              screenHeight : MediaQuery.of(context).size.height,
              draughtHeight : 60 * 2.5,
              bottomSpacingHeight : 168.0
          ),
          DropdownMenuBuilder(
              builder : (BuildContext context) {
                return DropdownListMenu(
                  selectedIndex:  FilterData.sort[0],
                  isOperatingButton : false,
                  keyWords : "key",
                  data: FilterData.sort,
                  itemBuilder: buildCheckItem,
                );
              },
              screenHeight : MediaQuery.of(context).size.height,
              draughtHeight : 60 * 6.66,
              bottomSpacingHeight : 168.0 + 50.0
          ),
        ]
    );
  }
}

```

flutter插件-自定义下拉组件-flutter_custom_dropdown

Flutter Plugin开发生上传教程

```dart
设置代理 : set http_proxy=http://127.0.0.1:1080
		 set https_proxy=http://127.0.0.1:1080
		 set http_proxy_user=user
          set http_proxy_pass=pass
          set https_proxy_user=user
          set https_proxy_pass=pass
测试  curl -v http://www.google.com
上传 flutter packages pub publish --server=https://pub.dartlang.org
```

# 必须在cmd内进行

#  科学上网必要



flutter插件上传pub.dev教程

2020-12-02-九机面试经历

Flutter1.0初学开发项目时进行主题简单封装

#### 一、设置模式key

```dart
///普通模式key
const String PRIMARY = 'PRIMARY';

///暗黑模式key
const String DIABLOMODE = 'DIABLOMODE';
```

 #### 二、定义主题色

```dart
import 'package:flutter/material.dart';

class SkinElement{

  final Color primaryFFFFFF;
  final Color primary000000;

 final Color primary00CCA9;
 final  Color primaryFFBB33;
 final Color primary409EFF;
 final Color primaryFF6666;


 final Color primary303133;
 final Color primary606266;
 final Color primary909399;
 final Color primaryC0C4CC;


 final Color primaryD9D9D9;
 final Color primaryE6E6E6;
 final Color primaryF5F5F5;

 final  double fontSize11;
 final  double fontSize12;
 final double fontSize13;
 final double fontSize14;
 final double fontSize15;
 final double fontSize16;
 final double fontSize18;
 final double fontSize20;
 final double fontSize30;
  final double fontSize36;
 SkinElement(
     {
       this.primary00CCA9 = const Color(0XFF00CCA9),
       this.primaryFFFFFF = const Color(0XFFFFFFFF),
       this.primary000000 = const Color(0XFF000000),
       this.primaryFFBB33 = const Color(0XFFFFBB33),
       this.primary409EFF = const Color(0XFF409EFF),
       this.primaryFF6666 = const Color(0XFFFF6666),
       this.primary303133 = const Color(0XFF303133),
       this.primary606266 = const Color(0XFF606266),
       this.primary909399 = const Color(0XFF909399),
       this.primaryC0C4CC = const Color(0XFFC0C4CC),
       this.primaryD9D9D9 = const Color(0XFFD9D9D9),
       this.primaryE6E6E6 = const Color(0XFFE6E6E6),
       this.primaryF5F5F5 = const Color(0XFFF5F5F5),
       this.fontSize11 = 11.0,
       this.fontSize12 = 12.0,
       this.fontSize13 = 13.0,
       this.fontSize14 = 14.0,
       this.fontSize15 = 15.0,
       this.fontSize16 = 16.0,
       this.fontSize18 = 18.0,
       this.fontSize20 = 20.0,
       this.fontSize30 = 30.0,
       this.fontSize36 = 36.0
     });

}
```

#### 三、根据模式切换主题

```dart
  ///根据模式更换颜色
  static SkinElement _getColor(){
    switch(App.themeColorString){
      case ColorMode.PRIMARY :
        return SkinElement();
      case ColorMode.DIABLOMODE :
        return SkinElement();
      default :
        return SkinElement();
    }
  }

```

#### 四、处理不透明度

```dart
/// 自动根据设计稿不透明度计算出具有透明度的颜色
  /// @param opacity 不透明度
  /// @param  color 颜色值
  /// @return color
  /// @author 
  /// created at 2020/5/27 16:41
  static Color getOpacityColor(int opacity,Color color){
    ///根据不透明度计算成透明度
    double _percent = (opacity == 0 || opacity <0) ? 0 : (opacity / 100);
    int _length = color.value.toString().length;
    if(_length == 10 && _percent != 0){
      ///根据透明度计算成十六进制透明度
      String _hexadecimal = (_percent * 255).round().toRadixString(16);
      ///获取颜色value值并转成16进制
      String _intString = color.value.toRadixString(16).toString();

      ///获取传入的十六进制数
      String _hexadecimalColor = _intString.substring(2,_intString.length);
    return Color(_hexToInt('$_hexadecimal$_hexadecimalColor'));
    }
    return color;
  }
  
  /// 十六进制字符串转成int类型
  /// @param  hex 十六进制字符串
  /// @return int
  /// @author 
  /// created at 2020/5/27 16:39
  ///
  static int _hexToInt(String hex) {
    int val = 0;
    int len = hex.length;
    for (int i = 0; i < len; i++) {
      int hexDigit = hex.codeUnitAt(i);
      if (hexDigit >= 48 && hexDigit <= 57) {
        val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
      } else if (hexDigit >= 65 && hexDigit <= 70) {
        // A..F
        val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
      } else if (hexDigit >= 97 && hexDigit <= 102) {
        // a..f
        val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
      } else {
        throw new FormatException("Invalid hexadecimal value");
      }
    }
    return val;
  }
```

#### 五、项目调用

```dart
static SkinElement rcColor = _getColor();
```

#### 六、可以新抽出透明度管理

#### 七、抽离透明度原因

> flutter 颜色自带Color属性有透明度相关方法但是抽出颜色管理后,根据赋值后的颜色去调用Color自带的透明度
>
> 在编译时不会报错,但是运行后会报错



Flutter学习之主题色封装与不透明度计算

#### **RcTheme.rcColor对应为颜色,自己项目封装的主题色**

```dart
class SearchUtils {
 static TextStyle _active = TextStyle(
   color: RcTheme.rcColor.primary00CCA9,
   fontSize:RcTheme.rcColor.fontSize18,
 );
 static TextStyle _off = TextStyle(
   color: RcTheme.rcColor.primary303133,
   fontSize:RcTheme.rcColor.fontSize18,
 );
  /// 获取高亮关键字文本
  static List<InlineSpan> getTitle(String source, String keyword, {TextStyle activeStyle,TextStyle offStyle}) {
    print("activeStyle = $activeStyle");
    activeStyle = activeStyle??_active;
    offStyle = offStyle??_off;
    List<InlineSpan> list = [];
    List<String> sourceList = [];
    List<String> temp = source?.split(keyword);
    temp?.forEach((s) {
      sourceList.add(s);
      sourceList.add(keyword);
    });
    if (sourceList.length > 0) sourceList.removeLast();
    sourceList?.forEach((v) {
      if(v.isEmpty) {
        return;
      }
      if (v == keyword) {
        list.add(TextSpan(
            text: keyword,
            style: activeStyle
        ),);
      } else {
        list.add(TextSpan(
            text: v,
            style: offStyle
        ),);
      }
    });
    return list;
  }
}
```



九机面试

过了(工资压得太狠了)

一、设置模式key

RcTheme.rcColor对应为颜色,自己项目封装的主题色