Om een Flutter pop-up te maken met een pijl die naar een specifiek element wijst, kun je de Popover
widget uit het popover
pakket gebruiken. Hier is hoe je het kunt doen:
Voeg het popover
pakket toe aan uw pubspec.yaml
bestand:
dependencies:
flutter:
sdk: flutter
popover: ^0.5.0
Importeer de benodigde pakketten:
import 'package:flutter/material.dart';
import 'package:popover/popover.dart';
Gebruik de 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 dit voorbeeld Popover
wordt de widget gebruikt om een popover te maken met een pijl die van de knop naar de inhoud wijst. De child
eigenschap is het element dat de popover activeert en de bodyBuilder
eigenschap is een callback die de inhoud van de popover retourneert.
Vergeet niet om de inhoud, het uiterlijk en het gedrag van de popover aan te passen aan uw wensen. Dit voorbeeld demonstreert het gebruik van het popover
pakket voor het maken van popovers met pijlen in Flutter.