三个侧面的圆形文本输入框,其中一个矩形在颤动中

问题描述 投票:-1回答:3

我需要添加一个文本字段,该文本字段具有3边的圆形形状和一个带有正常矩形边的右上角。我试图用OutlineInputBorder做到这一点,它给了我边界。但是,我需要实现此设计。

由于我没有足够的声誉,所以我无法添加图像。如果有人帮助我,将会有所帮助。

    new Theme(
          data: new ThemeData(
            primaryColor: Colors.blue,
          ),
          child: TextFormField(
            style: new TextStyle(
              color: Color(0xff651515),
            ),
            autofocus: false,
            obscureText: false,
            keyboardType: TextInputType.text,

            decoration: InputDecoration(
              filled: true,
              border: new OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10))
              ),
              fillColor: Colors.black12,
              labelText: TextDisplayConstants.EMAIL,
              labelStyle: TextStyle(
                color: Color(0xffa4a4a4),
                fontSize: 14,
              ),
            ),[enter image description here][1]
          ),
        ),
flutter textinput
3个回答
1
投票

尝试一下:

Demo:

Demo border

示例代码:

OutlineInputBorder(
           borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10),
                topRight: Radius.circular(0)),
          )

0
投票

只需在Textformfield代码中替换边框,例如

border: new OutlineInputBorder(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                      bottomLeft: Radius.circular(20),
                      bottomRight: Radius.circular(0),
                    ),
                  ),

在想要矩形边框的一侧添加Radius.circular(0),例如,[[bottomRight:Radius.circular(0)


0
投票
border: new OutlineInputBorder( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(20), topLeft: Radius.circular(20), topRight: Radius.circular(20) ) ),
TextFormField

TextFormField( style: new TextStyle( color: Color(0xff651515), ), autofocus: false, obscureText: false, keyboardType: TextInputType.text, decoration: InputDecoration( filled: true, border: new OutlineInputBorder( borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20),topLeft: Radius.circular(20),topRight: Radius.circular(20)) ), fillColor: Colors.black12, labelStyle: TextStyle( color: Color(0xffa4a4a4), fontSize: 14, ), ) ),

© www.soinside.com 2019 - 2024. All rights reserved.