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

Flutter – Adding a vertical line inside the textField before the suffix

I am trying to add a vertical line inside the textfield, here is the image I am trying to achieve

image

Stack(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            CustomText(
              title: label,
              isCenter: true,
              textSize: fontSize16,
            ),
            const SizedBox(height: 10),
            TextFormField(
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.symmetric(horizontal: 10),
                hintText: hint,
                // suffixText: 'USD',
                // suffix: Container(
                //   height: 40,
                //   width: 10,
                //   decoration: BoxDecoration(
                //       border: Border.all(
                //     color: appGrayColor,
                //   )),
                // ),
                suffixStyle: const TextStyle(color: Colors.blue),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  borderSide: const BorderSide(
                    color: appGrayColor,
                    width: 0.5,
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  borderSide: const BorderSide(
                    color: appGrayColor,
                    width: 0.5, // This is the width of the border.
                  ),
                ),
              ),
              keyboardType: TextInputType.number,
            ),
          ],
        ),
        const VerticalDivider(
          color: Colors.black,
          thickness: 1.0,
        )
      ],
    )
Tags:

2

Answers


  1. 0

    Here is my approach which looks like this
    enter image description here

    import 'package:flutter/material.dart';

class SplitInputField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          constraints: BoxConstraints(maxWidth: 360), // Adjust width as needed
          decoration: BoxDecoration(
            border: Border.all(
                color: Colors.blueGrey), // Add border to the container
            borderRadius: BorderRadius.circular(6.0), // Add border radius
          ),
          child: Stack(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Expanded(
                    child: TextFormField(
                      initialValue: 'gbenga', // Set initial value
                      decoration: InputDecoration(
                        hintText: 'email',
                        border: OutlineInputBorder(
                          borderSide: BorderSide.none,
                        ),
                      ),
                    ),
                  ),
                  Container(
                    width: 1.0, // Adjust the width of the line as needed
                    height: 25.0, // Adjust the height of the line as needed
                    color: Colors
                        .blueGrey, // Adjust the color of the line as needed
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      '@mail.com',
                      style: TextStyle(
                        fontSize: 14.0,
                        color: Colors.blueGrey,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: SplitInputField(),
  ));
}
    Login or Signup to reply.
  2. 0

    Add a Row as a suffixIcon that contains the vertical line (as a Container) and the "USD" (as a Text):

    child: TextFormField(
                decoration: InputDecoration(
                  contentPadding: const EdgeInsets.symmetric(horizontal: 10),
                  suffixIcon: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Container(
                        color: Colors.red,
                        width: 1,
                        height: 50,
                      ),
                      const Padding(
                        padding: EdgeInsets.symmetric(horizontal: 20.0),
                        child: Text("USD"),
                      ),
                    ],
                  ),
                  hintText: "hint",
                  suffixStyle: const TextStyle(color: Colors.blue),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                    borderSide: const BorderSide(
                      color: Colors.orange,
                      width: 0.5,
                    ),
                  ),
                ),
              ),

    The output is:

    enter image description here

    and then you could update the colors (appGrayColor for instance) and the symmetric horizontal padding values.

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

Back To Top
Search