CODEWITHSUNDEEP
flutterflutter-widget
Juan Carlos Mendoza
Juan Carlos Mendoza

Reputation: 5804

Flutter - How to add shadow in TextFormField on focus

How can I add a shadow in a TextFormField when focusing in Flutter? I want the field to have this appearance:

field with shadow

So far I managed to apply the border when focusing but I don't see any option to apply a shadow:

TextFormField(
  decoration: InputDecoration(
      fillColor: Colors.white,
      hoverColor: Colors.white,
      filled: true,
      enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
      focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.grey, width: 1))),
);

Any ideas on how to get this effect?

Upvotes: 2

Views: 6039

Answers (2)

user10539074
user10539074

Reputation:

important: wrap your TextField with Form widget and assign _formKey it helps to prevent dismiss the keyboard after setState()

complete example:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Home(),
      ),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  static GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  FocusNode focusNode;

  @override
  void initState() {
    super.initState();
    focusNode = FocusNode();
    focusNode.addListener(() => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 5),
      margin: const EdgeInsets.all(16),
      decoration: focusNode.hasFocus ? BoxDecoration(boxShadow: [BoxShadow(blurRadius: 6)]) : null,
      child: Form(
        key: _formKey,
        child: TextFormField(
          focusNode: focusNode,
          decoration: InputDecoration(
              fillColor: Colors.white,
              hoverColor: Colors.white,
              filled: true,
              enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
              focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey, width: 1))),
        ),
      ),
    );
  }
}

https://i.sstatic.net/boS20.jpg

Upvotes: 6

Aamil Silawat
Aamil Silawat

Reputation: 8239

Try out this:

 Container(
            decoration: BoxDecoration(
              boxShadow:  [new BoxShadow(
                color: Colors.black,
                blurRadius: 5.0, // You can set this blurRadius as per your requirement
              ),]
            ),
            child: TextFormField(
              decoration: InputDecoration(
                  fillColor: Colors.white,
                  hoverColor: Colors.white,
                  filled: true,
                  enabledBorder: OutlineInputBorder(borderSide: BorderSide.none),
                  focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey, width: 1))),
            ),
          ),

Upvotes: 0

Related Questions