class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _twoFactorAuth = false;

  final TextEditingController _userName = new TextEditingController();
  final TextEditingController _email = new TextEditingController();
  final TextEditingController _password = new TextEditingController();
  final _scaffoldKey = new GlobalKey<ScaffoldState>();
  VoidCallback _showPersBottomSheetCallBack;
  bool _obscureText = true;

  @override
  void initState() {
    super.initState();
    _showPersBottomSheetCallBack = _showBottomSheet;
  }

  void _showBottomSheet() {
    setState(() {
      _showPersBottomSheetCallBack = null;
    });

    _scaffoldKey.currentState
        .showBottomSheet((context) {
          return new Container(
              decoration: new BoxDecoration(
                  color: Colors.grey,
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(16.0),
                      topLeft: Radius.circular(16.0))),
              padding: new EdgeInsets.only(top: 0.5),
              child: new Container(
                  padding: new EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 0.0),
                  decoration: new BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.rectangle,
                      borderRadius: BorderRadius.only(
                          topRight: Radius.circular(16.0),
                          topLeft: Radius.circular(16.0))),
                  child: new SingleChildScrollView(
                      child: new Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          new CircleAvatar(
                            backgroundColor: Colors.brown.shade800,
                            child: new Text('MM'),
                            radius: 30.0,
                          ),
                          new Expanded(
                              child: new Container(
                                  padding: new EdgeInsets.only(right: 54.0),
                                  child: new Text(
                                    "Mendy Marcus",
                                    textAlign: TextAlign.center,
                                    style: new TextStyle(
                                        fontWeight: FontWeight.w300,
                                        fontSize: 20.0),
                                  )))
                        ],
                      ),
                      new Container(
                          margin: new EdgeInsets.only(top: 8.0),
                          child: new Form(
                            child: new Column(
                              children: <Widget>[
                                new Container(
                                  margin: new EdgeInsets.only(bottom: 8.0),
                                  child: new TextFormField(
                                    controller: _userName,
                                    keyboardType: TextInputType.text,
                                    decoration: new InputDecoration(
                                        border: InputBorder.none,
                                        filled: true,
                                        labelText: "Username",
                                        icon: new Icon(Icons.person_pin)),
                                  ),
                                ),
                                new Container(
                                  margin: new EdgeInsets.only(bottom: 8.0),
                                  child: new TextFormField(
                                    controller: _email,
                                    keyboardType: TextInputType.emailAddress,
                                    decoration: new InputDecoration(
                                        border: InputBorder.none,
                                        filled: true,
                                        labelText: "E-mail",
                                        icon: new Icon(Icons.email)),
                                  ),
                                ),
                                new Container(
                                  margin: new EdgeInsets.only(bottom: 8.0),
                                  child: new TextFormField(
                                    controller: _password,
                                    obscureText: _obscureText,
                                    keyboardType: TextInputType.text,
                                    decoration: new InputDecoration(
                                        suffixIcon: new GestureDetector(
                                          onTap: () {
                                            setState(() {
                                              _obscureText = !_obscureText;
                                            });
                                          },
                                          child: new Icon(_obscureText
                                              ? Icons.visibility
                                              : Icons.visibility_off),
                                        ),
                                        border: InputBorder.none,
                                        filled: true,
                                        labelText: "Password",
                                        icon: new Icon(Icons.lock)),
                                  ),
                                ),
                              ],
                            ),
                          )),
                      new SwitchListTile(
                        value: _twoFactorAuth,
                        onChanged: (bool newValue) {
                          setState(() {
                            _twoFactorAuth = newValue;
                          });
                        },
                        title: new Text("Two-Factor Authentication"),
                      ),
                      new Divider(
                        height: 16.0,
                        color: Colors.redAccent,
                        indent: 0.0,
                      ),
                      new Center(
                          child: new MaterialButton(
                        onPressed: () => {},
                        padding: new EdgeInsets.all(8.0),
                        child: new Column(
                          // Replace with a Row for horizontal icon + text
                          children: <Widget>[
                            new Icon(Icons.delete),
                            new Text("Delete Account")
                          ],
                        ),
                      ))
                    ],
                  ))));
        })
        .closed
        .whenComplete(() {
          if (mounted) {
            setState(() {
              _showPersBottomSheetCallBack = _showBottomSheet;
            });
          }
        });
  }

  @override
  Widget build(BuildContext context) {
    return new SafeArea(
        child: new Scaffold(
      key: _scaffoldKey,
      body: new Padding(
        padding: const EdgeInsets.all(20.0),
        child: new Center(
            child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
              onPressed: _showPersBottomSheetCallBack,
              child: new Text("Account"),
            ),
          ],
        )),
      ),
    ));
  }
}