Remove unnecessary box underneath the suggestion box.

[romain-pattyn]

Currently the SearchField widget enables us to modify the suggestion box decoration through the suggestionsDecoration parameter. However, when adding rounded corners to that box, there is still a white box underneath that makes the look really awkward. It can be seen in the next picture, the black lines at the bottom of the suggestion box (which is the black box) shouldn't stop before the black box.

This makes me believe that the suggestion box is somehow the child of a container that has a white fillColor or something like that.

Would it be possible to remove that unnecessary box?

[romain-pattyn]

Actually removing that box doesn't fix the issue because of other artifact present in those unwanted areas. Such as the item separators (See image) or the scrollbar.

The way to go I think would be to add a ClipRRect widget in the parent tree of the suggestion box that we could modify through a new parameter in SearchField.

[maheshj01]

Hi @romain-pattyn, Thanks for filing the issue. Can you please drop a small piece of a code sample that demonstrates the above output?

[romain-pattyn]

The following code will replicate the issue.

SearchField<String>(
  suggestions: [
    SearchFieldListItem("item1"),
    SearchFieldListItem("item2"),
    SearchFieldListItem("item3"),
    SearchFieldListItem("item4"),
    SearchFieldListItem("item5"),
    SearchFieldListItem("item6"),
  ],
  marginColor: Colors.orange,
  maxSuggestionsInViewPort: 3,
  searchInputDecoration: InputDecoration(
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(24),
      borderSide: const BorderSide(
        width: 1,
        color: Colors.orange,
        style: BorderStyle.solid,
      ),
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(24),
      borderSide: const BorderSide(
        width: 1,
        color: Colors.black,
        style: BorderStyle.solid,
      ),
    ),
    fillColor: Colors.white,
    filled: true,
    contentPadding: const EdgeInsets.symmetric(
      horizontal: 20,
    ),
  ),
  suggestionsDecoration: BoxDecoration(
    border: Border.all(color: Colors.orange),
    borderRadius: BorderRadius.circular(24),
  ),
);

To fix the issue we simply need to wrap the AnimatedContainer in a ClipRRect inside _suggestionsBuilder.

There are another few improvements that could be made like being able to change the suggestionStyle. I would like to contribute to this package. Do I need to open a different feature request issue for each improvement I want to make?

[romain-pattyn]

I've fixed the issue, can I create a pull request?
That's with the new version :

Quick question : Why do we need to create a new branch when forking the repo to make a contribution?

[romain-pattyn]

The ClipRRect must actually be placed above the _suggestionBuilder() like so 👍

CompositedTransformFollower(
    offset: getYOffset(offset, count) ?? Offset.zero,
    link: _layerLink,
    child: ClipRRect(
      borderRadius: widget.suggestionBoxBorderRadius,
      child: Material(
        child: _suggestionsBuilder(),
      ),
    ),
  ),

Doing so will also cut the InkWell color change.

[maheshj01]

Thanks for the code sample @romain-pattyn, I will surely take a look.

I would like to contribute to this package.

Thank you so much, PR's are welcome, I really appreciate you taking the time to contribute. Before you begin please take a look at this contributing guide https://github.com/maheshmnj/searchfield/blob/master/CONTRIBUTING.md, Let me know if you have any questions.

Do I need to open a different feature request issue for each improvement I want to make?

Yes please filing issues separately per feature request/bug would help us track it separately.

I've fixed the issue, can I create a pull request?
That's with the new version :

Yes please file a PR and tag me and I will review it asap.

Quick question : Why do we need to create a new branch when forking the repo to make a contribution?

That's a good practice to create a separate branch per feature. so that if we mess up anything we won't be affecting the main branch.

[beingadish]

Hello, I would like to know if this issue is fixed or not. If not how to fix it I need to remove that background white colored container, my client is asking me to remove it somehow. I don't know what to do kindly someone help me fix that.

[maheshj01]

@beingadish Can you please provide a minimal reproducible code to better understand the issue, I am kind of lost with this issue at this time.

[maheshj01]

Fixed in v0.8.9

Before

After

minimal code sample

import 'package:flutter/material.dart';
import 'package:searchfield/searchfield.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(
        colorSchemeSeed: Colors.indigo,
        useMaterial3: true,
        brightness: Brightness.light,
      ),
      darkTheme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      home: SearchFieldSample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class SearchFieldSample extends StatefulWidget {
  const SearchFieldSample({Key? key}) : super(key: key);

  @override
  State<SearchFieldSample> createState() => _SearchFieldSampleState();
}

class _SearchFieldSampleState extends State<SearchFieldSample> {
  int suggestionsCount = 12;
  final focus = FocusNode();
  @override
  Widget build(BuildContext context) {
    final suggestions =
        List.generate(suggestionsCount, (index) => 'suggestion $index');
    return Scaffold(
        appBar: AppBar(
          title: Text('Dynamic sample Demo'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              suggestionsCount++;
              suggestions.add('suggestion $suggestionsCount');
            });
          },
          child: Icon(Icons.add),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: SearchField(
              onSearchTextChanged: (query) {
                final filter = suggestions
                    .where((element) =>
                        element.toLowerCase().contains(query.toLowerCase()))
                    .toList();
                return filter
                    .map((e) => SearchFieldListItem<String>(e,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 4.0),
                          child: Text(e,
                              style:
                                  TextStyle(fontSize: 24, color: Colors.red)),
                        )))
                    .toList();
              },
              key: const Key('searchfield'),
              hint: 'Search by country name',
              itemHeight: 50,
              scrollbarDecoration: ScrollbarDecoration(),
              onTapOutside: (x) {},
              searchInputDecoration: InputDecoration(
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(24),
                  borderSide: const BorderSide(
                    width: 1,
                    color: Colors.orange,
                    style: BorderStyle.solid,
                  ),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(24),
                  borderSide: const BorderSide(
                    width: 1,
                    color: Colors.black,
                    style: BorderStyle.solid,
                  ),
                ),
                fillColor: Colors.white,
                filled: true,
                contentPadding: const EdgeInsets.symmetric(
                  horizontal: 20,
                ),
              ),
              suggestionsDecoration: SuggestionDecoration(
                color: Colors.red,
                border: Border.all(color: Colors.orange),
                borderRadius: BorderRadius.circular(24),
              ),
              suggestions: suggestions
                  .map((e) => SearchFieldListItem<String>(e,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 4.0,horizontal: 12),
                        child: Text(e,
                            style: TextStyle(fontSize: 24, color: Colors.white)),
                      )))
                  .toList(),
              focusNode: focus,
              suggestionState: Suggestion.expand,
              onSuggestionTap: (SearchFieldListItem<String> x) {
                focus.unfocus();
              },
            ),
          ),
        ));
  }
}

cc: @romain-pattyn, @beingadish