Bird
Raised Fist0
Fluttermobile~20 mins

Location and GPS in Flutter - Mini App: Build & Ship

Choose your learning style10 modes available
Build: Current Location Screen
This screen shows the user's current GPS location with latitude and longitude. It has a button to fetch the location and display it on the screen.
Target UI
-------------------------
|   Current Location    |
|-----------------------|
|                       |
|  Latitude:            |
|  Longitude:           |
|                       |
|  [Get Current Location]|
-------------------------
Display latitude and longitude as text on the screen.
Add a button labeled 'Get Current Location'.
When the button is pressed, fetch the current GPS location.
Show a loading indicator while fetching location.
Handle permission requests for location access.
Show an error message if location cannot be fetched.
Starter Code
Flutter
import 'package:flutter/material.dart';

class CurrentLocationScreen extends StatefulWidget {
  @override
  State<CurrentLocationScreen> createState() => _CurrentLocationScreenState();
}

class _CurrentLocationScreenState extends State<CurrentLocationScreen> {
  String latitude = '';
  String longitude = '';
  bool isLoading = false;
  String error = '';

  // TODO: Add method to get current location

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Current Location')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Latitude: $latitude'),
            SizedBox(height: 8),
            Text('Longitude: $longitude'),
            SizedBox(height: 16),
            if (isLoading) CircularProgressIndicator(),
            if (error.isNotEmpty) Text(error, style: TextStyle(color: Colors.red)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // TODO: Call method to get location
              },
              child: Text('Get Current Location'),
            ),
          ],
        ),
      ),
    );
  }
}
Task 1
Task 2
Task 3
Task 4
Task 5
Solution
Flutter
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

class CurrentLocationScreen extends StatefulWidget {
  @override
  State<CurrentLocationScreen> createState() => _CurrentLocationScreenState();
}

class _CurrentLocationScreenState extends State<CurrentLocationScreen> {
  String latitude = '';
  String longitude = '';
  bool isLoading = false;
  String error = '';

  Future<void> _getCurrentLocation() async {
    setState(() {
      isLoading = true;
      error = '';
    });

    bool serviceEnabled;
    LocationPermission permission;

    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      setState(() {
        error = 'Location services are disabled.';
        isLoading = false;
      });
      return;
    }

    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        setState(() {
          error = 'Location permission denied.';
          isLoading = false;
        });
        return;
      }
    }

    if (permission == LocationPermission.deniedForever) {
      setState(() {
        error = 'Location permissions are permanently denied.';
        isLoading = false;
      });
      return;
    }

    try {
      Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
      setState(() {
        latitude = position.latitude.toStringAsFixed(6);
        longitude = position.longitude.toStringAsFixed(6);
        isLoading = false;
      });
    } catch (e) {
      setState(() {
        error = 'Failed to get location: $e';
        isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Current Location')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Latitude: $latitude'),
            SizedBox(height: 8),
            Text('Longitude: $longitude'),
            SizedBox(height: 16),
            if (isLoading) CircularProgressIndicator(),
            if (error.isNotEmpty) Text(error, style: TextStyle(color: Colors.red)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: isLoading ? null : _getCurrentLocation,
              child: Text('Get Current Location'),
            ),
          ],
        ),
      ),
    );
  }
}

This solution uses the geolocator package to get the device's current GPS location.

First, it checks if location services are enabled. Then it requests permission if not already granted. If permission is denied or permanently denied, it shows an error message.

When permission is granted, it fetches the current position with high accuracy. The latitude and longitude are updated in the state and shown on the screen.

A loading spinner appears while fetching the location, and the button is disabled to prevent multiple requests.

If any error occurs, it is displayed in red text below the coordinates.

Final Result
Completed Screen
-------------------------
|   Current Location    |
|-----------------------|
|                       |
|  Latitude: 37.421998  |
|  Longitude: -122.0840 |
|                       |
|     [Loading...]      |
|                       |
|  [Get Current Location]|
-------------------------
User taps 'Get Current Location' button.
A loading spinner appears while the app fetches location.
After fetching, latitude and longitude numbers appear.
If location services are off or permission denied, an error message shows.
Stretch Goal
Add a map view below the coordinates that shows a marker at the current location.
💡 Hint
Use the 'google_maps_flutter' package to embed a map widget and update its camera position with the fetched coordinates.

Practice

(1/5)
1.

What is the main purpose of using the location feature in a Flutter app?

