zhiying_comm/lib/util/turn_chain/turn_chain_dialog.dart

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

///
/// 转链的过渡动画
///
class TurnChainDialog extends StatefulWidget {
  @override
  _TurnChainDialogState createState() => _TurnChainDialogState();
}

class _TurnChainDialogState extends State<TurnChainDialog> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Center(
        child: Container(
            height: 250,
            width: 260,
            // margin: const EdgeInsets.symmetric(horizontal: 70),
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(color: HexColor.fromHex('#FEFFFE'), borderRadius: BorderRadius.circular(13)),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                /// 跳转图标
                _buildTransitionIconWidget(),

                /// 正在跳转提示文字
                Padding(padding: const EdgeInsets.only(top: 12), child: _buildJumpTipWidget()),

                /// 返利和券
                Padding(padding: const EdgeInsets.only(top: 13), child: _buildCouponAndRebateWidget()),

                // /// 共省提示
                Padding(padding: const EdgeInsets.only(top: 14), child: _buildSaveMoneyTipWidget()),

                /// 注意提示文字
                Padding(padding: const EdgeInsets.only(top: 8, left: 9.5, right: 9.5), child: _buildNoticeWidget()),
              ],
            )),
      ),
    );
  }

  /// 过渡图标
  Widget _buildTransitionIconWidget() {
    return Container(
      height: 50,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(right: 8),
            width: 50,
            height: 50,
            color: Colors.red,
          ),
          Container(
            height: 10,
            width: 34,
            child: LoadingIndicator(
              indicatorType: Indicator.ballPulse,
              color: HexColor.fromHex('#FE7978'),
              colors: [
                HexColor.fromHex('#FF2020'),
                HexColor.fromHex('#FE7978'),
                HexColor.fromHex('#FEBCBB'),
              ],
            ),
          ),
          Container(
            margin: const EdgeInsets.only(left: 8),
            width: 50,
            height: 50,
            color: Colors.red,
          ),
        ],
      ),
    );
  }

  /// 跳转文字提示
  Widget _buildJumpTipWidget() {
    return Text(
      '正在跳转淘宝',
      style: TextStyle(color: HexColor.fromHex('#333333'), fontSize: 15, fontWeight: FontWeight.bold),
    );
  }

  /// 返利与优惠券
  Widget _buildCouponAndRebateWidget() {
    return Container(
      height: 30,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildCustomButtonWidget(text: '返利', textColor: '#FEFFFE', number: '¥ 23.99', numberColor: '#FEFFFE', bgColor: '#FF2020'),
          const SizedBox(width: 8),
          _buildCustomButtonWidget(text: '券', textColor: '#FEFFFE', number: '¥ 15.00', numberColor: '#FEFFFE', bgColor: '#FF2020'),
        ],
      ),
    );
  }

  Widget _buildCustomButtonWidget({String text, String textColor, String number, String numberColor, String bgColor, String bgImg}) {
    return Container(
        height: 30,
        width: 95,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: !EmptyUtil.isEmpty(bgImg) ? null : HexColor.fromHex(bgColor),
            image: EmptyUtil.isEmpty(bgImg)
                ? null
                : DecorationImage(
                    image: CachedNetworkImageProvider(bgImg ?? ''),
                  )),
        child: RichText(
          text: TextSpan(children: [
            TextSpan(
              text: text ?? '',
              style: TextStyle(color: HexColor.fromHex(textColor)),
            ),
            TextSpan(
              text: number ?? '',
              style: TextStyle(color: HexColor.fromHex(numberColor)),
            ),
          ]),
        ));
  }

  /// 总共省下多少钱的提示
  Widget _buildSaveMoneyTipWidget() {
    return RichText(
      text: TextSpan(children: [
        TextSpan(text: '共省 ¥', style: TextStyle(color: HexColor.fromHex('#FF2020'), fontSize: 13)),
        TextSpan(text: '38', style: TextStyle(color: HexColor.fromHex('#FF2020'), fontSize: 18)),
        TextSpan(text: '.99', style: TextStyle(color: HexColor.fromHex('#FF2020'), fontSize: 13)),
      ]),
    );
  }

  /// 注意提示文字提示
  Widget _buildNoticeWidget() {
    return Text(
      '注意：使用红包下单，会导致收益变少，或没有收益！',
      textAlign: TextAlign.center,
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(color: HexColor.fromHex('#999999'), fontSize: 11),
    );
  }
}