* updated example app

* updated README.md

Author: rithik-dev

README.md

@@ -217,155 +217,176 @@ void _verifyPhoneNumber() async {
 
 #### Sample Usage
 ```dart
-import 'package:firebase_core/firebase_core.dart';
 import 'package:firebase_phone_auth_handler/firebase_phone_auth_handler.dart';
 import 'package:flutter/material.dart';
+import 'package:phone_auth_handler_demo/screens/home_screen.dart';
+import 'package:phone_auth_handler_demo/utils/helpers.dart';
+import 'package:phone_auth_handler_demo/widgets/custom_loader.dart';
+import 'package:phone_auth_handler_demo/widgets/pin_input_field.dart';
 
-void main() async {
-  WidgetsFlutterBinding.ensureInitialized();
-  await Firebase.initializeApp();
-  runApp(_MainApp());
+class VerifyPhoneNumberScreen extends StatefulWidget {
+  static const id = 'VerifyPhoneNumberScreen';
+
+  final String phoneNumber;
+
+  const VerifyPhoneNumberScreen({
+    Key? key,
+    required this.phoneNumber,
+  }) : super(key: key);
+
+  @override
+  State<VerifyPhoneNumberScreen> createState() =>
+      _VerifyPhoneNumberScreenState();
 }
 
-class _MainApp extends StatelessWidget {
+class _VerifyPhoneNumberScreenState extends State<VerifyPhoneNumberScreen>
+    with WidgetsBindingObserver {
+  bool isKeyboardVisible = false;
+
+  late final ScrollController scrollController;
+
   @override
-  Widget build(BuildContext context) {
-    return FirebasePhoneAuthProvider(
-      child: MaterialApp(
-        debugShowCheckedModeBanner: false,
-        home: VerifyPhoneNumberScreen(phoneNumber: "+919876543210"),
-      ),
-    );
+  void initState() {
+    scrollController = ScrollController();
+    WidgetsBinding.instance?.addObserver(this);
+    super.initState();
   }
-}
 
-// ignore: must_be_immutable
-class VerifyPhoneNumberScreen extends StatelessWidget {
-  final String phoneNumber;
+  @override
+  void dispose() {
+    WidgetsBinding.instance?.removeObserver(this);
+    scrollController.dispose();
+    super.dispose();
+  }
 
-  String? _enteredOTP;
+  @override
+  void didChangeMetrics() {
+    final bottomViewInsets = WidgetsBinding.instance!.window.viewInsets.bottom;
+    isKeyboardVisible = bottomViewInsets > 0;
+  }
 
-  VerifyPhoneNumberScreen({
-    Key? key,
-    required this.phoneNumber,
-  }) : super(key: key);
+  // scroll to bottom of screen, when pin input field is in focus.
+  Future<void> _scrollToBottomOnKeyboardOpen() async {
+    while (!isKeyboardVisible) {
+      await Future.delayed(const Duration(milliseconds: 50));
+    }
+
+    await Future.delayed(const Duration(milliseconds: 250));
 
-  void _showSnackBar(BuildContext context, String text) {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(content: Text(text)),
+    await scrollController.animateTo(
+      scrollController.position.maxScrollExtent,
+      duration: const Duration(milliseconds: 250),
+      curve: Curves.easeIn,
     );
   }
 
   @override
   Widget build(BuildContext context) {
     return SafeArea(
       child: FirebasePhoneAuthHandler(
-        phoneNumber: phoneNumber,
-        timeOutDuration: const Duration(seconds: 60),
+        phoneNumber: widget.phoneNumber,
         onLoginSuccess: (userCredential, autoVerified) async {
-          _showSnackBar(
-            context,
-            'Phone number verified successfully!',
+          log(
+            VerifyPhoneNumberScreen.id,
+            msg: autoVerified
+                ? 'OTP was fetched automatically!'
+                : 'OTP was verified manually!',
           );
 
-          debugPrint(
-            autoVerified
-                ? "OTP was fetched automatically"
-                : "OTP was verified manually",
+          showSnackBar('Phone number verified successfully!');
+
+          log(
+            VerifyPhoneNumberScreen.id,
+            msg: 'Login Success UID: ${userCredential.user?.uid}',
           );
 
-          debugPrint("Login Success UID: ${userCredential.user?.uid}");
-        },
-        onLoginFailed: (authException) {
-          _showSnackBar(
+          Navigator.pushNamedAndRemoveUntil(
             context,
-            'Something went wrong (${authException.message})',
+            HomeScreen.id,
+            (route) => false,
           );
-
-          debugPrint(authException.message);
+        },
+        onLoginFailed: (authException) {
+          showSnackBar('Something went wrong!');
+          log(VerifyPhoneNumberScreen.id, error: authException.message);
           // handle error further if needed
         },
         builder: (context, controller) {
           return Scaffold(
             appBar: AppBar(
               leadingWidth: 0,
               leading: const SizedBox.shrink(),
-              title: const Text("Verify Phone Number"),
+              title: const Text('Verify Phone Number'),
               actions: [
                 if (controller.codeSent)
                   TextButton(
                     child: Text(
                       controller.timerIsActive
-                          ? "${controller.timerCount.inSeconds}s"
-                          : "RESEND",
-                      style: const TextStyle(
-                        color: Colors.blue,
-                        fontSize: 18,
-                      ),
+                          ? '${controller.timerCount.inSeconds}s'
+                          : 'Resend',
+                      style: const TextStyle(color: Colors.blue, fontSize: 18),
                     ),
                     onPressed: controller.timerIsActive
                         ? null
-                        : () async => await controller.sendOTP(),
+                        : () async {
+                            log(VerifyPhoneNumberScreen.id, msg: 'Resend OTP');
+                            await controller.sendOTP();
+                          },
                   ),
                 const SizedBox(width: 5),
               ],
             ),
             body: controller.codeSent
                 ? ListView(
                     padding: const EdgeInsets.all(20),
+                    controller: scrollController,
                     children: [
                       Text(
-                        "We've sent an SMS with a verification code to $phoneNumber",
-                        style: const TextStyle(
-                          fontSize: 25,
-                        ),
+                        "We've sent an SMS with a verification code to ${widget.phoneNumber}",
+                        style: const TextStyle(fontSize: 25),
                       ),
                       const SizedBox(height: 10),
                       const Divider(),
-                      AnimatedContainer(
-                        duration: const Duration(seconds: 1),
-                        height: controller.timerIsActive ? null : 0,
-                        child: Column(
+                      if (controller.timerIsActive)
+                        Column(
                           children: const [
-                            CircularProgressIndicator.adaptive(),
+                            CustomLoader(),
                             SizedBox(height: 50),
                             Text(
-                              "Listening for OTP",
+                              'Listening for OTP',
                               textAlign: TextAlign.center,
                               style: TextStyle(
                                 fontSize: 25,
                                 fontWeight: FontWeight.w600,
                               ),
                             ),
+                            SizedBox(height: 15),
                             Divider(),
-                            Text("OR", textAlign: TextAlign.center),
+                            Text('OR', textAlign: TextAlign.center),
                             Divider(),
                           ],
                         ),
-                      ),
+                      const SizedBox(height: 15),
                       const Text(
-                        "Enter OTP",
+                        'Enter OTP',
                         style: TextStyle(
                           fontSize: 20,
                           fontWeight: FontWeight.w600,
                         ),
                       ),
-                      TextField(
-                        maxLength: 6,
-                        keyboardType: TextInputType.number,
-                        onChanged: (String v) async {
-                          _enteredOTP = v;
-                          if (_enteredOTP?.length == 6) {
-                            final isValidOTP = await controller.verifyOTP(
-                              otp: _enteredOTP!,
-                            );
-                            // Incorrect OTP
-                            if (!isValidOTP) {
-                              _showSnackBar(
-                                context,
-                                "Please enter the correct OTP sent to $phoneNumber",
-                              );
-                            }
+                      const SizedBox(height: 15),
+                      PinInputField(
+                        length: 6,
+                        onFocusChange: (hasFocus) async {
+                          if (hasFocus) await _scrollToBottomOnKeyboardOpen();
+                        },
+                        onSubmit: (enteredOTP) async {
+                          final isValidOTP = await controller.verifyOTP(
+                            otp: enteredOTP,
+                          );
+                          // Incorrect OTP
+                          if (!isValidOTP) {
+                            showSnackBar('The entered OTP is invalid!');
                           }
                         },
                       ),
@@ -375,11 +396,11 @@ class VerifyPhoneNumberScreen extends StatelessWidget {
                     mainAxisAlignment: MainAxisAlignment.center,
                     crossAxisAlignment: CrossAxisAlignment.center,
                     children: const [
-                      CircularProgressIndicator.adaptive(),
+                      CustomLoader(),
                       SizedBox(height: 50),
                       Center(
                         child: Text(
-                          "Sending OTP",
+                          'Sending OTP',
                           style: TextStyle(fontSize: 25),
                         ),
                       ),
@@ -391,7 +412,6 @@ class VerifyPhoneNumberScreen extends StatelessWidget {
     );
   }
 }
-
 ```
 
 See the [`example`](https://github.com/rithik-dev/firebase_phone_auth_handler/blob/master/example) directory for a complete sample app.

example/.gitignore

@@ -0,0 +1,46 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.buildlog/
+.history
+.svn/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.packages
+.pub-cache/
+.pub/
+/build/
+
+# Web related
+lib/generated_plugin_registrant.dart
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release

example/.metadata

@@ -0,0 +1,10 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: 7e9793dee1b85a243edd0e06cb1658e98b077561
+  channel: stable
+
+project_type: app

example/README.md

@@ -0,0 +1,16 @@
+# phone_auth_handler_demo
+
+Demo for the package firebase_phone_auth_handler on pub.dev
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
+
+For help getting started with Flutter, view our
+[online documentation](https://flutter.dev/docs), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.

example/analysis_options.yaml

@@ -0,0 +1,29 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at
+  # https://dart-lang.github.io/linter/lints/index.html.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    prefer_single_quotes: true
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

example/android/.gitignore

@@ -0,0 +1,13 @@
+gradle-wrapper.jar
+/.gradle
+/captures/
+/gradlew
+/gradlew.bat
+/local.properties
+GeneratedPluginRegistrant.java
+
+# Remember to never publicly share your keystore.
+# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
+key.properties
+**/*.keystore
+**/*.jks