easy
A. To send text messages automatically
B. To change the device's screen brightness
C. To play music in the background
D. To find the device's current position on the map

Solution

  1. Step 1: Understand location feature usage

    The location feature is used to get the device's position on Earth.
  2. Step 2: Compare options with location purpose

    Only To find the device's current position on the map relates to finding the device's position, others are unrelated.
  3. Final Answer:

    To find the device's current position on the map -> Option D
  4. Quick Check:

    Location feature = Find position [OK]
Hint: Location means device position, not unrelated tasks [OK]
Common Mistakes:
  • Confusing location with other device features
  • Thinking location controls device settings
  • Assuming location sends messages or plays music
2.

Which of the following is the correct way to request location permission in Flutter using the permission_handler package?

final status = await Permission.location.____();
easy
A. ask
B. request
C. get
D. allow

Solution

  1. Step 1: Recall permission_handler syntax

    The package uses request() to ask for permission.
  2. Step 2: Match method to code snippet

    Only request fits the method call to request permission.
  3. Final Answer:

    request -> Option B
  4. Quick Check:

    Permission request method = request() [OK]
Hint: Permission requests use request(), not ask or get [OK]
Common Mistakes:
  • Using ask() instead of request()
  • Confusing get() with permission request
  • Using allow() which is not a method
3.

What will the following Flutter code print if the device's location is successfully fetched?

var location = await Geolocator.getCurrentPosition();
print('Lat: ${location.latitude}, Lon: ${location.longitude}');
medium
A. Lat: [some number], Lon: [some number]
B. Lat: 0.0, Lon: 0.0
C. SyntaxError
D. Lat: null, Lon: null

Solution

  1. Step 1: Understand getCurrentPosition()

    This method returns the device's current latitude and longitude as numbers.
  2. Step 2: Analyze print output

    The print statement outputs the latitude and longitude values, which are numbers, not null or zero by default.
  3. Final Answer:

    Lat: [some number], Lon: [some number] -> Option A
  4. Quick Check:

    getCurrentPosition() returns coordinates [OK]
Hint: getCurrentPosition() returns actual coordinates, not null [OK]
Common Mistakes:
  • Assuming coordinates are zero or null by default
  • Expecting syntax error from correct code
  • Confusing method with one that returns null
4.

Identify the error in this Flutter code snippet that tries to get location updates:

StreamSubscription positionStream = Geolocator.getPositionStream().listen((Position position) {
  print(position.latitude);
});

positionStream.cancel();
medium
A. Missing permission check before listening to location stream
B. Using listen instead of subscribe
C. Calling cancel() immediately stops the stream
D. Position type should be String, not Position

Solution

  1. Step 1: Check permission handling

    The code does not check or request location permission before starting the stream.
  2. Step 2: Review other options

    Using listen is correct; cancel() is valid but should be called later; Position type is correct.
  3. Final Answer:

    Missing permission check before listening to location stream -> Option A
  4. Quick Check:

    Permission check required before location stream [OK]
Hint: Always check permission before accessing location stream [OK]
Common Mistakes:
  • Skipping permission request before location access
  • Confusing listen() with subscribe()
  • Calling cancel() too early without reason
  • Wrong type for position parameter
5.

You want your Flutter app to continuously track the user's location but only update the UI when the user moves more than 50 meters. Which approach is best?

hard
A. Use getCurrentPosition() repeatedly every second
B. Use getPositionStream() without filters and update UI every time
C. Use getPositionStream(distanceFilter: 50) to listen for updates
D. Use getLastKnownPosition() to get location once

Solution

  1. Step 1: Understand continuous tracking with filtering

    The getPositionStream() method can listen for location changes and supports a distanceFilter to limit updates.
  2. Step 2: Compare options for efficiency

    Use getPositionStream(distanceFilter: 50) to listen for updates uses distanceFilter: 50 to update only when user moves 50 meters, saving resources and avoiding UI overload.
  3. Step 3: Eliminate other options

    Use getCurrentPosition() repeatedly every second is inefficient; C updates too often; D only gets location once.
  4. Final Answer:

    Use getPositionStream(distanceFilter: 50) to listen for updates -> Option C
  5. Quick Check:

    Use stream with distanceFilter for efficient updates [OK]
Hint: Use distanceFilter in stream to limit location updates [OK]
Common Mistakes:
  • Polling location repeatedly instead of streaming
  • Updating UI on every small location change
  • Using getLastKnownPosition for continuous tracking
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard