expandable_search_bar

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Eine optisch ansprechende und animierte Suchleiste für Flutter mit fließenden Übergängen und hoher Anpassbarkeit. Sie verbessert die Benutzererfahrung durch dynamische Erweiterung und intuitives Design und ist für Apps geeignet, die eine ansprechende Suchoberfläche erfordern. Das Paket unterstützt mehrere Plattformen und ermöglicht Entwicklern, Aussehen und Verhalten an das Thema ihrer App anzupassen.

Anwendungsfälle

Verbesserung von Such-Schnittstellen für mobile Apps
Interaktive Web-Sucherfahrungen erstellen
Integration animierter Suche in Desktop-Anwendungen
Verbesserung der UX in E-Commerce-Apps
Responsive Suchleisten zu Dashboards hinzufügen

Hauptmerkmale

Glatte erweiterbare Animation
Hochgradig anpassbare Erscheinung
Plattformübergreifende Kompatibilität
Unterstützt Dunkelmodus
Einfache Integration mit bestehender Benutzeroberfläche
Konfigurierbare Suchauslöser

Geeignet für

Flutter-Entwickler, die suchintensive Apps erstellen
designorientierte UI/UX-Teams
Apps für mehrere Plattformen
Entwickler, die animierte Komponenten suchen
Projekte, die moderne Suchleistenästhetik erfordern

Hinweise

Kann eine Leistungsoptimierung auf Geräten mit geringer Leistung erfordern
Benutzerdefinierte Stile können die Entwicklungszeit verlängern
Eingeschränkte integrierte Suchlogik (externe Implementierung erforderlich)
Abhängig vom Animationsframework von Flutter
Nicht für sehr große Datensätze optimiert, ohne zusätzliche Behandlung

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

Pub

Animated Search Bar

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

Installation

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
  expandable_search_bar: ^latest_version

Import the package and use it in your Flutter App.

import 'package:expandable_search_bar/expandable_search_bar.dart';

Screenshots

⚠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

Pakete, Repositories und App-Kategorien suchen

Paket installieren