Um ein Flutter Popup mit einem Pfeil zu erstellen, der auf ein bestimmtes Element zeigt, können Sie das Popover
Widget aus dem popover
Paket verwenden. So können Sie es machen:
Fügen Sie das popover
Paket zu Ihrer pubspec.yaml
Datei hinzu:
dependencies:
flutter:
sdk: flutter
popover: ^0.5.0
Importieren Sie die erforderlichen Pakete:
import 'package:flutter/material.dart';
import 'package:popover/popover.dart';
Verwenden Sie das Popover
Widget:
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Popover Example'),
),
body: Center(
child: Popover(
child: ElevatedButton(
onPressed:() {},
child: Text('Open Popup'),
),
bodyBuilder:(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('This is a popover with an arrow.'),
SizedBox(height: 10),
Icon(Icons.arrow_drop_up, color: Colors.grey),
],
),
);
},
),
),
);
}
}
In diesem Beispiel Popover
wird das Widget verwendet, um ein Popover mit einem Pfeil zu erstellen, der von der Schaltfläche zum Inhalt zeigt. Die child
Eigenschaft ist das Element, das das Popover auslöst, und die bodyBuilder
Eigenschaft ist ein Rückruf, der den Inhalt des Popovers zurückgibt.
Denken Sie daran, den Inhalt, das Erscheinungsbild und das Verhalten des Popovers entsprechend Ihren Anforderungen anzupassen. Dieses Beispiel demonstriert die Verwendung des popover
Pakets zum Erstellen von Popovers mit Pfeilen in Flutter.