如何创建独特的文本框设计

Question

我尝试了不同的方法来设计下面的设计，但无法做到白色圆角正方形是一个可以键入数字的文本框。有谁知道如何在 flutter 中设计这个？如果有人能帮助我，那就太好了:)

Answer 1

我试过下面的代码，它给了我一个类似的设计

                     Container(
                          width: double.infinity,
                          child: Row(
                            children: <Widget>[
                              Card(
                                margin: EdgeInsets.only(),
                                color: Color(0xff99d4fa),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.only(
                                      bottomLeft: Radius.circular(32.0),
                                      topLeft: Radius.circular(32.0)),
                                ),
                                child: Container(
                                  padding: EdgeInsets.only(
                                      top: 8, bottom: 8, left: 15, right: 12),
                                  child: TextStyles(headText: 'A'),
                                ),
                                elevation: 6,
                              ),
                              Expanded(
                                  child: Container(
                                    height: 41,
                                //margin: EdgeInsets.only(top: 8,),
                                decoration: new BoxDecoration(
                                  borderRadius: new BorderRadius.only(
                                    bottomRight: Radius.circular(32.0),
                                    topRight: Radius.circular(32.0),
                                  ),
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.grey[400],
                                      spreadRadius: 0.01,
                                      offset: Offset(3, 3), //(x,y)
                                      blurRadius: 5,
                                    ),
                                  ],
                                ),
                                child: Padding(
                                  padding: EdgeInsets.zero,
                                  child: TextField(
                                    decoration: new InputDecoration(
                                        border: InputBorder.none,
                                        focusedBorder: InputBorder.none,
                                        enabledBorder: InputBorder.none,
                                        errorBorder: InputBorder.none,
                                        disabledBorder: InputBorder.none,
                                        contentPadding: EdgeInsets.only(left: 10)),
                                  ),
                                ),
                              ))
                            ],
                          ),
                        ),

有什么简单的选择吗？

Answer 2

这是设计以下文本字段的工作代码：

我用过一个 Row，里面有两个 Container。第一个容器是蓝色的，第二个容器是文本框的背景。 TextField是容器2的child，边框和阴影使用容器的decoration属性

完整代码；使用 _height 变量调整文本字段高度：

class MyWidget extends StatelessWidget {
  final double _height = 45;
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: _height,
      child: Row(
        children: [
          Container(
            child: Text('A', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 24)),
            alignment: Alignment.center,
            width: 50,
            height: _height,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(_height / 2), bottomLeft: Radius.circular(_height / 2)),
              color: Colors.blueAccent,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 4.0, // has the effect of softening the shadow
                  offset: Offset(
                    3.0, // horizontal, move right 10
                    3.0, // vertical, move down 10
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: _height,
            child: TextField(
              decoration: new InputDecoration(
                  border: InputBorder.none,
                  focusedBorder: InputBorder.none,
                  enabledBorder: InputBorder.none,
                  errorBorder: InputBorder.none,
                  disabledBorder: InputBorder.none,
                  contentPadding: EdgeInsets.only(left: 10)),
            ),
            width: 300,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(topRight: Radius.circular(_height / 2), bottomRight: Radius.circular(_height / 2)),
              color: Colors.grey[200],
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 4.0, // has the effect of softening the shadow
                  offset: Offset(
                    3.0, // horizontal, move right 10
                    3.0, // vertical, move down 10
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

如何创建独特的文本框设计

How to create a unique TextBox design

user-interface

textbox

dart

flutter