Lucas 8cf683eb50
feat: customize animation for popover (#6507)
* feat: customize animation for popover

* chore: code refactor

* feat: using popover direction calculate the popover animation translate direction

* feat: integrate the animated popover in appflowy_popover and popover_action

* fix: close popover assertion

* chore: format code

* chore: code refactor

* feat: optimize the popover listener

* feat: clear popover when hot-reloading

* chore: refactor code

* fix: integration test

* fix: icon test
2024-10-09 15:10:05 +08:00

117 lines
3.4 KiB
Dart

import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:flutter/material.dart';
import './example_button.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'AppFlowy Popover Example'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: const Padding(
padding: EdgeInsets.symmetric(horizontal: 48.0, vertical: 24.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ExampleButton(
label: 'Left top',
offset: Offset(0, 10),
direction: PopoverDirection.bottomWithLeftAligned,
),
ExampleButton(
label: 'Left Center',
offset: Offset(0, -10),
direction: PopoverDirection.rightWithCenterAligned,
),
ExampleButton(
label: 'Left bottom',
offset: Offset(0, -10),
direction: PopoverDirection.topWithLeftAligned,
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ExampleButton(
label: 'Top',
offset: Offset(0, 10),
direction: PopoverDirection.bottomWithCenterAligned,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ExampleButton(
label: 'Central',
offset: Offset(0, 10),
direction: PopoverDirection.bottomWithCenterAligned,
),
],
),
ExampleButton(
label: 'Bottom',
offset: Offset(0, -10),
direction: PopoverDirection.topWithCenterAligned,
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ExampleButton(
label: 'Right top',
offset: Offset(0, 10),
direction: PopoverDirection.bottomWithRightAligned,
),
ExampleButton(
label: 'Right Center',
offset: Offset(0, 10),
direction: PopoverDirection.leftWithCenterAligned,
),
ExampleButton(
label: 'Right bottom',
offset: Offset(0, -10),
direction: PopoverDirection.topWithRightAligned,
),
],
),
],
),
),
);
}
}