MessagingApp/lib/pages/registeration_page.dart

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:messaging_app/components/messaging_provider.dart';
import 'package:messaging_app/service/media_service.dart';
import 'package:messaging_app/service/navigation_service.dart';
import 'package:messaging_app/service/snackbar_service.dart';
import 'package:provider/provider.dart';

class RegisterationPage extends StatefulWidget {
  const RegisterationPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _RegisterationPageState();
  }
}

class _RegisterationPageState extends State<RegisterationPage> {
//
  var _deviceHeight;
  var _deviceWidth;
  XFile? _image;
  String? _name;
  String? _email;
  String? _password;

  late GlobalKey<FormState> _formKey;
  late MessagingProviders _auth;

  _RegisterationPageState() {
    _formKey = GlobalKey<FormState>();
  }

  @override
  Widget build(BuildContext context) {
//
    _deviceHeight = MediaQuery.of(context).size.height;
    _deviceWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: Container(
        // color: Colors.blue,
        alignment: Alignment.center,
        child: ChangeNotifierProvider<MessagingProviders>.value(
          value: MessagingProviders.instance,
          child: _registerationPageUI(),
        ),
      ),
    );
  }

  Widget _registerationPageUI() {
    return Builder(builder: (BuildContext _context) {
      SnackBarService.instance.buildContext = _context;
      _auth = Provider.of<MessagingProviders>(_context);
      return Container(
        // color: Colors.deepOrange,
        height: _deviceHeight * 0.75,
        padding: EdgeInsets.symmetric(horizontal: _deviceWidth * 0.10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _headingWidget(),
            _inputForm(),
            _registerButton(),
            _backToLoginPage(),
          ],
        ),
      );
    });
  }

  Widget _headingWidget() {
    return SizedBox(
      height: _deviceHeight * 0.12,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'SignUp to Enjoy!',
            style: TextStyle(fontSize: 35, fontWeight: FontWeight.w700),
          ),
          Text(
            'Please enter your details',
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.w200),
          )
        ],
      ),
    );
  }

  Widget _inputForm() {
    return Container(
      height: _deviceHeight * 0.35,
      child: Form(
        key: _formKey,
        onChanged: () {
          _formKey.currentState?.save();
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _imageSelectorWidgeet(),
            _nameTextField(),
            _emailTextField(),
            _passwordTextField(),
          ],
        ),
      ),
    );
  }

  Widget _imageSelectorWidgeet() {
    return Align(
      child: GestureDetector(
        onTap: () async {
          XFile? _imageFile = await MediaService.instance.getImageFromLibrary();
          _imageFile!.name;
          setState(() {
            _image = _imageFile;
          });
        },
        child: Container(
          height: _deviceHeight * 0.10,
          width: _deviceHeight * 0.10,
          decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.circular(500),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: _image != null
                    ? Image.file(File(_image!.path)).image
                    : NetworkImage('https://i.pravatar.cc/1000'),
                // image: NetworkImage('https://cdn0.iconfinder.com/data/icons/occupation-002/64/programmer-programming-occupation-avatar-512.png'),
              )),
        ),
      ),
    );
  }

  Widget _nameTextField() {
    return TextFormField(
      autocorrect: false,
      style: TextStyle(
        color: Colors.white,
      ),
      validator: (_input) {
        return _input!.isNotEmpty ? null : "Please enter a valid Name";
      },
      onSaved: (_input) {
        setState(() {
          _name = _input!;
        });
      },
      cursorColor: Colors.white,
      decoration: InputDecoration(
          hintText: "Name",
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white))),
    );
  }

  Widget _emailTextField() {
    return TextFormField(
      autocorrect: false,
      style: TextStyle(
        color: Colors.white,
      ),
      validator: (_input) {
        return _input!.isNotEmpty && _input.contains("@")
            ? null
            : "Please enter a valid Email";
      },
      onSaved: (_input) {
        setState(() {
          _email = _input!;
        });
      },
      cursorColor: Colors.white,
      decoration: InputDecoration(
          hintText: "Email",
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white))),
    );
  }

  Widget _passwordTextField() {
    return TextFormField(
      autocorrect: false,
      style: TextStyle(
        color: Colors.white,
      ),
      validator: (_input) {
        return _input!.isNotEmpty ? null : "Please enter a Password";
      },
      onSaved: (_input) {
        setState(() {
          _password = _input!;
        });
      },
      obscureText: true,
      cursorColor: Colors.white,
      decoration: InputDecoration(
          hintText: "Password",
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.white))),
    );
  }

  Widget _registerButton() {
    return _auth.status == AuthStatus.authenticating
        ? Align(
            child: CircularProgressIndicator(),
          )
        : SizedBox(
            height: _deviceHeight * 0.06,
            width: _deviceWidth,
            child: MaterialButton(
              onPressed: () {
                if (_formKey.currentState!.validate() && _image != null) {
                  //
                  _auth.createUser(_email!, _password!, (String _uid) async {
                    var _url = await _auth.uploadUserImage(_image, _uid);
                    _auth.createUserInDB(_uid, _email!, _name!, _url);
                    if (_auth.status == AuthStatus.authenticated) {
                      _auth.loginWithEmailAndPassword(_email!, _password!);
                    }
                    //
                  });
                  //Login User
                  // _auth.loginWithEmailAndPassword(_email!, _password!);
                }
              },
              color: Colors.blue,
              child: Text(
                'Register',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          );
  }

  Widget _backToLoginPage() {
    return GestureDetector(
      onTap: () {
        NavigationService.instance.goBack();
      },
      child: Container(
        height: _deviceHeight * 0.06,
        width: _deviceWidth,
        child: Icon(
          Icons.arrow_back,
          size: 40,
        ),
      ),
    );
  }
}