{"id":828,"date":"2021-05-06T11:23:46","date_gmt":"2021-05-06T09:23:46","guid":{"rendered":"https:\/\/fileidea.com\/?p=828"},"modified":"2021-05-06T11:31:08","modified_gmt":"2021-05-06T09:31:08","slug":"flutter-firebase-authentication-example-showing-a-home-screen-if-logged-in","status":"publish","type":"post","link":"https:\/\/fileidea.com\/2021\/05\/06\/flutter-firebase-authentication-example-showing-a-home-screen-if-logged-in\/","title":{"rendered":"Flutter Firebase Authentication Example \u2014 showing a Home screen if logged in"},"content":{"rendered":"\n

This is a Flutter Firebase authentication example (using firebase_auth<\/a>) were we are showing a Home screen (widget) if logged in and another screen (widget) if logged out. The relevant important dart code for actually listening if the user is logged in or not can be found at the highlighted lines. I am using firebase_auth: ^1.1.3 (which is very different from versions before 0.18.0<\/strong>). Read the comments and replace the Widgets to what you think should be for a logged in user and the logged out user. Right now we are simply just loading a Home widget, and in it, we will display Widget that is for the logged in user, or if logged out, we will display a Widget that is for the logged out user (in this case, AuthTypeSelector).<\/p>\n\n\n

\nclass AuthExampleApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'FileIdea Example App',\n      theme: ThemeData.dark(),\n      home: Scaffold(\n        body: Home(),\n      ),\n    );\n  }\n}\n\nclass Home extends StatefulWidget {\n  Home({Key key}) : super(key: key);\n\n  @override\n  _HomeState createState() => _HomeState();\n}\n\nclass _HomeState extends State<Home> {\n  final FirebaseAuth _auth = FirebaseAuth.instance;\n  bool isloggedin = false;\n  @override\n  void initState() {\n    super.initState();\n    _auth.userChanges().listen((event) {\n      updateStatus(event); \/\/pass object\n    });\n  }\n\n  updateStatus(event) {\n    setState(() {\n      isloggedin = event != null; \/\/set variable true or false if logged in or not through set state \n      print("set!" + isloggedin.toString()); \/\/ print to log\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    if (isloggedin) {\n      return Scaffold(\n          appBar: AppBar(\n            title: const Text('FileIdea Example App'),\n          ),\n          \/\/ Define your widget(s) that is for the logged in user\n          body: Column(children: [\n            Container(child: Text("Welcome you are logged in!")),\n            TextButton(\n                onPressed: () => {_auth.signOut()}, child: Text("Logout"))\n          ]));\n    } else {\n      \/\/ Define your widget that is for the logged out user\n      print("not logged in");\n      return AuthTypeSelector();\n    }\n  }\n}\n<\/pre><\/div>\n\n\n
My pubspec.yaml file:<\/p>\n\n\n
\nenvironment:\n  sdk: ">=2.7.0 <3.0.0"\n\ndependencies:\n  flutter:\n    sdk: flutter\n  firebase_auth: ^1.1.3\n  cloud_firestore: ^2.0.0\n  firebase_core: "^1.0.4"\n  flutter_svg: ^0.22.0\n\n  # The following adds the Cupertino Icons font to your application.\n  # Use with the CupertinoIcons class for iOS style icons.\n  cupertino_icons: ^1.0.2\n  google_sign_in: ^5.0.2\n  flutter_signin_button: ^2.0.0\n\ndev_dependencies:\n  flutter_test:\n    sdk: flutter\n  change_app_package_name: ^1.0.0\n# For information on the generic Dart part of this file, see the\n# following page: https:\/\/dart.dev\/tools\/pub\/pubspec\n\n# The following section is specific to Flutter.\nflutter:\n\n  # The following line ensures that the Material Icons font is\n  # included with your application, so that you can use the icons in\n  # the material Icons class.\n  uses-material-design: true\n<\/pre><\/div>\n\n\n
Other helpful code can be found at FirebaseExtended<\/a> with more Flutter Firebase authentication examples, with various logins and register sample.<\/p>\n","protected":false},"excerpt":{"rendered":"
This is a Flutter Firebase authentication example (using firebase_auth) were we are showing a Home screen (widget) if logged in and another screen (widget) if logged out. The relevant important dart code for actually listening if the user is logged in or not can be found at the highlighted lines. I am using firebase_auth: ^1.1.3 … <\/p>\n
Continue reading “Flutter Firebase Authentication Example  \u2014 showing a Home screen if logged in”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,19],"tags":[52],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/828"}],"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=828"}],"version-history":[{"count":0,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/posts\/828\/revisions"}],"wp:attachment":[{"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/media?parent=828"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/categories?post=828"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fileidea.com\/wp-json\/wp\/v2\/tags?post=828"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}