How to create a unique TextBox design - user-interface

Question

I tried different ways to design the below design but couldn't be able to do it
The white rounded square is a TextBox that can type numeric.
Does anyone know how to design this in flutter?
If someone can help me, that would be great :)

Answer 1

Here is a working code designing the following textfield:
I've used a Row with two Container inside. The first container is the blue one, and the second container the background of the textfield. The TextField is the child of container 2. For the border and shadow, the decoration property of the containers is used
Full code; use the _height variable to ajust the textfield 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

I tried following code and it gives me a similar design
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)),
),
),
))
],
),
),
Is there any easy option to do that?