Flutter自定义圆角加背景输入框(通常登录用)



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:xbzx_flutter/res/styles.dart';

class CustomEdit extends StatelessWidget {
  final String title;
  final TextEditingController controller;
  final String hintText;
  final bool obscure;
  final IconData icon;
  final focusNode;

  final TextInputType keyboardType;

  CustomEdit({
    @required Key key,
    this.title,
    this.controller,
    this.hintText,
    this.obscure: false,
    this.icon,
    this.focusNode,
    this.keyboardType: TextInputType.text,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('$title', style: TextStyles.kLabelStyle),
          SizedBox(height: 10.0),
          Container(
              alignment: Alignment.centerLeft,
              decoration: kBoxDecorationStyle,
              height: 60.0,
              child: TextField(
                  keyboardType: keyboardType,
                  controller: controller,
                  focusNode: focusNode,
                  obscureText: obscure,
                  style: TextStyle(color: Colors.white),
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.only(top: 14.0),
                      prefixIcon: Icon(icon, color: Colors.white),
                      hintText: '$hintText',
                      hintStyle: TextStyles.kHintTextStyle))
          )
        ]);
  }
}

在styles文件里添加:

final kBoxDecorationStyle = BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(color: Colors.black12, blurRadius: 6.0, offset: Offset(0, 2))
    ]);

用法:

 CustomEdit(
    title: "账户",
    hintText: "Enter your Number",
    icon: Icons.phone_android_outlined,
      keyboardType: TextInputType.number,
      key: null,
    ),

效果:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值