Pakete, Repositories und App-Kategorien suchen

GitHub-RepositorySalehTZ/expandable_search_bar

erweiterbare Suchleiste

Ein schönes Flutter animiertes Suchfeld-Paket.

Projektcover von erweiterbare Suchleiste
Sterne
10
Forks
1
Letzter Push (UTC)
10.06.2022
Projektstatus
Aktiv

Original-README

Englischer Projektschnappschuss. Aktuelle Inhalte auf GitHub.

Pub

Animated Search Bar

Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Installation

  1. Add the latest version of package to your pubspec.yaml (and rundart pub get):
dependencies:
  expandable_search_bar: ^latest_version
  1. Import the package and use it in your Flutter App.
import 'package:expandable_search_bar/expandable_search_bar.dart';

Screenshots

Preview1

Preview2

⚠Note: As you see in the screenshots this package is only available on Mouse devices (Web, Windows, macOS, Linux), but I'm working on a solution to add mobile devices too.

Example

There are a number of properties that you can modify. Customize them as you want:

  • width
  • text
  • gutter (space between TextField and Button)
  • background color
  • icon color
  • icon background color
  • shadow under the bar
  • shadow under the button
  • animation duration (also for TextField)
  • animation curve (also for TextField)
class AnimatedBar extends StatelessWidget {  
  const AnimatedBar({
    Key? key,
  }) : super(key: key);

  final TextEditingController? searchController 
  = TextEditingController();

  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: const AnimatedSearchBar(  
          ExpandableSearchBar(
            onTap: () {
              print(
                searchController!.text.toString(),
              );
            },
            hintText: "search something",
            editTextController: searchController,
          ),
        ),  
      ),  
    );  
  }  
}

Next Goals

  • [ ] Support mobile devices (Unfortunately it's only available for "Mouse" devices).

  • [ ] Change font style and color for text.

Support

You can support me by following me on and GitHub

And also don't forget to star this package on GitHub

Alex Talebi GitHub avatar
GitHub-Autor

Alex Talebi ↗

Love android & Flutter 💙. Flutter Engineer @NewElectron let's connect.

@NewElectronEarthOffizielle Website ↗
SprachenDart

Kategorien

Von diesem Repository veröffentlichte Pakete

Verwendete Abhängigkeiten

Abhängigkeiten 3 Einträge

  • flutter{"sdk":"flutter"}
  • flutter_testEntwicklung{"sdk":"flutter"}
  • flutter_lintsEntwicklung^2.0.0

Wie wähle ich ein passendes Repository?

Nach Anwendungsfall filtern, Aktivität vergleichen und vor der Nutzung das Originalprojekt prüfen.

  1. Nach Name, Autor oder Beschreibung suchen und nach Thema eingrenzen.
  2. Sterne, Forks und letzte Pushes vergleichen. Sterne zeigen Interesse, garantieren aber keine Qualität.
  3. Vor der Nutzung README, Lizenz und Issues auf GitHub prüfen.

Quellen und Pflege

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