화살표로 팝오버 만들기 Flutter

특정 요소를 가리키는 화살표가 있는 팝업을 만들려면 패키지 의 위젯을 Flutter 사용할 수 있습니다. 방법은 다음과 같습니다. Popover popover

popover 파일 에 패키지를 추가합니다 pubspec.yaml.

dependencies:
  flutter:  
    sdk: flutter  
  popover: ^0.5.0  

필요한 패키지를 가져옵니다.

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

위젯 사용 Popover:

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

이 예에서 Popover 위젯은 버튼에서 콘텐츠를 가리키는 화살표가 있는 팝오버를 만드는 데 사용됩니다. 속성 child 은 팝오버를 트리거하는 요소이고 bodyBuilder 속성은 팝오버의 콘텐츠를 반환하는 콜백입니다.

요구 사항에 따라 팝오버의 콘텐츠, 모양 및 동작을 사용자 지정해야 합니다. popover 이 예제는 에서 화살표가 있는 팝오버를 만들기 위한 패키지 사용법을 보여줍니다 Flutter.