For the app integrate the flutter_appavailability

[fredfalcon]

To integrate the flutter_appavailability package into your app, you can follow these steps:

1. Add the flutter_appavailability package to your project by adding the following line to your pubspec.yaml file:

dependencies:
  flutter_appavailability: ^0.5.2+1

1. Import the package in your Dart file where you want to use it:

import 'package:flutter_appavailability/flutter_appavailability.dart';

1. Use the getInstalledApps() method to get a list of installed apps on the device:

List<Application> installedApps = [];

void getInstalledApps() async {
  List<Application> apps = await AppAvailability.getInstalledApps();
  setState(() {
    installedApps = apps;
  });
}

In this example, we're using the getInstalledApps() method from the flutter_appavailability package to get a list of all installed apps on the device. The getInstalledApps() method returns a List<Application> object containing information about each installed app, such as the app name, package name, and icon.

1. Display the list of installed apps in your app's UI.

ListView.builder(
  itemCount: installedApps.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: MemoryImage(installedApps[index].icon),
      ),
      title: Text(installedApps[index].appName),
      subtitle: Text(installedApps[index].packageName),
    );
  },
)

In this example, we're using a ListView.builder widget to display the list of installed apps in a scrollable list. Each app is displayed as a ListTile widget, with the app icon, name, and package name shown.

1. Use the installed app list when reporting an issue. You can use the installed app list to provide additional information when reporting an issue in your app. For example, you could ask the user to select the app they were using when the issue occurred, and include this information in the bug report. Note that the getInstalledApps() method can take a long time to complete on devices with many installed apps, so you should consider using a loading indicator while the list is being fetched.

[justary27]

@fredfalcon What's this issue about? Show installed apps in our app?

[WaniAthar]

i can do this please assign this issue to me

[justary27]

Done. @WaniAthar

[WaniAthar]

the package you mentioned(flutter_appavailability) uses a deprecated version of the Android embedding and the last update to this package was 4 years ago... should i use some alternative or i have to use this package only, i we use this unmaintained package, "consider removing it since a future release of Flutter will remove these deprecated APIs." this warning appeared while running the app

[WaniAthar]

do i have to only show the installed apps on a new screen?

[WaniAthar]

whenever i run the app it gets stuck on Got dependencies! Launching lib\main.dart on 2201116PI in debug mode... Running Gradle task 'assembleDebug'...

i am using flutter 3

[WaniAthar]

can i create a new project and copy all the files to the new project?

[WaniAthar]

If you think that will help, sure. I think you could just talk it out with ChatGPT too and solve it faster.

ok ill try to fix this

[WaniAthar]

what should be stored in the _titleController.text the appname or the package name

[WaniAthar]

when a certain app is tapped from the listBuilder its name gets stored in _titleController's text field or I can change it to "app_name (com.example.app)" The "bug hunt" screen has the same issue, one has to type the app name I will fix that too is there anything to do about this issue? i am seeing a bug in "Bug hunt " screen with the prize money slider, it shifts to right when we slide to the right and shifts to the left when we slide back to initial position,

[WaniAthar]

hidden field?

[WaniAthar]

what should be stored in the _titleController.text the appname or the package name

in these images the app list have their package ids too, shall i hide them or it is fine?

[WaniAthar]

shall i make a pr now

[WaniAthar]

one thing to mention is that the package(device_apps) used for retrieving the app metadata (icon, name, and packageId ) is only available for Android right now, I have put a condition in the code that if the platform is android then show the app list

[WaniAthar]

it is a dropdown

[WaniAthar]

working on it sorry for being late

[WaniAthar]

i have added the auto complete functionality to both the screens,(report and the Bug hunt) please review the PR

https://user-images.githubusercontent.com/83573286/227033398-b421f093-cd6d-47c1-9433-b07d0126f954.mp4

[WaniAthar]

did you review the PR, please let me know if there is something more to add or change.

[WaniAthar]

Hello @fredfalcon @just-ary27 i noticed a bug in the slider in bug hunt screen, did you notice? When we slide from end to end, the whole slider mover to and fro, i guess it is because not fixed size of the price money widget, Can u open an issue regarding that.

[WaniAthar]

/assign

[github-actions[bot]]

You are already assigned to another open issue, please wait until until it's closed or remove your assignment to get assigned to this issue.

[WaniAthar]

@fredfalcon @just-ary27 please review the PR so that i can solve other issues

[WaniAthar]

/assign

[DonnieBLT]

It looks like this didn't make it in to the code, it's still a useful feature.

[DonnieBLT]

@coderabbitai please code this flutter feature for the BLT-Flutter repo

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

🧩 Analysis chain

I'll analyze the BLT-Flutter repository structure to understand where to implement the app availability feature for listing installed apps when reporting bugs. Let me explore the codebase first.

---

