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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _isKeyboardVisible = !(MediaQuery.of(context).viewInsets.bottom == 0);

    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(title: Text("FlutterApp")),
      body: Container(
        padding: EdgeInsets.all(40),
        child: Column(
          children: [
            LoginForm(),
            Padding(
              padding: EdgeInsets.only(top: 20, bottom: 20),
              child: Text(
                "Forgot password?",
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.blue,
                ),
              ),
            ),
            Text(
              "The Keyboard is: ${_isKeyboardVisible ? "visible" : "hidden"}",
            )
            //...Another Widgets
          ],
        ),
      ),
    );
  }
}

class LoginForm extends HookWidget {
  final GlobalKey<FormState> _formKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final isObscurePassword = useState(false);
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.emailAddress,
            onEditingComplete: () => FocusScope.of(context).nextFocus(),
            decoration: InputDecoration(
              hintText: 'Email',
              prefixIcon: Padding(
                padding: const EdgeInsetsDirectional.only(start: 15.0, end: 10),
                child: Icon(
                  Icons.alternate_email,
                  size: 30.0,
                ),
              ),
            ),
            onSaved: (text) => {},
          ),
          SizedBox(height: 22),
          TextFormField(
            onEditingComplete: () => FocusScope.of(context).unfocus(),
            enableInteractiveSelection: false,
            textInputAction: TextInputAction.done,
            keyboardType: TextInputType.visiblePassword,
            obscureText: isObscurePassword.value,
            decoration: InputDecoration(
              hintText: 'Password',
              prefixIcon: Padding(
                padding: const EdgeInsetsDirectional.only(
                  start: 15.0,
                  end: 10,
                ),
                child: Icon(
                  Icons.lock,
                  size: 30.0,
                ),
              ),
              suffixIcon: Padding(
                padding: const EdgeInsetsDirectional.only(
                  start: 10.0,
                  end: 15,
                ),
                child: IconButton(
                  splashColor: Colors.transparent,
                  icon: Icon(
                    isObscurePassword.value
                        ? Icons.visibility_off
                        : Icons.visibility,
                    color: isObscurePassword.value ? Colors.grey : Colors.blue,
                    size: 30.0,
                  ),
                  onPressed: () =>
                      isObscurePassword.value = !isObscurePassword.value,
                ),
              ),
            ),
            onSaved: (text) => {},
          ),
          SizedBox(height: 45),
          Container(
            width: double.infinity,
            height: 52,
            child: RaisedButton(
              onPressed: () => {},
              color: Theme.of(context).accentColor,
              child: Text(
                "LOGIN".toUpperCase(),
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}