Question 224731 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to completely remove spacing in between two widgets?

I want to remove any bit of space in between multiple widgets in order to create a custom TextField according to my UI.
also if im suggested any packages to do the same, it will be really helpful !
Row
–text
–textField
–text

My goal:

Required UI

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: FractionalOffset.center,
      width: 392.72727272727275,
      height: 40,
      decoration: const BoxDecoration(
        border: Border(
          top: BorderSide.none,
          left: BorderSide.none,
          right: BorderSide.none,
          bottom: BorderSide.none,
        ),
      ),
      child: const Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          const Text(
            '|',
            style: TextStyle(color: Colors.white),
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(0, 0, 0, 1.8),
            child: SizedBox(
              width: 392.72727272727275 - 42.5,
              child: TextField(
//                 controller: controller,
                style: const TextStyle(color: Colors.white),
                decoration: const InputDecoration(
                  contentPadding: EdgeInsets.only(left: 20),
                  enabledBorder: UnderlineInputBorder(
                    borderSide:
                        BorderSide(color: Colors.white, width: 1),
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide:
                        BorderSide(color: Colors.white, width: 1),
                  ),
                ),
              ),
            ),
          ),
          const Text(
            '|',
            style: TextStyle(color: Colors.white),
          ),
        ],
      ),
    );
  }
}

Output:

enter image description here

This statement indicates the intent to design a customized TextField widget while paying close attention to the spacing between the individual widgets involved in its composition. The primary objective is to precisely match the desired User Interface (UI) layout, ensuring that there are no visible gaps or unnecessary padding between the constituent widgets.

Tags:

2

Answers


  1. 0

    Using Row still contains a tiny space. Row(Text+Expanded(TextFiled)+Text). You can play with Transform or you can use Stack widget.

    const borderText = Text('|', style: TextStyle(color: Colors.white));
    return SizedBox(
      // alignment: FractionalOffset.center,
      // width: 392.72727272727275,
      width: 400,
      height: 40,
      child: const Stack(
        children: [
          Align(alignment: Alignment.bottomLeft, child: borderText),
          Align(alignment: Alignment.bottomRight, child: borderText),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            bottom: 1.8, // 1.8 🤔
            child: TextField(
              style: const TextStyle(color: Colors.white),
              decoration: const InputDecoration(
                contentPadding: EdgeInsets.only(left: 20),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 1),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white, width: 1),
                ),
              ),
            ),
          ),
        ],
      ),
    );
    Login or Signup to reply.
  2. 0

    Use

    SizedBox(
child: TextField()

)

    Sized Box you can avoid unnecessary padding of the widget

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search