🏁 Script executed:

#!/bin/bash
# Clone the BLT-Flutter repository and explore its structure
git clone https://github.com/OWASP-BLT/BLT-Flutter.git
cd BLT-Flutter
# Check the project structure
ls -la
# Check pubspec.yaml to see current dependencies
cat pubspec.yaml
# Look for lib directory structure
ls -la lib
# Look for report and bug hunt screens
fd -t f -e dart "report|bug.*hunt" lib

Length of output: 3516

---

Let me examine the key files to understand how they're currently implemented before adding the app availability feature. I'll check both the report bug screen and bug hunt screen to see how they handle app input.

---

🏁 Script executed:

#!/bin/bash
# Look at the report_bug.dart file to understand the current implementation
cat lib/src/pages/home/report_bug.dart

# Check the bug hunt page that needs modification
cat lib/src/pages/bug_hunt_desc_page.dart

# Check if there are any existing autocomplete implementations in the codebase
fd autocomplete lib

Length of output: 334

---

I need to navigate to the correct directory and find the relevant files first. Let me fix the script and get a better understanding of the codebase structure.

---

🏁 Script executed:

#!/bin/bash
# Navigate to the BLT-Flutter directory 
cd BLT-Flutter

# Get the current directory to verify where we are
pwd

# List the lib/src directory content to find the correct paths
ls -la lib/src

# Find files related to reporting bugs or bug hunts
find lib/src -type f -name "*.dart" | grep -E "report|bug.*hunt"

# Let's check the content of these files
for file in $(find lib/src -type f -name "*.dart" | grep -E "report|bug.*hunt"); do
  echo "============================"
  echo "File: $file"
  echo "============================"
  cat "$file"
  echo ""
  echo ""
done

# Check if there are any existing autocomplete implementations in the codebase
find lib -type f -name "*.dart" | xargs grep -l "autocomplete" 2>/dev/null || echo "No autocomplete found"

Length of output: 89076

---

🏁 Script executed:

#!/bin/bash
# Navigate to the BLT-Flutter directory 
cd BLT-Flutter

# Check existing pubspec.yaml file to see if we need to add the device_apps package
cat pubspec.yaml

# Search for any existing autocomplete widgets in the codebase
find lib -type f -name "*.dart" | xargs grep -l "Autocomplete" 2>/dev/null || echo "No Autocomplete found"

# Check if device_apps is already used somewhere in the codebase
find lib -type f -name "*.dart" | xargs grep -l "device_apps" 2>/dev/null || echo "No device_apps found"

# Let's also check for other packages that might help with app information
find lib -type f -name "*.dart" | xargs grep -l "installed.*app" 2>/dev/null || echo "No installations app references found"

Length of output: 1687

---

@DonnieBLT I'll implement the Flutter feature to display installed apps in an autocomplete field when reporting bugs. Based on the requirements, I'll:

1. Add a modern package for retrieving installed apps (device_apps was mentioned but is deprecated)
2. Create an autocomplete widget for the URL field in the bug report screen
3. Store both the app name and package ID when selected
4. Handle platform differences between Android and iOS

Here's the implementation:

First, let's update the pubspec.yaml file to add the necessary dependency:

# Add this to pubspec.yaml under dependencies:
  installed_apps: ^1.3.1

Now, let's modify the report_bug.dart file to implement the autocomplete widget:

import 'package:installed_apps/app_info.dart';
import 'package:installed_apps/installed_apps.dart';

// Inside _ReportFormState class:

// Add these variables
List<AppInfo> _installedApps = [];
String? _selectedAppPackage;
bool _isLoadingApps = false;

@override
void initState() {
  super.initState();
  _checkStatus();
  getAvailableLabels();
  if (widget.reportPageDefaults.sharedMediaFile != null) {
    _image = [File(widget.reportPageDefaults.sharedMediaFile!.path)];
  }
  if (widget.reportPageDefaults.text != null) {
    _titleController.text = widget.reportPageDefaults.text!;
  }
  if (widget.company != null &&
      widget.company?.url != null &&
      widget.company?.url != "") {
    _titleController.text = widget.company!.url!;
  }
  addFocusListener();
  _loadInstalledApps(); // Add this line to load apps on init
}

// Add this new method to load installed apps
Future<void> _loadInstalledApps() async {
  setState(() {
    _isLoadingApps = true;
  });
  
  try {
    if (Platform.isAndroid) {
      final apps = await InstalledApps.getInstalledApps(true, true);
      setState(() {
        _installedApps = apps;
        _isLoadingApps = false;
      });
    } else {
      // iOS doesn't support listing all installed apps due to system restrictions
      setState(() {
        _installedApps = [];
        _isLoadingApps = false;
      });
    }
  } catch (e) {
    print('Error loading installed apps: $e');
    setState(() {
      _isLoadingApps = false;
    });
  }
}

