I want to create the textfield which should looks like this on the picture. As I unerstood it creates with inner shadow to reach such effect as on the pic. How can I recreate this? I was trying to write code like this, but it also dosen't look like as I would like.
The code I tried:
Container(
width: 450,
height: 50,
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5))),
padding: EdgeInsets.all(10),
child: Container(
padding: EdgeInsets.zero,
decoration: BoxDecoration(
color: Colors.indigoAccent,
borderRadius:
BorderRadius.all(Radius.circular(8)),
boxShadow: [
BoxShadow(
color: Colors.blue,
blurRadius: 2,
spreadRadius: 2)
]),
width: double.infinity,
height: 20,
child: Center(
child: Text("Content goes here"),
),
))
CodePudding user response:
- You can try it:
Container( decoration: ShapeDecoration( gradient: LinearGradient( colors: [Color(0xFFe6dfd8), Color(0xFFf7f5ec)], begin: Alignment.topCenter, end: Alignment.bottomCenter, stops: [0.0, 0.4], tileMode: TileMode.clamp, ), shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(32.0)), ), ), child: TextField( expands: false, style: TextStyle(fontSize: 20.0, color: Colors.black54), decoration: InputDecoration( contentPadding: EdgeInsets.all(12.0), prefixIcon: Icon( Icons.email, color: Colors.black54, ), hintText: 'email', hintStyle: TextStyle(color: Colors.black54), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.white), borderRadius: BorderRadius.circular(32.0), ), enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.white), borderRadius: BorderRadius.circular(32.0), ), ), ), );