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;

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  MessagingProviders _auth = MessagingProviders.instance;

  @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: _auth,
          child: _registerationPageUI(),
        ),
      ),
    );
  }

  Widget _registerationPageUI() {
    return Builder(builder: (BuildContext _context) {
      SnackBarService.instance.buildContext = _context;
      _auth = Provider.of<MessagingProviders>(_context);
      return SingleChildScrollView(
        child: 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();
          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,
      keyboardType: TextInputType.emailAddress,
      textInputAction: TextInputAction.next,
      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,
      keyboardType: TextInputType.emailAddress,
      textInputAction: TextInputAction.next,
      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,
      keyboardType: TextInputType.emailAddress,
      textInputAction: TextInputAction.next,
      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 (_image == null) {
                  SnackBarService.instance
                      .showSnackBarError("please select an image");
                }
                if (_formKey.currentState!.validate() && _image != null) {
                  //
                  _auth.createUser(
                    _email!,
                    _password!,
                    _name!,
                    (String _uid) async {
                      var _url = await _auth.uploadUserImage(_image, _uid);
                      _auth.createUserInDB(_uid, _email!, _name!, _url);
                      if (_auth.status == AuthStatus.authenticated) {
                        _auth.login(_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,
        ),
      ),
    );
  }
}