\nimport 'package:firebase_auth\/firebase_auth.dart';\nimport 'package:firebase_core\/firebase_core.dart';\nimport 'package:flutter\/material.dart';\nimport 'package:flutter_facebook_auth\/flutter_facebook_auth.dart';\n\nvoid main() {\n WidgetsFlutterBinding.ensureInitialized();\n runApp(App());\n}\n\nclass App extends StatefulWidget {\n \/\/ Create the initialization Future outside of `build`:\n @override\n _AppState createState() => _AppState();\n}\n\nclass _AppState extends State<App> {\n \/\/\/ The future is part of the state of our widget. We should not call `initializeApp`\n \/\/\/ directly inside [build].\n final Future<FirebaseApp> _initialization = Firebase.initializeApp();\n\n @override\n Widget build(BuildContext context) {\n return FutureBuilder(\n \/\/ Initialize FlutterFire:\n future: _initialization,\n builder: (context, snapshot) {\n \/\/ Check for errors\n if (snapshot.hasError) {\n print("err!");\n return Container();\n }\n\n \/\/ Once complete, show your application\n if (snapshot.connectionState == ConnectionState.done) {\n return MyApp();\n }\n\n \/\/ Otherwise, show something whilst waiting for initialization to complete\n return Container();\n },\n );\n }\n}\n\nclass MyApp extends StatelessWidget {\n \/\/ This widget is the root of your application.\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n title: 'FileIdea Facebook Login',\n theme: ThemeData(\n \/\/ This is the theme of your application.\n \/\/\n \/\/ Try running your application with "flutter run". You'll see the\n \/\/ application has a blue toolbar. Then, without quitting the app, try\n \/\/ changing the primarySwatch below to Colors.green and then invoke\n \/\/ "hot reload" (press "r" in the console where you ran "flutter run",\n \/\/ or simply save your changes to "hot reload" in a Flutter IDE).\n \/\/ Notice that the counter didn't reset back to zero; the application\n \/\/ is not restarted.\n primarySwatch: Colors.blue,\n ),\n home: MyHomePage(title: 'FileIdea Facebook Login'),\n );\n }\n}\n\nclass MyHomePage extends StatefulWidget {\n MyHomePage({Key? key, required this.title}) : super(key: key);\n\n final String title;\n\n @override\n _MyHomePageState createState() => _MyHomePageState();\n}\n\nclass _MyHomePageState extends State<MyHomePage> {\n int _counter = 0;\n final FirebaseAuth _auth = FirebaseAuth.instance;\n bool isloggedin = false;\n\n @override\n void initState() {\n super.initState();\n _auth.userChanges().listen((event) {\n print(event);\n updateStatus(event);\n });\n }\n\n updateStatus(event) {\n setState(() {\n isloggedin = event != null;\n });\n }\n\n Future<UserCredential> signInWithFacebook() async {\n \/\/ Trigger the sign-in flow\n final res = await FacebookAuth.instance.login();\n\n \/\/ Create a credential from the access token\n final facebookAuthCredential =\n FacebookAuthProvider.credential(res.accessToken!.token);\n\n \/\/ Once signed in, return the UserCredential\n return await FirebaseAuth.instance\n .signInWithCredential(facebookAuthCredential);\n }\n\n @override\n Widget build(BuildContext context) {\n if (!isloggedin) {\n return Scaffold(\n appBar: AppBar(\n \/\/ Here we take the value from the MyHomePage object that was created by\n \/\/ the App.build method, and use it to set our appbar title.\n title: Text(widget.title),\n ),\n body: Center(\n \/\/ Center is a layout widget. It takes a single child and positions it\n \/\/ in the middle of the parent.\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n Material(\n elevation: 5.0,\n borderRadius: BorderRadius.circular(30.0),\n color: Colors.blue,\n child: MaterialButton(\n minWidth: MediaQuery.of(context).size.width,\n padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),\n onPressed: () {\n signInWithFacebook();\n },\n child: Text("Login with Facebook",\n textAlign: TextAlign.center,\n style: TextStyle(\n color: Colors.white, fontWeight: FontWeight.bold)),\n ),\n ),\n ],\n ),\n ), \/\/ This trailing comma makes auto-formatting nicer for build methods.\n );\n } else {\n return Scaffold(\n appBar: AppBar(\n \/\/ Here we take the value from the MyHomePage object that was created by\n \/\/ the App.build method, and use it to set our appbar title.\n title: Text(widget.title),\n ),\n body: Center(\n \/\/ Center is a layout widget. It takes a single child and positions it\n \/\/ in the middle of the parent.\n child: Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: <Widget>[\n Container(\n child: Text("Home"),\n )\n ],\n ),\n ),\n );\n }\n }\n}\n\n<\/pre><\/div>\n\n\nI’ve highlighted the code I want to show to you that have importance to the login functionality. We store an boolean variable to keep track if the user is logged in or not which we later on use to display either the login button or the “Home” text. To set this variable, we are are listening to _auth.userChanges()<\/strong>, so whenever the state of the user changes, we run our update function to set the isloggedin to true or false if logged out. <\/p>\n\n\n\nNot logged in mode shows our login with facebook-button<\/figcaption><\/figure>\n\n\n\nFacebook page shows when clicking Login with Facebook<\/figcaption><\/figure>\n\n\n\nAnd now Home shows since we are logged in<\/p>\n\n\n\nWhen we are logged in we see the Home page. The terminal also prints our personal information from Facebook<\/figcaption><\/figure>\n\n\n\nNote that you might need to change minSdkVersion <\/strong>to 25 and add multidex<\/strong> if you have issues building.<\/p>\n","protected":false},"excerpt":{"rendered":"This going to be just a summary of what steps is needed to do to implement Facebook login to Flutter for Android, I’ll post my code I use as well so you can use that to login too. The official code I found on Firebase was even little bit outdated so it could come handy. … <\/p>\n
Continue reading “Add Facebook login to Flutter (Android) powered by Firebase”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6,59,18],"tags":[60,62,61],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/920"}],"collection":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/comments?post=920"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/920\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/06\/image-3.png\")
<\/figure>\n\n\n\n![\"Login](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/06\/image-4.png\")
![\"Log](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/06\/image-5.png\")
![\"Logged](\"https:\/\/fileidea.com\/wp-content\/uploads\/2021\/06\/image-6.png\")