FlutterFlow and AfterShip integration: Step-by-Step Guide 2024

    Integrating FlutterFlow with AfterShip can enhance your application by providing shipment tracking functionalities. Below is a detailed step-by-step guide to help you through the process.    

• Visit AfterShip and create an account if you haven't already.
• Log in to your AfterShip account.
• Navigate to the AfterShip dashboard.

   

• Go to Apps -> API from the sidebar.
• Click on Generate API Key.
• Give your API key a recognizable name and set the appropriate permissions.
• Copy the generated API key. You will need this key to authenticate your FlutterFlow application with AfterShip.

   

• Log in to your FlutterFlow account at FlutterFlow.
• Click on Create New Project or select an existing project you want to integrate with AfterShip.
• Name your project and select the template that best suits your needs.

   

• Navigate to Project Settings in FlutterFlow.
• Under the Pubspec.yaml section, add the AfterShip package dependency. You can add AfterShip’s Dart SDK if it exists, or use the HTTP package for making API calls.

Example:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Note: Click on Save to update your dependencies.    

• Open your FlutterFlow project's Code Editor.
• Create a new Dart file (aftership\_service.dart) and add the following code to handle AfterShip API requests:

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

class AfterShipService {
  static const String apiKey = 'YOUR_AFTERSHIP_API\_KEY';
  static const String endpoint = 'https://api.aftership.com/v4';

  static Future<Map<String, dynamic>> getTrackingInfo(String slug, String trackingNumber) async {
    final response = await http.get(
      Uri.parse('$endpoint/trackings/$slug/$trackingNumber'),
      headers: {
        'aftership-api-key': apiKey,
        'Content-Type': 'application/json',
      },
    );

    if (response.statusCode == 200) {
      return jsonDecode(response.body);
    } else {
      throw Exception('Failed to load tracking info');
    }
  }
}

Note: Replace YOUR_AFTERSHIP_API\_KEY with the API key you previously obtained from AfterShip.    

• In the FlutterFlow UI Builder, drag and drop widgets to construct the user interface for tracking shipments. Consider utilizing TextFormField for input fields (e.g., Courier Slug, Tracking Number) and Buttons to trigger the tracking request.

   

• In the code editor, create a new Dart file (tracking\_screen.dart) or use an existing widget.
• Import the AfterShipService and use it in your StatefulWidget:

import 'package:flutter/material.dart';
'aftership\_service.dart';

class TrackingScreen extends StatefulWidget {
  @override
  _TrackingScreenState createState() => _TrackingScreenState();
}

class \_TrackingScreenState extends State {
  final \_slugController = TextEditingController();
  final \_trackingNumberController = TextEditingController();
  Map<String, dynamic> \_trackingInfo;

  Future<void> \_fetchTrackingInfo() async {
    try {
      final data = await AfterShipService.getTrackingInfo(
        \_slugController.text,
        \_trackingNumberController.text,
      );
      setState(() {
        \_trackingInfo = data;
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Error: ${e.toString()}'),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Track Shipment')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: \_slugController,
              decoration: InputDecoration(labelText: 'Courier Slug'),
            ),
            TextField(
              controller: \_trackingNumberController,
              decoration: InputDecoration(labelText: 'Tracking Number'),
            ),
            ElevatedButton(
              onPressed: \_fetchTrackingInfo,
              child: Text('Get Tracking Info'),
            ),
            \_trackingInfo != null
                ? Expanded(child: Text(\_trackingInfo.toString()))
                : Container(),
          ],
        ),
      ),
    );
  }
}

Note: This code captures input for courier slug and tracking number, then calls the AfterShip API and displays the results.    

• Run your FlutterFlow project on an emulator or physical device.
• Navigate to the tracking screen you created.
• Enter a courier slug and tracking number, then tap "Get Tracking Info".
• Verify that the shipment tracking information is fetched and displayed correctly.

   

• Once you have tested and confirmed the integration works seamlessly, you can proceed to build and deploy your FlutterFlow project.
• Deploy your application to the appropriate platforms (iOS, Android, Web). Follow the deployment documentation provided by FlutterFlow.

   

• Ensure you handle API errors gracefully and provide user-friendly error messages.
• Keep your AfterShip API Key secure and do not hardcode it directly in the code if the code is open to the public.
• Consider adding more functionalities like tracking history, notifications on status updates, etc., to enhance the user experience.

By following these steps, you should have successfully integrated FlutterFlow with AfterShip, providing shipment tracking capabilities in your application. For more advanced features and customization, refer to AfterShip’s API documentation and FlutterFlow’s extensive guides and resources.