Follow the steps to install:
pubspec.yaml
in the root of your project;dependencies
, add beagle: ˆv2.0
, or the most recent version;beagle_components: ^v2.0
. You can omit this dependency if you’re familiar with Beagle and won’t use any
of the default components;pub get
. Or, from the terminal, type flutter pub get
.In order to work, Beagle needs an instance of the class BeagleService, which can be instantiated as follows:
import 'package:beagle/beagle.dart';
import 'package:beagle_components/beagle_components.dart';
final beagleService = BeagleService(
baseUrl: 'https://usebeagle.io/start',
components: defaultComponents,
actions: defaultActions,
);
The baseUrl
is the endpoint that will deliver the JSONs representing the UI, i.e. the Backend For the Frontend (BFF). The parameter components
is a map of the components (widgets) to be made available for Beagle. If Beagle uses a “custom:button”, for instance, this map must have a key “custom:button” linked to the corresponding widget. The parameter actions
is a map of additional actions to be added to Beagle, in this example we add all actions that come with the default components package. There must be a key in this map for every action used by Beagle.
baseUrl
and components
are the only two required properties when instantiating the Beagle Service, but many aspects of the Server Driven UI behavior can be customized through this configuration. For a list of all the available options, please check the
Beagle Initialization section.
After creating the BeagleService, we need to tell Flutter we want to use it for all descending elements. The widget BeagleProvider
is the one responsible for this, it accepts the BeagleService and a child, which is the app itself.
import 'package:beagle/beagle.dart';
void main() {
runApp(BeagleProvider(
beagle: beagleService,
child: MaterialApp(
title: 'Beagle Sample',
theme: ThemeData(
visualDensity: VisualDensity.adaptivePlatformDensity,
indicatorColor: Colors.white,
appBarTheme: AppBarTheme(
elevation: 0,
),
),
home: BeagleSampleApp()
)
));
}
We recommend declaring the BeagleProvider as soon as possible. Be careful not to put it inside a navigator, because it might make it unavailable when the screen changes, which is not what we want.
To start a Beagle flow (set of screens provided by the backend), you need to use the function openBeagleScreen
, made available by the core Beagle Library. See the example below:
class BeagleSampleApp extends StatelessWidget {
const BeagleSampleApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => openBeagleScreen(route: RemoteView('/components'), context: context),
child: Text('Start beagle flow'),
),
),
);
}
}
The function openBeagleScreen
can be further customized. If you want to check the additional properties, please visit the openBeagleScreen section.
If you want to see most of the features available for Beagle Flutter, you can check the page “BeagleService”. There you’ll find summarized descriptions of everything that can be set up and links to the full documentation of each feature.
The other important features that are not included in the “BeagleService” page are:
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.