For at oprette en Flutter popup med en pil, der peger på et bestemt element, kan du bruge Popover
widgetten fra popover
pakken. Sådan kan du gøre det:
Tilføj popover
pakken til din pubspec.yaml
fil:
dependencies:
flutter:
sdk: flutter
popover: ^0.5.0
Importer de nødvendige pakker:
import 'package:flutter/material.dart';
import 'package:popover/popover.dart';
Brug Popover
widgetten:
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),
],
),
);
},
),
),
);
}
}
I dette eksempel Popover
bruges widgetten til at oprette en popover med en pil, der peger fra knappen til indholdet. Egenskaben child
er det element, der udløser popover, og bodyBuilder
egenskaben er et tilbagekald, der returnerer indholdet af popover.
Husk at tilpasse indholdet, udseendet og adfærden af popoveren i overensstemmelse med dine krav. Dette eksempel viser brugen af pakken popover
til at oprette popovers med pile i Flutter.