zhiying_base_widget/lib/widgets/team/recommend/team_recommend_widget.dart

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

///
/// 我的团队 - 我的推荐人
///
class TeamRecommendWidget extends StatefulWidget {
  // final Map<String, dynamic> data;
  //
  // const TeamRecommendWidget(this.data);

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

class _TeamRecommendWidgetState extends State<TeamRecommendWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(left: 12.5, right: 12.5, top: 10.5),
      child: _getMainWidget(),
    );
  }

  /// 按钮点击事件
  void _onClickListener() {}

  /// 主体Widget
  Widget _getMainWidget() {
    return Container(
      padding: const EdgeInsets.only(left: 10, bottom: 12, right: 10),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.white),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          /// 左上角的Icon
          _getLeftTopWidget(),

          const SizedBox(height: 6),

          /// 数据视图
          Visibility(
            visible: true,
              replacement: _getInputCombWidget(),
              child: Padding(padding: const EdgeInsets.only(left: 10), child: _getDataWidget())),
        ],
      ),
    );
  }

  /// 我的推荐人IconWidget(左上角的ICON)
  Widget _getLeftTopWidget() {
    return Transform.translate(offset: Offset(0, -4.5), child: Container(width: 80, height: 28, color: Colors.red));
  }

  /// 没邀请人的Widget
  Widget _getInputCombWidget() {
    return Container(
      margin: const EdgeInsets.only(left: 2.5, right: 2.5),
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        // crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          /// 输入框
          Container(
            height: 30,
            width: double.infinity,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              color: HexColor.fromHex('#F7F7F7'),
            ),
            padding: const EdgeInsets.only(top: 3.5, bottom: 3.5, right: 3, left: 13),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: _getInputWidget(),
                ),
                /// 添加的按钮
                _getAddButtomWidget(),
              ],
            ),
          ),

          const SizedBox(height: 10.5),

          /// 文字提示
          Text('还没有填写邀请人ID，填写后双方都可以获得奖励', style: TextStyle(color: HexColor.fromHex('#909090'), fontSize: 11)),
        ],
      ),
    );
  }


  /// 输入框的
  Widget _getInputWidget(){
    return TextField(
      style:TextStyle(color: HexColor.fromHex('#000000'), fontSize: 12, textBaseline: TextBaseline.alphabetic),

      decoration: InputDecoration(
        border: InputBorder.none,
        enabledBorder: InputBorder.none,
        disabledBorder: InputBorder.none,
        errorBorder: InputBorder.none,
        focusedErrorBorder: InputBorder.none,
        focusedBorder: InputBorder.none,
        hintText: '输入邀请人ID',
        isDense: true,
        filled: true,
        fillColor: Colors.transparent,
        contentPadding: EdgeInsets.zero,
        hintStyle: TextStyle(color: HexColor.fromHex('#909090'), fontSize: 12, textBaseline: TextBaseline.alphabetic),
      ),
    );
  }
  

  /// 添加的按钮
  Widget _getAddButtomWidget() {
    // return Material(
    //   child: Container(
    //     height: 24,
    //     color: Colors.white,
    //     child: RaisedButton(
    //       padding: EdgeInsets.zero,
    //       child: Text('添加', style: TextStyle(fontSize: 13)),
    //       textColor: HexColor.fromHex('#FFFFFF'),
    //       color: HexColor.fromHex('#F94B47'),
    //       disabledColor: HexColor.fromHex('#F94B47'),
    //       disabledTextColor: HexColor.fromHex('#FFFFFF'),
    //       elevation: 5,
    //       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24 / 2)),
    //       onPressed: () => _onClickListener(),
    //     ),
    //   ),
    // );

    return Material(
      child: InkWell(
        onTap: (){},
        child: Container(
          padding: const  EdgeInsets.only(left: 21, right: 21, top: 2.5, bottom: 2.5),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30),
            color: HexColor.fromHex('#F94B47')
          ),
          child: Text('添加', style: TextStyle(fontSize: 13, color:  HexColor.fromHex('#FFFFFF'))),
        ),
      ),
    );
  }

  /// 数据视图
  Widget _getDataWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        /// 头像widget
        _getAvatarWidget(),

        const SizedBox(width: 12),

        /// 数据
        _getDataRightWidget(),
      ],
    );
  }

  /// 头像widget
  Widget _getAvatarWidget() {
    return Container(
      width: 55,
      height: 55,
      color: Colors.red,
    );
  }

  /// 数据右边视图，头像右边的widget
  Widget _getDataRightWidget() {
    return SizedBox(
      height: 55,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          /// 昵称
          _getNickNameWidget(),

          /// 手机号
          _getPhoneNumberWidget(),

          /// 微信号
          _getWXWidget()
        ],
      ),
    );
  }

  /// 昵称
  Widget _getNickNameWidget() {
    // return  RichText(
    //   text: TextSpan(text: '毛毛虫', style: TextStyle(fontSize: 14, color: HexColor.fromHex('#000000'), fontWeight: FontWeight.bold),
    //     children: [
    //       TextSpan(text: '邀请码：', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#909090'), fontWeight: FontWeight.w400)),
    //       TextSpan(text: '123456', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#909090'), fontWeight: FontWeight.w400)),
    //     ]
    //   ),
    // );

    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        /// 昵称
        Text('毛毛虫', style: TextStyle(fontSize: 14, color: HexColor.fromHex('#000000'), fontWeight: FontWeight.bold)),
        const SizedBox(width: 6),
        Text('邀请码：', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#909090'))),
        Text('123456', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#909090'), fontFamily: 'Din', package: 'zhiying_base_widget')),
      ],
    );
  }

  /// 手机号
  Widget _getPhoneNumberWidget() {
    return Row(
      children: <Widget>[
        Text('手机号：', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#AFAFAF'))),
        Text('12354678910', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#AFAFAF'), fontFamily: 'Din', package: 'zhiying_base_widget')),
        const SizedBox(width: 6),

        /// 拷贝按钮
        _getCustomCopyWidget(),
      ],
    );
  }

  /// 微信号
  Widget _getWXWidget() {
    return Row(
      children: <Widget>[
        Text('微信号：', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#AFAFAF'))),
        Text('12354678910', style: TextStyle(fontSize: 11, color: HexColor.fromHex('#AFAFAF'), fontFamily: 'Din', package: 'zhiying_base_widget')),
        const SizedBox(width: 6),

        /// 拷贝按钮
        _getCustomCopyWidget(),
      ],
    );
  }

  /// 自定义复制按钮的Widget
  Widget _getCustomCopyWidget() {
    return Container(
      padding: const EdgeInsets.only(left: 4, bottom: 2, top: 2, right: 6),
      decoration: BoxDecoration(
        color: HexColor.fromHex('#FFF2F2'),
        borderRadius: BorderRadius.circular(30),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(width: 11, height: 11, color: Colors.red),
          const SizedBox(width: 4.5),
          Text('复制', style: TextStyle(fontSize: 8, color: HexColor.fromHex('#F94B47')))
        ],
      ),
    );
  }
}