elevated textfield

elevated_textfield.dart

import 'package:flutter/material.dart';

var rad = 16.0;
var borderWidth = 2.0;
var errorColor = Colors.red;

// ignore: must_be_immutable
class ElevatedTextField extends StatelessWidget {
  final TextInputType keyboardType;
  final FocusNode focusNode;
  final bool enabled;
  final bool autoFocus;
  final String errorText;
  final String initialValue;
  final bool readOnly;
  final String label;
  TextEditingController controller;
  final Function(String text) onChanged;
  final Widget trailing;
  final Function onTap;
  final Key key;

  bool get isError {
    return errorText != null;
  }

  bool get hasLabel {
    return label != null;
  }

  factory ElevatedTextField.date(
      {String label,
      @required BuildContext context,
      @required DateTime initialDate,
      @required DateTime firstDate,
      @required DateTime lastDate}) {
    return ElevatedTextField(
      label: label,
      readOnly: true,
      trailing: IconButton(
          icon: Icon(Icons.calendar_today),
          onPressed: () async {
            final dateResponse = await showDatePicker(
              context: context,
              initialDate: initialDate,
              firstDate: firstDate,
              lastDate: lastDate,
              builder: (BuildContext context, Widget child) {
                return Theme(
                  data: ThemeData.light().copyWith(
                    primaryColor: Theme.of(context).primaryColor,
                    accentColor: Theme.of(context).primaryColor,
                    colorScheme: ColorScheme.light(
                      primary: Theme.of(context).primaryColor,
                    ),
                    buttonTheme:
                        ButtonThemeData(textTheme: ButtonTextTheme.primary),
                  ),
                  child: child,
                );
              },
            );
            if (dateResponse != null) {
              print("date picked ${dateResponse}");
              // todo
            }
          }),
    );
  }

  ElevatedTextField(
      {this.keyboardType = TextInputType.text,
      this.enabled = true,
      this.autoFocus = false,
      this.errorText,
      this.controller,
      this.label,
      this.onChanged,
      this.readOnly = false,
      this.trailing,
      this.onTap,
      this.initialValue,
      this.key,
      this.focusNode})
      : super(key: key) {
    if (initialValue != null) {
      if (this.controller == null) {
        this.controller = new TextEditingController();
      }
      controller.text = initialValue;
      controller.selection = TextSelection.fromPosition(
          TextPosition(offset: controller.text.length));
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: nakedTextField(context),
    );
  }

  nakedTextField(BuildContext context) {
    Color boxColor = enabled ? Colors.white : Color(0xFFFF8F9FA);
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        hasLabel
            ? Padding(
                padding: EdgeInsets.only(bottom: 16, top: 24),
                child: Text(
                  label,
                  style: Theme.of(context).textTheme.bodyText1,
                ),
              )
            : SizedBox.shrink(),
        Container(
            decoration: BoxDecoration(boxShadow: [
              BoxShadow(
                  color: Colors.black.withOpacity(0.04),
                  offset: Offset(0, 10),
                  blurRadius: 20),
            ], color: boxColor, borderRadius: BorderRadius.circular(rad)),
            child: Row(
              children: [
                Flexible(
                    child: TextField(
                  onTap: onTap,
                  focusNode: focusNode,
                  keyboardType: keyboardType,
                  enabled: enabled && !readOnly,
                  autofocus: autoFocus,
                  controller: controller,
                  readOnly: readOnly,
                  onChanged: onChanged,
                  decoration: InputDecoration(
                      errorText: errorText != null ? '' : null,
                      errorStyle: TextStyle(height: 0),
                      // removes default error
                      border: InputBorder.none,
                      errorBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: errorColor, width: borderWidth),
                        borderRadius: BorderRadius.circular(rad),
                      ),
                      focusedErrorBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: errorColor, width: borderWidth),
                        borderRadius: BorderRadius.circular(rad),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.transparent, width: 0),
                        borderRadius: BorderRadius.circular(rad),
                      ),
                      disabledBorder: OutlineInputBorder(
                        borderSide:
                            BorderSide(color: Colors.transparent, width: 0),
                        borderRadius: BorderRadius.circular(rad),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                            color: Theme.of(context).primaryColor,
                            width: borderWidth),
                        borderRadius: BorderRadius.circular(rad),
                      )),
                )),
                if (trailing != null)
                  Container(
                    margin: EdgeInsets.all(16),
                    width: 36,
                    height: 36,
                    child: trailing,
                  )
              ],
            )),
        errorSection(context),
      ],
    );
  }

  Widget errorSection(BuildContext context) {
    return isError
        ? Container(
            margin: EdgeInsets.only(top: 8),
            child: Text(
              errorText,
              style: Theme.of(context)
                  .textTheme
                  .caption
                  .copyWith(color: Theme.of(context).errorColor),
            ),
          )
        : SizedBox.shrink();
  }
}