Adding shadow text form field

Question

I want to achieve this

Here is my code so far,

Padding(
  padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
  child: Container(
    decoration: BoxDecoration(
      boxShadow: [
        const BoxShadow(
          blurRadius: 1,
        ),
      ],
      borderRadius: BorderRadius.circular(5.0),
    ),
    child: TextFormField(
      keyboardType: TextInputType.text,
      validator: (value) {
        if (value.isEmpty) {
          return MessageForm.required_message;
        }
        return null;
      },
      controller: _fullnameInput,
      decoration: InputDecoration(
        fillColor: Colors.white,
        filled: true,
        // enabledBorder: OutlineInputBorder(
        //   borderRadius: BorderRadius.circular(10.0),
        //   borderSide: BorderSide(
        //     color: AppColors.primary,
        //     width: 1.0,
        //   ),
        // ),
        border: OutlineInputBorder(),
        labelText: 'Full Name',
        labelStyle: TextStyle(fontSize: 15),
      ),
    ),
  ),
),

there result is not like i expect, here is the result

So how can i achieve it ? fyi, i'm not using nullsafety

Answer 1

You gotta play with the values like offset and blurRadius but here is an example:

BoxShadow(
      color: Colors.black,
      blurRadius: 15,
      offset: Offset(-5, 5),
),

Answer 2

Wrap your TextFormField in a Card. Example:

runApp(MaterialApp(
    color: Colors.grey[50],
    home: Center(
      child: SizedBox(
        width: 100,
        child: Card(
          elevation: 5,
          child: TextFormField(
            decoration: InputDecoration(
              fillColor: Colors.white,
              filled: true,
              border: InputBorder.none,
              labelText: 'Full Name',
              labelStyle: TextStyle(fontSize: 15),
            ),
          ),
        ),
      ),
    )));

Output:

Play with the elevation property to increase or decrease the amount of shadow