Pond
App

AppPondContext

The AppPondContext is a key component of the Pond Module in the Flood toolkit, designed specifically for building Flutter applications. It extends the functionality of the CorePondContexts by providing a way to manage and organize AppPondComponents, which are Flutter-specific components that enhance your application's user interface and navigation.

AppPondComponent

An AppPondComponent is similar to a CorePondComponent, but it offers additional features tailored for Flutter apps. Like CorePondComponents, AppPondComponents have lifecycle methods for registration, loading, and resetting. However, they also provide extra functionality:

  • wrapPage: Allows you to define widgets that wrap around each page in your app. For example, the EnvironmentBannerAppComponent uses this to display a banner indicating the current environment on every page.
  • wrapApp: Lets you specify widgets that wrap around the entire MaterialApp. The StyleAppComponent uses this to provide a Style to the whole app using a Provider.
  • pages: A map of Routes to their corresponding AppPages, which define the screens in your app and how they are displayed.

Usage

To start using the AppPondContext, create an instance and register your AppPondComponents:

example/lib/main.dart
final appPondContext = AppPondContext();
await appPondContext.register(MyAppComponent());
await appPondContext.register(AnotherAppComponent());

Instead of manually loading the AppPondContext and registering routes, you can use the PondApp.run() method in your main.dart file:

example/lib/main.dart
PondApp.run(
  appPondContextGetter: () => buildAppPondContext(),
  // ...
);

This will build the AppPondContext, register all routes, show a splash screen while all the components load, and navigate to the initial page based on the current URL.

Locating Components

You can locate any CorePondComponent or AppPondComponent registered within an AppPondContext using the find method:

appPondContext.find<HelloWorldPondComponent>() // returns the instance of `HelloWorldPondComponent` registered in the context.

If there's a possibility that the component hasn't been registered, you can use the findOrNull method instead:

appPondContext.findOrNull<MyOtherComponent>()

Navigation & Routing

PondApp.run uses its own custom router for navigation. To learn more about how AppPondComponents work with Flood's navigation system, check out the Navigation & Routing page.

Pre-built Components

Flood offers a FloodAppComponent that includes a set of essential components for building Flutter apps. Many of the following components are included in both the CorePondContext and AppPondContext. Some of these components simply register a route in the Debug page.

Here are the components included:

To use the FloodAppComponent within your application, simply register it in your AppPondContext.

example/lib/main.dart
final appPondContext = AppPondContext();
await appPondContext.register(FloodAppComponent(...));

If you want to exclude some of these components from your app, simply do not register FloodAppComponent and register the components you want to include.

CoreApp Pages