{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Integração Flutter","type":"basic","slug":"integração-flutter","excerpt":"Este tutorial tem como objetivo, guiar os desenvolvedores que desejam integrar seus aplicativos desenvolvidos em Flutter.","body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/71387cb-Artboard.png\",\n        \"Artboard.png\",\n        2511,\n        687,\n        \"#385862\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Recomendamos que você use a versão estável mais recente do Flutter, definida em pubspec.yaml. A Inngage SDK foi verificado pela última vez na versão Flutter 1.20.3 • channel stable\\n<br>\\n**Versões suportadas:**\\n\\n**dart:** >=2.5.2 <3.0.0\\n\\n**flutter:** >=1.10.0\"\n}\n[/block]\n\n<br>\n**Passos da integração:**\n\n[1. Configuração do projeto no Firebase](https://inngage.readme.io/docs/configuração-firebase-e-google-dev-console)\n[2. Configuração no painel Inngage](https://inngage.readme.io/docs/android-configuracao-plataforma-inngage)\n[3. Configuração nativa iOS \n](https://inngage.readme.io/v1.0/docs/configuração-nativa-ios-flutter)\n[4. Configuração nativa Android](https://inngage.readme.io/v1.0/docs/configuração-nativa-android-flutter)\n\n<br>\n\nApós fazer as configurações necessárias para que o seu código tenha acesso nativo às push notifications do Firebase iremos instalar a SDK da Inngage. <br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Preparando o ambiente de produção\"\n}\n[/block]\nInstale a SDK no seu projeto, procure a ultima versão  e instale no pubspec.yaml da seguinte forma:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"inngage_plugin: ^x.y.z\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"2. Implementando a SDK\"\n}\n[/block]\nImporte **\"InngageSDK\"** do módulo da SDK, da seguinte forma:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import 'package:inngage_plugin/inngage_sdk.dart';\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n**InngageSDK.subscribe()**: este método deve ser chamado para que o usuário seja informado da chegada das notificações e assim inicializar o inngage dentro do seu app, quase sempre chamado dentro do ‘main.dart' mas dependendo da sua arquitetura pode ser chamado dentro do MyApp() essa função é responsável por autorizar o acesso à API da Inngage e ao Firebase Cloud Messaging e ativar os listeners de notificações. \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"void main() async {\\n  // it should be the first line in main method\\n  WidgetsFlutterBinding.ensureInitialized();\\n  await InngageSDK.subscribe(\\n   appToken: 'Trocar pelo App_Token do aplicativo',\\n   friendlyIdentifier: 'Trocar pelo objeto identificador do usuário',\\n   navigatorKey: navigatorKey,\\n );\\n  runApp(MyApp());\\n}\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n**Parametros requeridos ou obrigatórios:\n**\n**:::at:::required appToken: **App token do aplicativo \n**@required navigatorKey:** No Flutter, as GlobalKeys podem ser usadas para acessar o estado de um StatefulWidget.\n<br>\nNo main.dart, passamos nossa GlobalKey como NavigatorKey para nosso MaterialApp esta é a mesma navigatorKey que passamos no InngageSDK.subscribe()\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@override\\n  Widget build(BuildContext context) {\\n    return MaterialApp(\\n      navigatorKey: navigatorKey,\\n      home: HomePage(),\\n    );\\n  }\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"3. Adicionando Custom Fields / User Properties\"\n}\n[/block]\nA SDK deve permitir ao desenvolvedor que está integrando a SDK, adicionar campos customizáveis, como Nome, e-mail, gênero etc. Esses parâmetros devem antes ser configurados na plataforma da Inngage\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"final json = {\\n    \\\"nome\\\": \\\"Leonardo\\\",\\n    \\\"dt_nascimento\\\": \\\"01/09/1970\\\",\\n    \\\"genero\\\": \\\"M\\\",\\n    \\\"cartao\\\": \\\"N\\\",\\n    \\\"ultimo_abastecimento\\\": \\\"10/09/2018\\\",\\n    \\\"total_abastecido\\\": \\\"290,00\\\"\\n  };\\n\\nawait InngageSDK.subscribe(\\n   appToken: 'Trocar pelo App_Token do aplicativo',\\n   friendlyIdentifier: ‘[email protected]’,\\n   customFields: json,\\n   navigatorKey: navigatorKey,\\n );\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"4. InngageWebViewProperties\"\n}\n[/block]\nA SDK deve permitir ao desenvolvedor que está integrando a SDK, customizar a webview e deixar mais amigável e com a cara do teu app 😉, vamos explorar estas propriedades? \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"final inngageWebViewProperties = InngageWebViewProperties(\\n    appBarColor: Colors.pink,\\n    appBarText: Text(\\n      'AppTitle',\\n    ),\\n    backgroundColor: Colors.white,\\n    loaderColor: Colors.pink,\\n    debuggingEnabled: true,\\n    withJavascript: true,\\n    withLocalStorage: true,\\n    withZoom: true,\\n  );\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nTodos são parâmetros opcionais e maioria deles tem defaults caso voce não precisar customizar:\n\n**appBarColor:** Opção para mudar a cor do app bar, a barra superior de navegação\n**appBarText:** Opção para colocar um Texto na barra superior de navegação, podendo assim ganhar todo o poder do flutter (fontsize,styles,etc).\n**backgroundColor:** Opção para alterar a cor do fundo da pagina da webview por default é white.\n**loaderColor:** Opção para alterar a cor do loading da webview, a sdk utiliza o CircularProgressIndicator como componente de loading.\n**customLoading:** Aqui deixamos uma propriedade bem legal caso você queira utilizar sua própria animação de loaging, ele recebe um widget como parâmetro, quando aplicada ele vai ignorar o loaderDefault do app e utilizar o componente que voce utilizar.","updates":[],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5f5e76023694310012924549","createdAt":"2020-09-13T19:41:54.633Z","user":"5724b9982ad0bc17001227fa","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Flutter SDK","slug":"flutter","order":6,"from_sync":false,"reference":false,"_id":"5f5e716dcc85f9004a4fa193","createdAt":"2020-09-13T19:22:21.320Z","version":"57240e292887bb0e00bb9d96","project":"57240e292887bb0e00bb9d93","__v":0},"version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["57240e292887bb0e00bb9d97","57241b7deae5090e00ee6249","57241c06eae5090e00ee624a","57242abb2ad0bc170012279b","5734d18c7b9859320047f4b1","57688cc71f818b0e00695efb","577ead2ca74eb40e00d97bca","57b66af649a12a0e007b461b","597e5f8f13505b0014251a79","59964eb2f824b4000f961fbe","5a15ab12f2643f001ee8737c","5ab1151799750500797334e0","5c597e8b0abe110014bf1a11","5e395a05470bc3002d78d886","5e42a9647515f300509a594d","5f5e716dcc85f9004a4fa193","5f6dd615c624d800180bd237","5f984feb8aed05003a0032dc","60ac0e9c4c04970016613c6c"],"_id":"57240e292887bb0e00bb9d96","createdAt":"2016-04-30T01:45:13.341Z","project":"57240e292887bb0e00bb9d93","releaseDate":"2016-04-30T01:45:13.341Z","__v":19},"project":"57240e292887bb0e00bb9d93","__v":0,"parentDoc":null}