Flutter Layout: How to get focus inside a textformfield wrapped on a Container-CodePudding

So I have this Container with a specific decoration border, and as a child I have the TextFormField with another styled border using the parameter enabledBorder.

My problem is: I have to make a double click to show the cursor and be able to write on my textformfield, because the focus only gets the container decoration and do not gets the focus from the inside of my TextFormField.

Here is my code:

         onFocusChange: (focus) {
           print(focus);
         },
         child: Focus(
           child: Container(
             decoration: _focusNode.hasFocus && widget.errorText == null
                 ? BambamShadows.dropShadowSelected()
                 : null,
             child: TextFormField(
               cursorColor: BambamColors.brandBlack,
               focusNode: _focusNode,
               inputFormatters: widget.inputFormatters,
               enabled: widget.enabled,
               onChanged: widget.onChanged,

How can I get both Focus inside Container and TextFormField?

CodePudding user response：

Check out this package @ https://pub.dev/packages/indexed it'll grant you the same equivalent property that Z-index has in CSS which will allow you to position elements in a stack based on the index; so based on your question if your txtformField has a higher index it wouldn't be "below" the container (if that makes sense);

Also you can always consider modifying your UI to focus on using Stack (very good documentation about it here: https://medium.flutterdevs.com/stack-and-positioned-widget-in-flutter-3d1a7b30b09a)

I'd try indexed, else I'd clone your current java to implement a stack UI structure and test different variants till you nail it;

CodePudding user response：

Try this autofocus: true, autofocus is a property in TextFormField class