feat: Added a Search bar

[Yugesh-Kumar-S]

Closes #2704
Since the PSLab has many instruments , it becomes hard for users to scroll down to search a specific instrument . So i have added a search bar that filters the instruments based on the instrument name.

Changes

• Implemented a search bar

Screenshots / Recordings

Screen.Recording.2025-05-25.185557.mp4

Checklist:

• No hard coding: I have used resources from strings.xml, dimens.xml and colors.xml without hard coding any value.
• No end of file edits: No modifications done at end of resource files strings.xml, dimens.xml or colors.xml.
• Code reformatting: I have reformatted code and fixed indentation in every file included in this pull request.
• No extra space: My code does not contain any extra lines or extra spaces than the ones that are necessary.

Summary by Sourcery

Add a search bar to the Instruments screen to allow users to filter the list of instruments by name.

New Features:

• Add a styled search TextField with clear button at the top of the Instruments screen
• Implement case-insensitive filtering of the instrument list based on the search query
• Show an empty-state view with icon and message when no instruments match the search term

[sourcery-ai]

Reviewer's Guide

Introduces a real-time search feature in InstrumentsScreen by adding state and filtering logic, refactoring the UI to include a search bar with clear/empty-state handling, and updating the list rendering to reflect the filtered results.

Sequence Diagram: Instrument Filtering

sequenceDiagram
    actor User
    participant TextField
    participant ISS as _InstrumentsScreenState

    User->>TextField: Types search query
    TextField->>ISS: onChanged(query)
    ISS->>ISS: _filterInstruments(query)
    ISS->>ISS: setState()

Loading

Sequence Diagram: Clearing Search Input

sequenceDiagram
    actor User
    participant CB as ClearButton
    participant ISS as _InstrumentsScreenState
    participant SC as _searchController

    User->>CB: Taps clear icon
    CB->>ISS: onPressed()
    ISS->>SC: clear()
    ISS->>ISS: _filterInstruments('')
    ISS->>ISS: setState()

Loading

Class Diagram: Changes to _InstrumentsScreenState

classDiagram
    class _InstrumentsScreenState {
        +TextEditingController _searchController
        +List<int> _filteredIndices
        +void initState()
        +void dispose()
        +void _filterInstruments(String query)
        +Widget build(BuildContext context)
        +void _onItemTapped(int index)
    }

Loading

File-Level Changes

Change	Details	Files
Implemented search filter logic and state management	Added TextEditingController (_searchController) and List (_filteredIndices) Created _filterInstruments() to update filteredIndices based on the query Initialized _filteredIndices in initState to show all items by default Disposed _searchController in dispose()	lib/view/instruments_screen.dart
Refactored InstrumentsScreen UI to integrate the search bar	Wrapped the list view in a Column to place the TextField above the list Inserted TextField with prefix/suffix icons, themed borders, and clear‐button behavior Conditionally render a ‘no results’ placeholder when filteredIndices is empty Updated ListView.builder to use _filteredIndices for itemCount and lookup	lib/view/instruments_screen.dart

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[CloudyPadmal]

Looks like a good addition. The build is failing for deprecated libraries.

[Yugesh-Kumar-S]

Looks like a good addition. The build is failing for deprecated libraries.

Replaced deprecated libraries with their latest supported alternatives to fix the build issues.

[github-actions]

Build successful. APKs to test: https://github.com/fossasia/pslab-android/actions/runs/15270582634/artifacts/3202117329

[CloudyPadmal]

This seems a bit too wide. Can you check what is the average padding between a search bar and a similar looking list item in other established Flutter apps?

[Yugesh-Kumar-S]

I have checked a few Flutter apps, and it seems that 16px is commonly used for horizontal padding, while vertical padding ranges from 8px to 16px. I will make the changes based on your suggestion sir.

[Yugesh-Kumar-S]

padding: const EdgeInsets.symmetric(vertical: 8.0,horizontal: 16.0)

[CloudyPadmal]

Looks like a good addition!