flutter 项目实战工具类

flutter 图形验证码

2023-06-05  本文已影响0人  呆头呆脑雷

flutter 渲染图形验证码,点击刷新。加载过渡等。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:wegame_msmk/network/api.dart';

/// 图片验证码
class ImageVerifyCode extends StatefulWidget {
  final String url;
  final double? width;
  final double? height;
  const ImageVerifyCode({super.key, required this.url, this.width, this.height});

  @override
  State<ImageVerifyCode> createState() => _ImageVerifyCodeState();
}

class _ImageVerifyCodeState extends State<ImageVerifyCode> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {});
      },
      child: Container(
        width: widget.width ?? 80,
        height: widget.height ?? 35,
        color: const Color(0xFF44341D),
        child: Image.network(
          '${widget.url}?t=${DateTime.now().millisecondsSinceEpoch}',
          fit: BoxFit.cover,
          loadingBuilder: (context, child, loadingProgress) {
            if (loadingProgress == null) return child;

            return const Center(
              child:
                  CupertinoActivityIndicator(radius: 10, color: Colors.white),
            );
          },
        ),
      ),
    );
  }
}

上一篇下一篇

猜你喜欢

热点阅读