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

CodePudding user response：

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

CodePudding user response：

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