// Replace the TextFormField in the build method with this Autocomplete widget:
// Find the TextFormField with controller: _titleController and replace it with:

Autocomplete<AppInfo>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text.isEmpty) {
      return const Iterable<AppInfo>.empty();
    }
    
    return _installedApps.where((AppInfo app) {
      return app.name.toLowerCase().contains(textEditingValue.text.toLowerCase()) ||
             app.packageName.toLowerCase().contains(textEditingValue.text.toLowerCase());
    }).take(5); // Limit to 5 suggestions for performance
  },
  displayStringForOption: (AppInfo app) => app.name,
  fieldViewBuilder: (
    BuildContext context,
    TextEditingController fieldController,
    FocusNode fieldFocusNode,
    VoidCallback onFieldSubmitted,
  ) {
    // Sync our internal controller with the field controller
    if (_titleController.text.isNotEmpty && fieldController.text.isEmpty) {
      fieldController.text = _titleController.text;
    }
    
    return TextFormField(
      controller: fieldController,
      focusNode: fieldFocusNode,
      validator: (value) {
        if (value == null || value.isEmpty) {
          return AppLocalizations.of(context)!.requiredField;
        }
        return null;
      },
      onChanged: (v) {
        _titleController.text = v; // Keep our controller in sync
        if (duplicateVerified) {
          setState(() {
            duplicateVerified = false;
          });
        }
        _selectedAppPackage = null; // Reset package if text is changed
      },
      decoration: InputDecoration(
        hintText: (fieldFocusNode.hasFocus)
            ? AppLocalizations.of(context)!.exampleURL
            : AppLocalizations.of(context)!.url,
        suffixIcon: _isLoadingApps 
            ? SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2))
            : Platform.isAndroid ? Icon(Icons.apps) : null,
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(8.0),
          ),
          borderSide: BorderSide(color: Colors.grey),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(8.0),
          ),
          borderSide: BorderSide(color: Colors.grey),
        ),
        contentPadding:
            EdgeInsets.only(top: 8.0, left: 16.0, right: 16.0),
      ),
      cursorColor: Color(0xFFDC4654),
      style: GoogleFonts.aBeeZee(
        textStyle: TextStyle(
          fontSize: 12,
        ),
      ),
    );
  },
  onSelected: (AppInfo selection) {
    setState(() {
      _titleController.text = selection.name;
      _selectedAppPackage = selection.packageName;
    });
  },
  optionsViewBuilder: (
    BuildContext context,
    AutocompleteOnSelected<AppInfo> onSelected,
    Iterable<AppInfo> options,
  ) {
    return Align(
      alignment: Alignment.topLeft,
      child: Material(
        elevation: 4.0,
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxHeight: 200,
            maxWidth: MediaQuery.of(context).size.width - 40, // Account for padding
          ),
          child: ListView.builder(
            padding: EdgeInsets.zero,
            shrinkWrap: true,
            itemCount: options.length,
            itemBuilder: (BuildContext context, int index) {
              final AppInfo option = options.elementAt(index);
              return ListTile(
                leading: option.icon != null 
                    ? Image.memory(option.icon!, width: 30, height: 30)
                    : Icon(Icons.android),
                title: Text(option.name),
                subtitle: Text(option.packageName),
                onTap: () {
                  onSelected(option);
                },
              );
            },
          ),
        ),
      ),
    );
  },
),

Also, modify the Issue class to include the package ID when submitting the bug report:

// In the "onPressed" method of the "Add Issue" button, modify the Issue creation:

Issue issue = Issue(
  user: currentUser!,
  url: _titleController.text,
  title: _titleController.text,
  description: _descriptionController.text,
  isVerified: false,
  isOpen: true,
  screenshotsLink: _image.map((e) => e.path).toList(),
  userAgent: "Dart ${Platform.version.substring(0, 7) + Platform.operatingSystem}",
  label: _selectedIssueCategoriesIndex,
  tags: tags,
  appPackageId: _selectedAppPackage, // Add this line to include the package ID
);

This implementation:

1. Uses the installed_apps package to get a list of installed apps on Android
2. Creates an autocomplete widget that shows app icons, names, and package IDs
3. Stores both the app name (visible in the text field) and package ID (hidden)
4. Handles platform differences (showing app list only on Android as iOS has restrictions)

The autocomplete works for both manual entry and selecting from installed apps, maintaining the existing functionality while adding the new feature.

[CodeWithHusain]

Hi @DonnieBLT 👋 I’m Husain, currently exploring the OWASP-BLT project and planning to contribute toward GSoC 2026. I came across this issue and would like to work on integrating the flutter_appavailability package. Could you please confirm if I can take this up?

[DonnieBLT]

There is a related PR you can take a look and see to test it out and confirm that it works