Flutter Sign in, Sign Up, onboarding UI & Google Map auto Detect Location Full Address

Introduction

Welcome to this comprehensive tutorial on building a mobile application using Flutter. In this tutorial, we will be covering the following features:

1. Onboarding UI: We will create a beautiful onboarding UI that guides the user through the app's main features.
2. Sign In and Sign Up: We will implement a user authentication system using Firebase Authentication, allowing users to sign in and sign up for the app.
3. Google Map auto Detect Location: We will use the Google Maps widget in Flutter to display the user's current location on a map, and then auto-detect the address using the Google Maps Geocoding API.

Prerequisites

Before starting this tutorial, make sure you have the following:

• Flutter installed on your machine
• A Firebase project set up with Authentication enabled
• A Google Cloud Platform project set up with the Google Maps Geocoding API enabled

Step 1: Setting up the Project

Create a new Flutter project using the command flutter create my_app. Then, open the project in your preferred code editor and add the following dependencies to the pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.0
  firebase_auth: ^3.1.0
  google_maps_flutter: ^2.1.1
  geolocator: ^8.0.5

Step 2: Onboarding UI

Create a new file called onboarding_screen.dart and add the following code:

import 'package:flutter/material.dart';

class OnboardingScreen extends StatefulWidget {
  @override
  _OnboardingScreenState createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  List<Widget> _pages = [
    _Page1(),
    _Page2(),
    _Page3(),
  ];

  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentPage],
      bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          _currentPage > 0
             ? GestureDetector(
                  onTap: () {
                    setState(() {
                      _currentPage -= 1;
                    });
                  },
                  child: Icon(Icons.arrow_back_ios),
                )
              : Container(),
          _currentPage < _pages.length - 1
             ? GestureDetector(
                  onTap: () {
                    setState(() {
                      _currentPage += 1;
                    });
                  },
                  child: Icon(Icons.arrow_forward_ios),
                )
              : Container(),
        ],
      ),
    );
  }
}

class _Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Page 1'),
        ElevatedButton(
          onPressed: () {
            // Move to next page
          },
          child: Text('Next'),
        ),
      ],
    );
  }
}

class _Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Page 2'),
        ElevatedButton(
          onPressed: () {
            // Move to next page
          },
          child: Text('Next'),
        ),
      ],
    );
  }
}

class _Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Page 3'),
        ElevatedButton(
          onPressed: () {
            // Move to login screen
          },
          child: Text('Login'),
        ),
      ],
    );
  }
}

This code creates an onboarding screen with three pages. Each page contains a text and a button. The button navigates to the next page. The last page contains a button that navigates to the login screen.

Step 3: Sign In and Sign Up

Create a new file called login_screen.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter your email';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter your password';
                  }
                  return null;
                },
              ),
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState.validate()) {
                    _formKey.currentState.save();
                    try {
                      await FirebaseAuth.instance
                         .signInWithEmailAndPassword(
                              email: _emailController.text,
                              password: _passwordController.text);
                    } catch (e) {
                      print(e);
                    }
                  }
                },
                child: Text('Login'),
              ),
              TextButton(
                onPressed: () {
                  // Sign up
                },
                child: Text('Sign up'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This code creates a login screen with a form that contains two text fields for the email and password, and two buttons. The first button logs in the user using Firebase Authentication, and the second button navigates to the sign up screen.

Step 4: Google Map auto Detect Location

Create a new file called map_screen.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController _mapController;
  Position _position;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map'),
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          _mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: LatLng(0, 0),
          zoom: 12.0,
        ),
        onLocationChanged: (Position position) {
          setState(() {
            _position = position;
          });
        },
      ),
      floatingActionButton: _position!= null
         ? FloatingActionButton(
              onPressed: () {
                _position = null;
              },
              child: Icon(Icons.close),
            )
          : null,
    );
  }
}

This code creates a map screen that displays the user's current location using the Geolocator package and the Google Maps widget. When the user's location changes, the map screen updates to display the new location.

Step 5: Integrating Sign In and Sign Up with Map Screen

Create a new file called main.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:my_app/login_screen.dart';
import 'package:my_app/map_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: OnboardingScreen(),
    );
  }
}

This code creates a new app that starts with the onboarding screen. When the user completes the onboarding screen, the app navigates to the login screen. When the user logs in, the app navigates to the map screen.

That's it! You have now completed the tutorial on building a mobile application using Flutter with Onboarding UI, Sign In and Sign Up, and Google Map auto Detect Location.