Flutter & Dart. Google Sign In.

Mobile App Development A-Z Guide

Give us a message if you’re interested in Blockchain and FinTech software development or just say Hi at Pharos Production Inc.

Or follow us on Youtube to know more about Software Architecture, Distributed Systems, Blockchain, High-load Systems, Microservices, and Enterprise Design Patterns.

Pharos Production Youtube channel

Today, almost every user has an account on social networks as well as Gmail. In my previous article, I described in detail how to register in the application using Facebook. But even if the user does not have a Facebook account, then surely there is a profile in Google. Let’s take the same look at how a user can register in the application using Gmail;

Step 1.

As always first, you need to add the necessary dependencies to pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  rxdart: ^0.19.0
  google_sign_in: ^4.0.1+1

Step 2.

Your application must be registered. It is necessary to follow this link.

It is necessary to register the application, with the important attributes being the application package as well as the SHA-1 certificate.

To get a fingerprint of SHA1, you need to re-open the Android platform in AndroidStudio separately, in which you need to open the gradle tab and call the signingReport.

Gradle.

SHA certificate fingerprint.

Step 3.

Create a LoginBloc class in which we initialize GoogleSignIn object. And further in the method _googleSignIn we make the request and the result of the request will be sent to the stream controller. Accordingly, to log out it is used the method signOutGoogle.

class LoginBloc {
  final GoogleSignIn _googleSignIn = GoogleSignIn(scopes: ['email','https://www.googleapis.com/auth/contacts.readonly']);
  // StreamController
  final BehaviorSubject<GoogleSignInAccount> _google = BehaviorSubject<GoogleSignInAccount>();
  // Streams
  Stream<GoogleSignInAccount> get googleAccount => _google.stream;
  sigInGoogle() async {
    _googleSignIn.signIn().then((GoogleSignInAccount account) {
      _google.sink.add(account);
    });
  }
  signOutGoogle() async {
    _googleSignIn.signOut().then(_google.sink.add);
  }
  dispose() {
    _google.close();
  }
}

Step 4.

According to the classical scheme — to use StatelessWidget and to have access to LoginBloc, you need to create a LoginProvider:

class LoginProvider extends InheritedWidget {
  final LoginBloc bloc;

  LoginProvider({Key key, Widget child})
      : bloc = LoginBloc(),
        super(key: key, child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => true;

  static LoginBloc of(BuildContext context) {
    return (context.inheritFromWidgetOfExactType(LoginProvider) as LoginProvider).bloc;
  }
}

Then when you start the application in the main method, we use LoginProvider:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LoginProvider(
      child: MaterialApp(
        title: 'Login App',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginPage(),
      ),
    );
  }
}

Step 5.

On the main screen, display two buttons and a widget. As a widget that will display information about the user profile, we use StreamBuilder, which will listen for information from LoginBloc:

Widget _buildUserInfo(LoginBloc bloc) {
  return StreamBuilder(
    stream: bloc.googleAccount,
    builder: (BuildContext context, AsyncSnapshot<GoogleSignInAccount> snapshot) {
      if (!snapshot.hasData) {
        return Container(
          child: Text('No info!!!'),
        );
      }

      return Column(
        children: <Widget>[
          Row(
            children: <Widget>[Text('Name: '), Text(snapshot.data.displayName.toString())],
          ),
          Row(
            children: <Widget>[Text('Email: '), Text(snapshot.data.email)],
          ),
          Row(
            children: <Widget>[Text('Id: '), Text(snapshot.data.id)],
          ),
          Image.network(
            snapshot.data.photoUrl.toString(),
            width: 200.0,
            height: 200.0,
          ),
        ],
      );
    },
  );
}

An example of the layout of the main screen and the entire application you can find on the link below:

PharosProduction/tutorial-flutter-google-login

Thanks for reading!