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,
    ),

效果：