Aus öffentlichen Paketdaten erstellte Orientierung.
slide_drawer ist ein Flutter-Paket, das die Implementierung von Schiebedrawern mit glatten Schiebeanimationen vereinfacht. Es bietet eine benutzerfreundliche API zur Integration von Seitennavigation-Menüs in Flutter-Anwendungen und verbessert die Benutzererfahrung durch flüssige Übergänge. Für Entwickler, die eine leichte und anpassbare Drawer-Lösung suchen, unterstützt es sowohl linke als auch rechte Drawers mit minimalem Aufwand. Das Paket legt Wert auf Leistung und Ästhetik und ist daher ideal für Anwendungen, die intuitive Navigation erfordern. Sein sauberer Code und die aktive Wartung gewährleisten Zuverlässigkeit über verschiedene Projekte hinweg.
Anwendungsfälle
Seitennavigation-Menüs implementieren
Animierte Schubladenübergänge hinzufügen
Responsive Layouts mit einblendbaren Paneelen erstellen
Mobile App-Dashboards erstellen
Verbesserung der Benutzeroberflächen-Interaktivität mit Schiebeeffekten
Hauptmerkmale
Glatte Gleitanimation
Unterstützung für linke und rechte Schubladen
Minimale Konfiguration erforderlich
Leicht und leistungsstark
Anpassbare Erscheinung und Verhalten
Geeignet für
Mobile-App-Entwickler
UI/UX-Designer, die Animationserweiterungen suchen
Projekte, die einfache Schubladenfunktion erfordern
Flutter-Anfänger erkunden Navigationsmuster
Apps mit dynamischem Seitenleisteninhalt
Hinweise
Beschränkt auf grundlegende Schubladenfunktionen
Keine integrierte Unterstützung für verschachtelte Schubladen
Kann zusätzliche Stilisierung für komplexe Layouts erfordern
Nicht für große Navigationssysteme optimiert
Abhängig von externen Abhängigkeiten für erweiterte Anpassung
Original-README
Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.
SlideDrawer
An easy way to use drawer in Flutter with cool sliding animation.
Getting Started
Add dependency in your flutter project.
$ flutter pub add slide_drawer
or
dependencies:slide_drawer:^1.0.3
Then run flutter pub get.
Example
You can see the example folder to learn many different ways of using SlideDrawer in your app.
Usage
As usual, we need to import the package.
import'package:slide_drawer/slide_drawer.dart';
Then wrap the app home page with SlideDrawer.
To use the basic SlideDrawer, you only need to define items (List of MenuItem) to generate menu in your drawer. The drawer will use your default theme color as drawer background, and theme brightness as drawer brightness.
classAppextendsStatelessWidget{
@overrideWidgetbuild(BuildContext context) {
returnMaterialApp(
title: title,
// SlideDrawer will use style from this theme
theme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
// wrap your HomePage with SlideDrawer
home: SlideDrawer(
items: [
MenuItem('Home', onTap: (){}),
MenuItem('Project', onTap: (){}),
MenuItem('Favourite', onTap: (){}),
MenuItem('Profile', onTap: (){}),
MenuItem('Setting', onTap: (){}),
],
child: HomePage(),
),
);
}
}
Then set onPressed in your AppBar menu button to toggle SlideDrawer.
appBar: AppBar(
title: Text(title),
leading: IconButton(
icon: Icon(Icons.menu),
// call toggle from SlideDrawer to alternate between open and close// when pressed menu button
onPressed: () => SlideDrawer.of(context).toggle(),
),
),
SlideDrawer also come with parameter backgroundColor and backgroundGradient.
If we specify backgroundGradient, the drawer will use it as background. If not, it will use backgroundColor. If we also not specify backgroundColor, it will use the default theme color as background.
It's good practice to specify brightness (dark or light) if we use backgroundGradient or backgroundColor.
If we set dark color in your backgroundGradient or backgroundColor, use Brightness.dark.
If we set light color, use Brightness.light.
In the previous example, we use items and let the SlideDrawer generate menu in the content drawer.
But we can also set any custom widget as the content drawer.
If you have your own creative idea for the full widget inside the drawer, don't worry. We can use it in SlideDrawer by passing it to drawer. In this way, SlideDrawer will use style of custom drawer and ignore any value in backgroundColor, gradientColor, and brightness.
The default SlideDrawer animate home page by move it to the right (offsetFromRight default to 60), scale it, and rotate it at y axis with some small angle (pi / 24 radian or 180 / 24 degree = 7.5 degree).
If don't want to rotate, we can disable the rotation by setting isRotate to false.
We can also use custom curve and duration. The default values are linear and 300ms. We can specify curveReverse and durationReverse to change curve and duration of animation in the reverse direction.
