First steps

Installation

Follow the steps to install:

1. Open the file pubspec.yaml in the root of your project;
2. Under dependencies, add beagle: ^0.9.0-alpha, or the most recent version;
3. Add beagle_components: ^0.9.0-alpha. You can omit this dependency if you’re familiar with Beagle and won’t use any of the default components;
4. In your IDE (Android Studio or Visual Studio Code), click pub get. Or, from the terminal, type flutter pub get.

Starting configuration

Step 1. Configure Beagle

All the configuration necessary for Beagle to work is centered on the parameters of the BeagleSdk.init startup method. These params tell everything Beagle needs to know how to render your widgets. Here you will see only the basic options baseUrl and components. For a list of all the available options, please check the Beagle Initialization section.

Step 2. Start Beagle

You can start Beagle at any point of the application. In this example, we will start Beagle as soon as the app starts. To do that:

• Open the file lib/main.dart;
• Import package:beagle/beagle.dart;
• If you’re using the beagle_components package, import package:beagle_components/beagle_components.dart as well;
• Inside the main function, before rendering anything, call BeagleSdk.init passing the parameter previously informed. See the example below:

import 'package:beagle/beagle.dart';
import 'package:beagle_components/beagle_components.dart';

void main() {
  BeagleSdk.init(
    baseUrl: 'https://usebeagle.io/start',
    components: defaultComponents,
  );
  // runApp();
}

Step 3. Render a remote widget

You must use the component BeagleWidget which is provided by the Beagle Library. This widget requires a single parameter, the screenRequest, which specifies the request to fetch the first server-driven view of the flow. See the example below:

import 'package:beagle/beagle.dart';
import 'package:beagle_components/beagle_components.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  BeagleSdk.init(
    baseUrl: 'https://usebeagle.io/start',
    components: defaultComponents,
  );
  runApp(const BeagleSampleApp());
}

class BeagleSampleApp extends StatelessWidget {
  const BeagleSampleApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Beagle Sample',
      home: Scaffold(
        body: BeagleWidget(
          screenRequest: BeagleScreenRequest('welcome'),
        ),
      ),
    );
  }
}

The example above used a simple Material App to render the server-driven widget. The component BeagleWidget includes a remote view in the layout.

The BeagleWidget accepts other optional parameters, just like the BeagleScreenRequest. If you want to check them, please visit the BeagleWidget section.

Continue reading

Check out more information in the following sections:

• Configuration options: Learn how to setup every property of Beagle.
• The BeagleWidget: BeagleWidget let you customize many aspects of the request and visual cues to the user.
• Accessing the localhost: Learn how to use a backend that serves widgets from localhost.
• Beagle services: Customize services like the logger, storage, http client and image downloader.
• Design system: Register local images and styles for your components.
• Customization: Create your own components, actions and operations.
• Global Context: Learn how to manipulate the global context in Beagle Flutter.
• Analytics: It gives information of every action executed, such as navigation data.
• Renderer: It might be necessary to interact with Beagle while rendering a component or executing an action. This article shows how to use the Renderer API to achieve complex behaviors.

👉 If you want to know the current development status of Beagle Flutter, check it in the Resources section. Contributions are welcomed!

Feedback

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.