{"id":17940,"date":"2020-08-31T09:59:10","date_gmt":"2020-08-31T09:59:10","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17940"},"modified":"2020-08-31T09:59:12","modified_gmt":"2020-08-31T09:59:12","slug":"integrating-facebook-login-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/integrating-facebook-login-in-flutter\/","title":{"rendered":"Integrating Facebook Login In Flutter."},"content":{"rendered":"\n<p>Hello Guys, Today I&#8217;ll guide you through setting up Facebook authentication on your Flutter app and fetching relevant data using Facebook&#8217;s Graph API.<\/p>\n\n\n\n<p id=\"c9bb\">We\u2019ll be using the following package for the login implementation:<\/p>\n\n\n\n<p><strong>Step 1:\u00a0<\/strong>Add the following dependency in your\u00a0<code>pubspec.yaml<\/code>\u00a0file<strong>.\u00a0<\/strong>Do make sure that you use the latest version of the package.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-rounded\"><img loading=\"lazy\" decoding=\"async\" width=\"376\" height=\"222\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image-99.png\" alt=\"pubsec.yml\n\" class=\"wp-image-17942\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image-99.png 376w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image-99-300x177.png 300w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/figure>\n\n\n\n<p><strong>Step 2:<\/strong>\u00a0Go this link given below and follow all the steps. <\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><a href=\"https:\/\/developers.facebook.com\/apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developers.facebook.com\/<\/a><\/p>\n<\/div><\/div>\n\n\n\n<p><strong>Step 3:<\/strong> Now go to root directory of your aap and create a new file under <em>android > app > src > main > res > values<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"346\" height=\"359\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image-100.png\" alt=\"strings.xml\" class=\"wp-image-17943\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image-100.png 346w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image-100-289x300.png 289w\" sizes=\"auto, (max-width: 346px) 100vw, 346px\" \/><\/figure>\n\n\n\n<p><strong>Step 4:<\/strong>\u00a0Import the following package in your\u00a0<code>main.dart<\/code>\u00a0file: or where ever you want to Integrate the Facebook login.<\/p>\n\n\n\n<p><strong><strong>Step 5:\u00a0<\/strong><\/strong>Create a new method that handles Facebook login:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/pradeeprjth\/09e675e7ced708c4f5740669087e95ea.js\"><\/script>\n\n\n\n<p><strong>Step 6:\u00a0<\/strong>The\u00a0<code>onLoginStatusChanged(...)<\/code>\u00a0method is just used to update the UI using\u00a0<code>setState()<\/code>\u00a0when the user logs in successfully:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/pradeeprjth\/ed6e2246081bb7f8ee76d647978b9845.js\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/rnySk-576x1024.png\" alt=\"\" class=\"wp-image-17944\" width=\"270\" height=\"480\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/rnySk-576x1024.png 576w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/rnySk-169x300.png 169w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/rnySk-768x1365.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/rnySk-864x1536.png 864w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/rnySk.png 1080w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/figure>\n\n\n\n<p>That&#8217;s it .<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Guys, Today I&#8217;ll guide you through setting up Facebook authentication on your Flutter app and fetching relevant data using Facebook&#8217;s Graph API. We\u2019ll be using the following package for&#8230; <\/p>\n","protected":false},"author":14,"featured_media":17944,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[6331],"tags":[6110,6203,6340],"class_list":["post-17940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter","tag-facebook-login","tag-flutter","tag-material-dart"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17940"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17940\/revisions"}],"predecessor-version":[{"id":17945,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17940\/revisions\/17945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/17944"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}