CODEWITHSUNDEEP
flutter
rameez khan
rameez khan

Reputation: 359

Flutter how to add shadow on textfield

I need to add shadow on my textfield

My code

TextField(
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.blueAccent,
                ),
                decoration: InputDecoration(
                    contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                    prefixIcon: Image.asset('assets/[email protected]'),
                    hintText: "Search services",
                    border: OutlineInputBorder(
                        borderSide:
                        BorderSide(color: Colors.white, width: 32.0),
                        borderRadius: BorderRadius.circular(25.0),
                    ),
                    focusedBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.white, width: 32.0),
                        borderRadius: BorderRadius.circular(25.0))))

Also i want to change the inside color of textfied in white

Want to achieve something like this

enter image description here

Upvotes: 2

Views: 2980

Answers (4)

kapil sharma
kapil sharma

Reputation: 21

Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(6),
                      boxShadow: const [
                        BoxShadow(
                          color: Colors.grey,
                          blurRadius: 10.0, // soften the shadow
                          spreadRadius: 1.0, //extend the shadow
                          offset: Offset(
                            1.0, // Move to right 5  horizontally
                            1.0, // Move to bottom 5 Vertically
                          ),
                        )
                      ]),
                  child: Row(
                    children: [
                      Expanded(
                        child: TextField(
                            decoration: InputDecoration(
                                focusedBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(6),
                                    borderSide: const BorderSide(
                                      color: Colors.transparent,
                                    )),
                                disabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(6),
                                    borderSide: const BorderSide(
                                      color: Colors.transparent,
                                    )),
                                enabledBorder: OutlineInputBorder(
                                    borderRadius: BorderRadius.circular(6),
                                    borderSide: const BorderSide(
                                      color: Colors.transparent,
                                    )),
                                fillColor: Colors.white,
                                filled: true,
                                hintText: "Search by Jewelers Name",
                                border: InputBorder.none,
                                hintStyle:
                                    const TextStyle(color: Colors.grey))),
                      ),
                    ],
                  ),
                ),

Upvotes: 0

Shri Hari L
Shri Hari L

Reputation: 4894

I could give you an idea. Try something like this,

Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(25.0),
                boxShadow: [
                  BoxShadow(
                    offset: Offset(0,5),
                    blurRadius: 10.0,
                    color: Colors.black.withOpacity(0.5),
                  ),
                ],
              ),
              child: TextField(
                style: TextStyle(
                  fontSize: 25.0,
                  color: Colors.blueAccent,
                ),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                  prefixIcon: Image.asset('assets/[email protected]'),
                  hintText: "Search services",
                  border: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0),
                  ),
                ),
              ),
            ),

Play around with the color and offset value, you will get the desired output!

Hope that suits your case!

Upvotes: 0

Akif
Akif

Reputation: 7640

You can wrap your TextField widget with Material. Material has property about the shadow. You can use it like this:

        Material(
          elevation: 3.0, // Set here what you wish!
          shadowColor: Colors.grey,
           child: TextField(
            style: TextStyle(
              fontSize: 25.0,
              color: Colors.blueAccent,
            ),
            decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                prefixIcon: Image.asset('assets/[email protected]'),
                hintText: "Search services",
                border: OutlineInputBorder(
                    borderSide:
                    BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0),
                ),
                focusedBorder: OutlineInputBorder(
                    borderSide:
                        BorderSide(color: Colors.white, width: 32.0),
                    borderRadius: BorderRadius.circular(25.0))))

Upvotes: 1

Hamza
Hamza

Reputation: 1636

You can try something like this below or you can wrap your TextField with Container and use BoxDecoration --> BoxShadow to add drop down shadow to it:

      Material(
              elevation: 20.0,
              shadowColor: Colors.blue,
                          child: TextField(
                obscureText: true,
                autofocus: false,
                decoration: InputDecoration(
                    icon: new Icon(Icons.lock, color: Color(0xff224597)),
                    hintText: 'Password',
                    fillColor: Colors.white,
                    filled: true,
                    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                    enabledBorder: OutlineInputBorder(borderRadius:BorderRadius.circular(5.0),
                    borderSide: BorderSide(color: Colors.white, width: 3.0))
                ),
              ),
            )

Upvotes: 1

Related Questions