Guides

Creating Custom Controllers

Extend Forui controllers with custom logic and pass them to widgets.

Suppose you extend a controller, e.g. FPopoverController, to add custom logic. You have 2 options when passing the custom controller to a widget.

Managed Control with External Controller

Pass the custom controller via a managed control.

1class CustomController extends FPopoverController {
2 CustomController({required super.vsync});
3
4 // Custom logic here.
5}
6
7class MyWidget extends StatefulWidget {
8 const MyWidget({super.key});
9
10 @override
11 State<MyWidget> createState() => _MyWidgetState();
12}
13
14class _MyWidgetState extends State<MyWidget>
15 with SingleTickerProviderStateMixin {
16 late final CustomController _controller;
17
18 @override
19 void initState() {
20 super.initState();
21 _controller = CustomController(vsync: this);
22 }
23
24 @override
25 void dispose() {
26 _controller.dispose();
27 super.dispose();
28 }
29
30 @override
31 Widget build(BuildContext context) => FPopover(
32 control: .managed(controller: _controller),
33 child: const Placeholder(),
34 popoverBuilder: (_, _) => const Placeholder(),
35 );
36}
37

The downside of this approach is that you have to manage the controller's lifecycle yourself.

Extend Managed Control

Alternatively, you can extend managed control (FPopoverManagedControl) to create your custom controller.

1class CustomController extends FPopoverController {
2 final int customValue;
3
4 CustomController({required this.customValue, required super.vsync});
5}
6
7class CustomManagedControl extends FPopoverManagedControl {
8 final int customValue;
9
10 CustomManagedControl({required this.customValue});
11
12 @override
13 CustomController createController(TickerProvider vsync) =>
14 CustomController(customValue: customValue, vsync: vsync);
15}
16
17// Usage:
18final example = FPopover(
19 control: CustomManagedControl(customValue: 42),
20 child: const Placeholder(),
21 popoverBuilder: (_, _) => const Placeholder(),
22);
23

This way, the widget manages the controller's lifecycle for you.

Creating Custom Deltas

Create custom delta classes for transformations not provided out of the box.

Using Forui À La Shadcn/ui

Take full ownership of Forui's behavior and layout by editing widget source directly.

On this page

Managed Control with External Controller
Extend Managed Control