Adding Location and Device Type Features in Flutter Apps with VisitorAPI

If you’re a Flutter developer looking to make your apps smarter by incorporating user location and device type without diving deep into native code, VisitorAPI is a straightforward solution. This service gives you access to important user data with just a simple API call. This guide is focused on how you can use VisitorAPI in your Flutter projects to fetch and use user data for a more customized app experience.

Understanding VisitorAPI

VisitorAPI provides detailed information about your app users, like where they’re located and what device they’re using. This can be pretty useful for tailoring app content, improving security, or even just understanding your user base better.

How to Use VisitorAPI in Flutter

Let’s walk through how to integrate VisitorAPI into a Flutter app. We’ll start by adding a package, fetching data from VisitorAPI, and then using this data in our app.
Step 1: Add the HTTP Package

First, you’ll need to make HTTP requests. Add the http package to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Don’t forget to run flutter pub get to install it.

Step 2: Fetch Data from VisitorAPI

Next, you’ll want to fetch data from VisitorAPI. Import the http package and JSON decoder in your Dart file:

import 'package:http/http.dart' as http;
import 'dart:convert'; // For JSON

Then, make a function to fetch the data. Remember to replace ‘my-key’ with your actual VisitorAPI project ID:

Future<void> fetchVisitorInfo() async {
  String url = 'https://api.visitorapi.com/api/?pid=my-key';
  final response = await http.get(Uri.parse(url));
  final String responseString = response.body;
  Map<String, dynamic> data = jsonDecode(responseString)["data"];
  // 'data' now has the user's location and device info
}

Step 3: Show the Data in Your App

Now, use the fetched data to customize your app’s UI. Here’s a basic example to display user info:

class VisitorInfoScreen extends StatefulWidget {
  @override
  _VisitorInfoScreenState createState() => _VisitorInfoScreenState();
}

class _VisitorInfoScreenState extends State<VisitorInfoScreen> {
  Map<String, dynamic> userInfo = {};

  @override
  void initState() {
    super.initState();
    fetchVisitorInfo().then((data) {
      setState(() {
        userInfo = data;
      });
    }).catchError((error) {
      print("Error fetching visitor data: $error");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Info')),
      body: Center(
        child: userInfo.isNotEmpty
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Location: ${userInfo["location"]["city"]}, ${userInfo["location"]["country"]}'),
                  Text('Device: ${userInfo["device"]["type"]}'),
                ],
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}

Wrapping Up

VisitorAPI offers a simple way to get valuable user data for your Flutter apps, helping you create a more personalized and engaging user experience without needing to deal with complex platform-specific code. By following these steps, you’ll be able to start incorporating real-world user data into your apps in no time. Happy coding!