How to directly execute login() method instead of overriding build method and returning a widget on AccountKit

Question

I am setting up AccountKit on a basic App Template that I have been working on. The example I have used is the one provided by the AccountKit Plugin for Flutter.

Now, this works fine till now.

What I do is, I use an OnTap on my login screen in order to take the user to Plugin's Example Implementation (account-kit.dart on my file).

onTap: () {
        Navigator.of(context).push(
//          MaterialPageRoute(builder: (context) => MessagesScreen()),
          MaterialPageRoute(builder: (context) => AccountKit()),
        );
      },

Then, inside the account-kit.dart page, there is a widget generated - which has a button that must be clicked in order to execute the Future<void> login() async{...} method.

This creates the issue, that my users now see an unnecessary screen between shifting from my login to flutter. Its like this:

1. My Login Screen
2. Example App's Login Screen
3. AccountKit's Login (necessary)
4. Back to Example App's Login Screen
5. Naviagtion to MessagesScreen()

This is a little clumsy, so I am looking forward to getting rid of Step 2 and Step 4 altogether.

So it will mean that I will click login button on LoginScreen(). Then be taken to accountkit.dart's login() method and that will execute, and it will directly take me to the MessagesScreen().

But, if I do not return anything on the Widget build(BuildContext context) {} and only execute login() inside that, I face errors.

So, what is the best approach to get rid of these unnecessary elements on this screen?

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: RaisedButton(
            padding: EdgeInsets.all(0.0),
            color: _state == 2 ? Colors.green : Colors.blue,
            elevation: 2.0,
            splashColor: Colors.blueGrey,
            child: buildButtonChild(),
            onPressed: _isInitialized ? this.login : null,
          ),
        ),
      ),
    );
  }

  Widget buildButtonChild() {
    if (_state == 0) {
      return Text(
        'Login',
        style: TextStyle(color: Colors.white, fontSize: 16.0),
      );
    } else if (_state == 1) {
      return SizedBox(
          height: 24.0,
          width: 24.0,
          child: CircularProgressIndicator(
            value: null,
            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
          ));
    } else {
      return Icon(Icons.check, color: Colors.white);
    }
  }

You may find the full code of the related three pages down at THIS GIT GIST.

The image below shows the unnecessary screens that are being loaded. I just want those to not appear (the 2nd and 3rd screen with the extra login button).

Answer 1

this is the function that initiate accountkit

Future<void> initAccountkit() async {
    print('Init account kit called');
    bool initialized = false;
    // Platform messages may fail, so we use a try/catch PlatformException.
    try {
      final theme = AccountKitTheme(
          headerBackgroundColor: Colors.green,
          buttonBackgroundColor: Colors.yellow,
          buttonBorderColor: Colors.yellow,
          buttonTextColor: Colors.black87);
      await akt.configure(Config()
        ..facebookNotificationsEnabled = true
        ..receiveSMS = true
        ..readPhoneStateEnabled = true
        ..theme = theme
        );
      initialized = true;
    } on PlatformException {
      print('Failed to initialize account kit');
    }

now in your on pressed for the login button call this function

  Future loginNow() async {
           //here you can call the function and handle the output(return value) as result
           initAccountkit().then((result) {
               // print(result);

                //call login function of accountKit below

          });
     }



 Future<void> login() async {
    if (_state == 1) {
      return;
    }
    setState(() {
      _state = 1;
    });
    final result = await akt.logInWithPhone();
    if (result.status == LoginStatus.cancelledByUser) {
      print('Login cancelled by user');
      setState(() {
        _state = 0;
      });
    } else if (result.status == LoginStatus.error) {
      print('Login error');
      setState(() {
        _state = 0;
      });
    } else {
      print('Login success');
      setState(() {
        _state = 2;
      });
    }
  }