Primeiros Passos

Instalação inicial

Siga os passos para instalar:

1. Abra o arquivo pubspec.yaml na raiz do seu projeto;
2. Sob dependencies, adicione beagle: ^0.9.0-alpha, ou a versão mais recente;
3. Adicione beagle_components: ^0.9.0-alpha. Você pode omitir esta dependência se estiver familiar com Beagle e não vai usar nenhum componente padrão;
4. Na sua IDE (Android Studio ou Visual Studio Code), clique em pub get. Ou a partir do terminal, escreva flutter pub get.

Configurações iniciais

Passo 1. Configurar o Beagle

Toda a configuração necessária para o Beagle funcionar está centrada nos parâmetros do método de inicialização BeagleSdk.init. Esses parâmetros informam ao Beagle tudo que ele precisa conhecer para renderizar seus widgets. Aqui você vai ver apenas as opções básicas baseUrl e components. Para uma lista de todos as opções disponíveis, confira a seção de Inicialização do Beagle.

Passo 2. Iniciar o Beagle

Você pode inicializar o Beagle em qualquer ponto de sua aplicação. Nesse exemplo, nós vamos inicializar o Beagle assim que o app iniciar. Para isso:

• Abra o arquivo lib/main.dart;
• Importe package:beagle/beagle.dart;
• Se estiver usando o pacote beagle_components, importe package:beagle_components/beagle_components.dart também;
• Dentro da função main, antes de renderizar qualquer coisa, chame BeagleSdk.init passando os parâmetros previamente informados. Veja o exemplo abaixo:

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

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

Passo 3. Renderizar um widget remoto

Você precisa usar o componente BeagleWidget que é provido pela biblioteca Beagle. Este widget requer um único parâmetro, o screenRequest, que especifica a requisição para buscar o primeiro widget do fluxo provido pelo servidor. Veja o exemplo abaixo:

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'),
        ),
      ),
    );
  }
}

O exemplo acima usou um simples Material App para renderizar o widget provido pelo servidor. O componente BeagleWidget inclui no layout um widget remoto.

O BeagleWidget aceita outros parâmetros opicionais, assim como o BeagleScreenRequest. Para vê-los, visite a seção do BeagleWidget.

Continue lendo

Veja mais informações nas próximas seções:

• Opções de configuração: Aprenda como configurar cada propriedade do Beagle.
• O BeagleWidget: O BeagleWidget permite você customizar vários aspectos da requisição e efeitos visuais para o usuário.
• Acessando o localhost: Aprenda como usar o backend que serve widgets pelo localhost.
• Serviços do Beagle: Customize serviços como o logger, armazenamento, cliente http e image downloader.
• Design do sistema: Registre imagens locais e estilos para seus componentes.
• Customização: Crie seus próprios componentes, ações e operações.
• Contexto global: Aprenda como manipular o contexto global no Beagle Flutter.
• Analytics: Dê informação sobre cada ação executada, como dados de navegação.
• Renderizador: Pode ser necessário interagir com o Beagle enquanto ele renderiza um componente ou executa uma ação. Este artigo mostra como usar a API de Renderização para alcançar comportamentos complexos.

👉 Se você quiser saber o estado atual de desenvolvimento do Beagle Flutter, confira na seção de Recursos. Contribuições são bem-vindas!

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.