Как создать уникальный дизайн TextBox

Question

Я пробовал разные способы разработки приведенного ниже дизайна, но не смог этого сделать. Белый округленный квадрат - это TextBox, который может набирать цифру c. Кто-нибудь знает, как спроектировать это во флаттере? Если кто-то может мне помочь, это было бы здорово:)

Answer 1

Вот рабочий код, создающий следующее текстовое поле:

Я использовал Row с двумя Container внутри. Первый контейнер - синий, а второй - фон текстового поля. TextField - это child контейнера 2. Для границы и тени используется свойство 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
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

Я попробовал следующий код, и он дает мне похожий дизайн

                     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)),
                                  ),
                                ),
                              ))
                            ],
                          ),
                        ),

Есть ли простой способ сделать это?