CODEWITHSUNDEEP
flutterflutter-layout
Jack Buss
Jack Buss

Reputation: 53

Adding shadow to inside of text field Flutter

I have this design that I'd like to use for my app but I'm not quite sure on how to add the box shadow. The shadow is on the inside of a TextField.. please can someone give me some assistance and point me in the right direction on how to do this?

The design I'd like top replicate

(the box shadow at the top of the TextField)

Cheers, Jack

Upvotes: 4

Views: 4780

Answers (1)

Luis Miguel Mantilla
Luis Miguel Mantilla

Reputation: 1748

You can achieve that using a container as a background, for example using a Linear Gradient you can get something like this:

enter image description here

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

You can improve the effect using a Radial Gradient, a Box Shadow or as @Jakk said a Neumorphic shape.

Hope it helps.

Upvotes: 7

Related Questions