在文本字段内后缀之前添加一条垂直线

问题描述 投票:0回答:1

我正在尝试在文本字段内添加一条垂直线,这是我想要实现的图像

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,
        )
      ],
    )
flutter dart
1个回答
0
投票

这是我的方法,看起来像这样 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(),
  ));
}
© www.soinside.com 2019 - 2024. All rights reserved.