how to make text field in flutter like this. I want to develop a text field in flutter

CodePudding user response：

You can make this TextField like this:

TextField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                focusColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.white, width: 2.0),
                  borderRadius: BorderRadius.circular(30),
                ),
                border: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.white, width: 2.0),
                  borderRadius: BorderRadius.circular(30),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: const BorderSide(color: Colors.white, width: 2.0),
                  borderRadius: BorderRadius.circular(30),
                ),
                hintText: 'Email address',
                hintStyle: const TextStyle(color: Colors.grey),
              ),
            ),

CodePudding user response：

Hope it works for you:

 TextField(
       decoration: InputDecoration(
              filled: true,
              fillColor: Colors.white.withOpacity(0.6),
              hintText: "Email address",
              hintStyle: TextStyle(
                color: Colors.grey[400],
                fontWeight: FontWeight.bold
              ),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(20),
                borderSide: BorderSide.none,
              ),
            ),
    );

CodePudding user response：

Column(
      children:[
        const TextField(
                              decoration: InputDecoration(
                                fillColor: Colors.white,
                                filled: true,
                                isDense: true,
                                contentPadding:  EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
                                // counter: Container(),
                                counterText: '',
                                hintStyle: TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.w700,
                                  fontSize: 18),
                                hintText: 'Email Address',
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white),
                                  borderRadius:  BorderRadius.all(
                                    Radius.circular(12.0),
                                  ),
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white),
                                  borderRadius:  BorderRadius.all(
                                    Radius.circular(12.0),
                                  ),
                                ),
                              ),
                              keyboardType: TextInputType.emailAddress,
                              textInputAction: TextInputAction.next,

                            ),
        
        SizedBox(height: 20),
        const TextField(
                              decoration: InputDecoration(
                                fillColor: Colors.white,
                                filled: true,
                                isDense: true,
                                contentPadding:  EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0),
                                // counter: Container(),
                                counterText: '',
                                hintStyle: TextStyle(
                                  color: Colors.grey,
                                  fontWeight: FontWeight.w700,
                                  fontSize: 18),
                                hintText: 'Password',
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white),
                                  borderRadius:  BorderRadius.all(
                                    Radius.circular(8.0),
                                  ),
                                ),
                                enabledBorder: OutlineInputBorder(
                                  borderSide: BorderSide(color: Colors.white),
                                  borderRadius:  BorderRadius.all(
                                    Radius.circular(8.0),
                                  ),
                                ),
                              ),
                              keyboardType: TextInputType.visiblePassword,
                              obscureText: true,
                              textInputAction: TextInputAction.done,

                            ),
        
      ]
    )

CodePudding user response：

Please use this text field code. Import and use it everywhere

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:personal_diary/app/data/SelectedTheme.dart';
import 'package:personal_diary/app/data/ThemeData.dart';

class EditText extends StatelessWidget {
  // final Color textColor;
  final String hint;
  final int maxLine;
  final int? maxLength;
  final bool isObscure;
  final Color? textFieldColor, hintFieldColor;
  final TextInputType? keyboardType;
  final ThemeDetails themeDetails = SelectedTheme.instance.getTheme();
  final double marginTop, marginBottom, marginLeft, marginRight;
  final TextEditingController? controller;
  final bool isReadOnly;
  final double? fontSize;
  final double? height;
  final String? Function(String? val)? validator;

  EditText(
      {required this.hint,
      this.maxLine = 1,
      this.maxLength,
      this.fontSize,
      this.isReadOnly = false,
      this.isObscure = false,
      this.keyboardType,
      this.marginTop = 0.0,
      this.marginBottom = 0.0,
        this.height,
      this.marginLeft = 0.0,
      this.textFieldColor,
      this.hintFieldColor,
      this.validator,
      this.marginRight = 0.0,
      this.controller});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.85),

          borderRadius: BorderRadius.all(Radius.circular(12.sp))),
      padding: EdgeInsets.only(left: 10.w),
      margin: EdgeInsets.only(
          top: marginTop,
          bottom: marginBottom,
          right: marginRight,
          left: marginLeft),
      child: TextFormField(
        style: TextStyle(
          color: Colors.black,
          fontSize: fontSize ?? 14.sp,
          height: height,
        ),
        controller: controller,
        maxLines: maxLine,
        readOnly: isReadOnly,

        maxLength: maxLength,
        validator: validator,
        keyboardType: keyboardType,
        obscureText: isObscure,
        decoration: InputDecoration(
          hintText: hint, border: InputBorder.none,

          counterText: '',
          hintStyle: TextStyle(
              color: Colors.grey, fontSize: 14.sp
          ),
        ),
      ),
    );
  }
}

This is how you can use this code :

Column(
children : [
    EditText(
          hint: "Enter email",
          isObscure:true,
          keyboardType: TextInputType.number,
          hintFieldColor: Colors.grey,
          marginTop: 20.h,
          maxLength: 1,
          controller: confirmPasswordController,
        ),
]
)