Flutter - 3D TextFormField

app_text_form_field.dart

import 'package:flutter/material.dart';

class AppTextFormField extends StatefulWidget {
  final String textLabel;
  final double fontSize;
  final Color textColor;
  final Color backgroundColor;
  final Color shadowColor;
  final TextEditingController controller;
  final FocusNode focusNode;
  final FocusNode nextFocusNode;
  final bool obscureText;
  final ValueChanged<String> onFieldSubmitted;
  final TextInputAction textInputAction;
  final TextInputType keyboardType;

  AppTextFormField(
      {this.textLabel,
      this.fontSize,
      this.textColor,
      this.backgroundColor,
      this.shadowColor,
      this.controller,
      focusNode,
      this.obscureText = false,
      this.onFieldSubmitted,
      this.textInputAction = TextInputAction.next,
      this.keyboardType,
      this.nextFocusNode})
      : focusNode = focusNode ?? FocusNode();

  @override
  _AppTextFormFieldState createState() {
    return new _AppTextFormFieldState();
  }
}

class _AppTextFormFieldState extends State<AppTextFormField> {
  var _shadow = 2.5;
  var _marginTop = 0.0;
  var _marginBottom = 5.0;

  @override
  void initState() {
    super.initState();
    widget.focusNode.addListener(_changeFocus);
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      curve: Curves.decelerate,
      margin: EdgeInsets.only(top: _marginTop, bottom: _marginBottom),
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: widget.backgroundColor ?? Theme.of(context).primaryColor,
          shape: BoxShape.rectangle,
          boxShadow: [
            BoxShadow(
                color: widget.shadowColor ?? Theme.of(context).primaryColorDark,
                offset: Offset(0, _shadow))
          ]),
      child: TextFormField(
        controller: widget.controller,
        focusNode: widget.focusNode,
        textAlign: TextAlign.center,
        obscureText: widget.obscureText,
        onFieldSubmitted: widget.onFieldSubmitted ?? _nextField,
        textInputAction: widget.textInputAction,
        keyboardType: widget.keyboardType,
        style: TextStyle(
            fontSize: widget.fontSize,
            color: widget.textColor ?? Colors.grey.shade900),
        decoration: InputDecoration.collapsed(
            hintText: widget.textLabel,
            hintStyle: TextStyle(
                fontSize: widget.fontSize, color: Colors.grey.shade500)),
      ),
    );
  }

  void _nextField(String s) {
    if (widget.nextFocusNode != null) {
      widget.focusNode.unfocus();
      FocusScope.of(context).requestFocus(widget.nextFocusNode);
    }
  }

  void _changeFocus() {
    setState(() {
      if (widget.focusNode.hasFocus) {
        _shadow = 5.0;
        _marginTop = 0.0;
        _marginBottom = 5.0;
      } else {
        _shadow = 2.5;
        _marginTop = 2.5;
        _marginBottom = 2.5;
      }
    });
  }
}