Ƙirƙirar Popover tare da Kibiya a ciki Flutter

Don ƙirƙirar Flutter bugu tare da kibiya mai nuni zuwa takamaiman yanki, zaku iya amfani da Popover widget ɗin daga popover fakitin. Ga yadda za ku iya:

Ƙara popover kunshin zuwa pubspec.yaml fayil ɗin ku:

dependencies:
  flutter:  
    sdk: flutter  
  popover: ^0.5.0  

Shigo da fakitin da suka dace:

import 'package:flutter/material.dart';  
import 'package:popover/popover.dart';  

Yi amfani da Popover widget din:

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),  
                ],  
             ),  
           );  
          },  
       ),  
     ),  
   );  
  }  
}  

A cikin wannan misali, Popover ana amfani da widget din don ƙirƙirar popover tare da kibiya mai nuni daga maɓallin zuwa abun ciki. Dukiyar child ita ce ɓangarorin da ke haifar da popover, kuma bodyBuilder dukiyar ita ce sake kiran waya da ke dawo da abun ciki na popover.

Ka tuna don keɓance abun ciki, bayyanar, da halayen popover bisa ga buƙatun ku. Wannan misalin yana nuna amfanin fakitin popover don ƙirƙirar popovers tare da kibau a cikin Flutter.