Implementation Outlined text field Input with lable text in flutter application

Question

i want to have a textFieldInput with border that has label inside the border like the image below. Thankyou in advance

Solution 1

TextField(
              decoration: InputDecoration(
                filled: true,
                fillColor: Colors.white,
                labelText: "Label",
                hintText: "Input Text",
                contentPadding: EdgeInsets.fromLTRB(32, 16, 32, 16),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
              ),
            ),

Result:

Solution 2

I think you want to achieve something like this.

1. Inactive
2. Active
3. Validation

You can achieve this design by using this widget.

class OutlineBorderTextFormField extends StatefulWidget {
  FocusNode myFocusNode;
  TextEditingController tempTextEditingController;
  String labelText;
  TextInputType keyboardType;
  bool autofocus = false;
  TextInputAction textInputAction;
  List<TextInputFormatter> inputFormatters;
  Function validation;
  bool checkOfErrorOnFocusChange = false;//If true validation is checked when evre focus is changed

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _OutlineBorderTextFormField();
  }

  OutlineBorderTextFormField(
      {@required this.labelText,
      @required this.autofocus,
      @required this.tempTextEditingController,
      @required this.myFocusNode,
      @required this.inputFormatters,
      @required this.keyboardType,
      @required this.textInputAction,
      @required this.validation,
      @required this.checkOfErrorOnFocusChange});
}

class _OutlineBorderTextFormField extends State<OutlineBorderTextFormField> {
  bool isError = false;
  String errorString = "";

  getLabelTextStyle(color) {
    return TextStyle(
        fontSize: 12.0, color: color
    );
  } //label text style

  getTextFieldStyle() {
    return TextStyle(
        fontSize: 12.0,
        color: Colors.black,
    );
  } //textfield style

  getErrorTextFieldStyle() {
    return TextStyle(
        fontSize: 10.0,
        color: Colors.red,
    );
  }// Error text style

  getBorderColor(isfous) {
    return isfous
        ? Colors.deepPurple
        : Colors.black54;
  }//Border colors according to focus

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(left: 16.0, top: 15.0, right: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          FocusScope(
            child: Focus(
              onFocusChange: (focus) {
                //Called when ever focus changes
                print("focus: $focus");
                setState(() {
                  getBorderColor(focus);
                  if (widget.checkOfErrorOnFocusChange &&
                      widget
                          .validation(widget.tempTextEditingController.text)
                          .toString()
                          .isNotEmpty) {
                    isError = true;
                    errorString = widget
                        .validation(widget.tempTextEditingController.text);
                  } else {
                    isError = false;
                    errorString = widget
                        .validation(widget.tempTextEditingController.text);
                  }
                });
              },
              child: Container(
                padding: EdgeInsets.all(2.0),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                    borderRadius: BorderRadius.all(Radius.circular(
                            6.0) //                 <--- border radius here
                        ),
                    border: Border.all(
                      width: 1,
                      style: BorderStyle.solid,
                      color: isError
                          ? Colors.red
                          : getBorderColor(widget.myFocusNode.hasFocus),
                    )),
                child: TextFormField(
                  focusNode: widget.myFocusNode,
                  controller: widget.tempTextEditingController,
                  style: getTextFieldStyle(),
                  autofocus: widget.autofocus,
                  keyboardType: widget.keyboardType,
                  textInputAction: widget.textInputAction,
                  inputFormatters: widget.inputFormatters,
                  validator: (string) {
                    if (widget
                        .validation(widget.tempTextEditingController.text)
                        .toString()
                        .isNotEmpty) {
                      setState(() {
                        isError = true;
                        errorString = widget
                            .validation(widget.tempTextEditingController.text);
                      });
                      return "";
                    } else {
                      setState(() {
                        isError = false;
                        errorString = widget
                            .validation(widget.tempTextEditingController.text);
                      });
                    }
                    return null;
                  },
                  decoration: InputDecoration(
                      labelText: widget.labelText,
                      labelStyle: isError
                          ? getLabelTextStyle(
                              Colors.red)
                          : getLabelTextStyle(Colors.deepPurple),
                      contentPadding:
                          EdgeInsets.symmetric(vertical: 7, horizontal: 16),
                      fillColor: Colors.grey[200],
                      filled: true,
                      enabledBorder: InputBorder.none,
                      errorBorder: InputBorder.none,
                      border: InputBorder.none,
                      errorStyle: TextStyle(height: 0),
                      focusedErrorBorder: InputBorder.none,
                      disabledBorder: InputBorder.none,
                      focusedBorder: InputBorder.none,
                      hasFloatingPlaceholder: true),
                ),
              ),
            ),
          ),
          Visibility(
              visible: isError ? true : false,
              child: Container(
                  padding: EdgeInsets.only(left: 15.0, top: 2.0),
                  child: Text(
                    errorString,
                    style: getErrorTextFieldStyle(),
                  ))),
        ],
      ),
    );
    ;
  }
}

Example for calling this widget

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  FocusNode myFocusNode = new FocusNode();
  TextEditingController tempTextEditingController = TextEditingController();

  FocusNode myFocusNode1 = new FocusNode();
  TextEditingController tempTextEditingController1 = TextEditingController();
  void validateAndSave() {
    final FormState form = _formKey.currentState;
    if (form.validate()) {
      print('Form is valid');
    } else {
      print('Form is invalid');
    }
  }
  String getTempIFSCValidation(String text) {
    return text.length > 5 ? "* Please enter valid IFSC Code" : "";
  }
  String getTempAccountValidation(String text) {
    return text.length > 8 ? "* Please enter valid Account Number" : "";
  }


  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            OutlineBorderTextFormField(labelText: "Account Number*",myFocusNode: myFocusNode,tempTextEditingController: tempTextEditingController,
             keyboardType: TextInputType.number,
            textInputAction: TextInputAction.next,
            autofocus: false,
            checkOfErrorOnFocusChange: true,
            inputFormatters: [
              LengthLimitingTextInputFormatter(18),
              WhitelistingTextInputFormatter.digitsOnly
            ],
            validation: (textToValidate){
              return getTempAccountValidation(textToValidate);
            },),
            OutlineBorderTextFormField(labelText: "Re- Enter Account Number*",myFocusNode: myFocusNode1,tempTextEditingController: tempTextEditingController1,
              keyboardType: TextInputType.number,
              textInputAction: TextInputAction.next,
              autofocus: false,
              checkOfErrorOnFocusChange: true,
              inputFormatters: [
                LengthLimitingTextInputFormatter(18),
                WhitelistingTextInputFormatter.digitsOnly
              ],
              validation: (textToValidate){
              print("Value Validated");
              return getTempIFSCValidation(textToValidate);
            },),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: validateAndSave,//call the validation method
        tooltip: 'Validate',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Comments

[Lucas Baggio]

Please, if this answer was helpful, mark it as correct