<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Rodrigo Castro</title>
    <description>The latest articles on DEV Community by Rodrigo Castro (@rodrigocastro_o).</description>
    <link>https://dev.to/rodrigocastro_o</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG</url>
      <title>DEV Community: Rodrigo Castro</title>
      <link>https://dev.to/rodrigocastro_o</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/rodrigocastro_o"/>
    <language>en</language>
    <item>
      <title>How I migrated the icon font generation in my Flutter app and why</title>
      <dc:creator>Rodrigo Castro</dc:creator>
      <pubDate>Wed, 01 Nov 2023 10:51:22 +0000</pubDate>
      <link>https://dev.to/rodrigocastro_o/how-i-migrated-the-icon-font-generation-in-my-flutter-app-and-why-3al7</link>
      <guid>https://dev.to/rodrigocastro_o/how-i-migrated-the-icon-font-generation-in-my-flutter-app-and-why-3al7</guid>
      <description>&lt;p&gt;Versão em Português:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/rodrigocastro_o/como-eu-migrei-o-modo-de-gerar-as-fontes-de-icones-no-meu-app-flutter-e-o-porque-2g68" class="crayons-story__hidden-navigation-link"&gt;Como eu migrei o modo de gerar as fontes de ícones no meu app Flutter e o porquê&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/rodrigocastro_o" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" alt="rodrigocastro_o profile" class="crayons-avatar__image" width="400" height="400"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/rodrigocastro_o" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Rodrigo Castro
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Rodrigo Castro
                
              
              &lt;div id="story-author-preview-content-1653402" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/rodrigocastro_o" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" class="crayons-avatar__image" alt="" width="400" height="400"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Rodrigo Castro&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/como-eu-migrei-o-modo-de-gerar-as-fontes-de-icones-no-meu-app-flutter-e-o-porque-2g68" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Nov 1 '23&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/rodrigocastro_o/como-eu-migrei-o-modo-de-gerar-as-fontes-de-icones-no-meu-app-flutter-e-o-porque-2g68" id="article-link-1653402"&gt;
          Como eu migrei o modo de gerar as fontes de ícones no meu app Flutter e o porquê
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/flutter"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;flutter&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/icons"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;icons&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/tutorial"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;tutorial&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/dart"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;dart&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/como-eu-migrei-o-modo-de-gerar-as-fontes-de-icones-no-meu-app-flutter-e-o-porque-2g68" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;3&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/rodrigocastro_o/como-eu-migrei-o-modo-de-gerar-as-fontes-de-icones-no-meu-app-flutter-e-o-porque-2g68#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            3 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


&lt;p&gt;In the project I'm currently working on, we use a font just for icons. One way we found to generate these fonts was to submit all the SVGs to &lt;a href="https://www.fluttericon.com/" rel="noopener noreferrer"&gt;https://www.fluttericon.com/&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;The process basically involved:&lt;br&gt;
1) Getting the SVG from the designer&lt;br&gt;
2) Updating the site with the latest config.json&lt;br&gt;
3) Inserting the new icon&lt;br&gt;
4) Downloading the updated icon font&lt;br&gt;
5) Copy and replace the new files (font, config.json and icons.dart) into the project, which sometimes required adjusting some things manually.&lt;/p&gt;
&lt;h2&gt;
  
  
  What are the problems with this approach?
&lt;/h2&gt;

&lt;p&gt;Our team currently consists of 5 Flutter developers and sometimes developers would create PRs where they both added icons and of course there were conflicts when it came to resolving these merges. The first developer to submit their changes would do fine, while the next person would have to deal with the conflicts manually, sometimes it was better to redo the whole process mentioned above, to resolve the conflicts more easily. I think this problem happened to me a few times and so I tried to find a more efficient way of doing this process.&lt;/p&gt;
&lt;h2&gt;
  
  
  Which approaches should I take?
&lt;/h2&gt;

&lt;p&gt;Searching for alternatives to improve this process, making it easier to generate the icons by thinking about automating most of the process, I found this lib dart &lt;a href="https://pub.dev/packages/icon_font_generator" rel="noopener noreferrer"&gt;https://pub.dev/packages/icon_font_generator&lt;/a&gt; that "under the hood" uses nodeJS to generate the icons, and I realized that the result was exactly what we were expecting, but it would solve everything in a command line to generate, without the need to open the Flutter Icon site. All we would need to input was the folder with all the SVGs to be able to generate our font locally.&lt;/p&gt;

&lt;p&gt;There was just one small problem...&lt;/p&gt;
&lt;h2&gt;
  
  
  Where are my SVGs?
&lt;/h2&gt;

&lt;p&gt;Right at the start I ran into a very big problem. The SVG icons are used to generate the font and configuration files, but there's no way to download the SVGs back from fluttericon.com.&lt;/p&gt;

&lt;p&gt;That's when I came across an excellent article by a developer called Sara, on how to retrieve SVG files from font-generating sites. It wasn't exactly about fluttericon.com, but it was something that caught my eye.&lt;/p&gt;

&lt;p&gt;Link to her article:&lt;br&gt;
&lt;a href="https://www.sarasoueidan.com/blog/icon-fonts-to-svg/" rel="noopener noreferrer"&gt;https://www.sarasoueidan.com/blog/icon-fonts-to-svg/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Reading more about the article I realized that Flutter Icon is a fork of Fontello, one of the sites mentioned by Sara in the article.&lt;/p&gt;

&lt;p&gt;Briefly, following the article:&lt;br&gt;
1) upload the FlutterIcon config.json file in Fontello&lt;br&gt;
2) download the fonts from Fontello&lt;br&gt;
3) Import the Fontello fonts into Icomoon.app&lt;br&gt;
4) Select all the icons and download them in SVG format&lt;/p&gt;

&lt;p&gt;This way I got the SVGs back, whew!&lt;/p&gt;
&lt;h2&gt;
  
  
  Putting the Icon Font Generator package to work
&lt;/h2&gt;

&lt;p&gt;First I installed IconFontGenerator as global&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;dart pub get activate icon_font_generator
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, I downloaded NodeJS via brew (MacOS):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;brew &lt;span class="nb"&gt;install &lt;/span&gt;node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Just to be sure, I checked to see if it was pointing correctly (what was expected was something like &lt;code&gt;/opt/homebrew/bin/node&lt;/code&gt;).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;which node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Result:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;/opt/homebrew/opt/node@18/bin/node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Perfect, the last step is to run the icon_font_generator:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;icon_font_generator &lt;span class="nt"&gt;--from&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;./assets/icons/svg &lt;span class="nt"&gt;--class-name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;MyProjectIcons &lt;span class="nt"&gt;--out-font&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;./assets/icons/MyProjectIcons.ttf &lt;span class="nt"&gt;--out-flutter&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;./assets/icons/MyProject_icons.dart &lt;span class="nt"&gt;--naming-strategy&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;camel
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Everything worked, and now our icon font generation process is much simpler and faster. &lt;/p&gt;

&lt;p&gt;I hope this has helped you&lt;/p&gt;

&lt;p&gt;Until next time,&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>icons</category>
      <category>tutorial</category>
      <category>dart</category>
    </item>
    <item>
      <title>Como eu migrei o modo de gerar as fontes de ícones no meu app Flutter e o porquê</title>
      <dc:creator>Rodrigo Castro</dc:creator>
      <pubDate>Wed, 01 Nov 2023 10:41:09 +0000</pubDate>
      <link>https://dev.to/rodrigocastro_o/como-eu-migrei-o-modo-de-gerar-as-fontes-de-icones-no-meu-app-flutter-e-o-porque-2g68</link>
      <guid>https://dev.to/rodrigocastro_o/como-eu-migrei-o-modo-de-gerar-as-fontes-de-icones-no-meu-app-flutter-e-o-porque-2g68</guid>
      <description>&lt;p&gt;English version:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/rodrigocastro_o/how-i-migrated-the-icon-font-generation-in-my-flutter-app-and-why-3al7" class="crayons-story__hidden-navigation-link"&gt;How I migrated the icon font generation in my Flutter app and why&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/rodrigocastro_o" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" alt="rodrigocastro_o profile" class="crayons-avatar__image" width="400" height="400"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/rodrigocastro_o" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Rodrigo Castro
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Rodrigo Castro
                
              
              &lt;div id="story-author-preview-content-1653417" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/rodrigocastro_o" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" class="crayons-avatar__image" alt="" width="400" height="400"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Rodrigo Castro&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/how-i-migrated-the-icon-font-generation-in-my-flutter-app-and-why-3al7" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Nov 1 '23&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/rodrigocastro_o/how-i-migrated-the-icon-font-generation-in-my-flutter-app-and-why-3al7" id="article-link-1653417"&gt;
          How I migrated the icon font generation in my Flutter app and why
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/flutter"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;flutter&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/icons"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;icons&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/tutorial"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;tutorial&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/dart"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;dart&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/how-i-migrated-the-icon-font-generation-in-my-flutter-app-and-why-3al7" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;8&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/rodrigocastro_o/how-i-migrated-the-icon-font-generation-in-my-flutter-app-and-why-3al7#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            3 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


&lt;p&gt;No projeto que atualmente trabalho a gente utiliza uma fonte só para ícones. Um jeito que achamos para gerar essas fontes foi submeter todos os SVGs para o site &lt;a href="https://www.fluttericon.com/" rel="noopener noreferrer"&gt;https://www.fluttericon.com/&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;O processo basicamente envolvia:&lt;br&gt;
1) Pegar o SVG com o designer&lt;br&gt;
2) Atualizar o site com o config.json mais atual&lt;br&gt;
3) Inserir o ícone novo&lt;br&gt;
4) Baixar a fonte dos ícone atualizadas&lt;br&gt;
5) Copiar e substituir os novos arquivos (fonte, config.json e icons.dart) para dentro do projeto, o que as vezes precisava ajustar alguma coisa manualmente.&lt;/p&gt;
&lt;h2&gt;
  
  
  Quais os problemas com essa abordagem?
&lt;/h2&gt;

&lt;p&gt;O nosso time atualmente é composto por 5 desenvolvedores Flutter e as vezes os desenvolvedores criavam PRs onde ambos adicionavam ícones e é claro que aconteciam conflitos na hora de resolver esses merges. O primeiro desenvolvedor a submeter suas mudanças se dava bem, já a próxima pessoa teria que tratar os conflitos manualmente, as vezes era melhor refazer todo o processo citado acima, para resolver os conflitos de maneira mais fácil. Acho que esse problema aconteceu algumas vezes só comigo e então eu tentei procurar uma maneira mais eficiente de fazer esse processo.&lt;/p&gt;
&lt;h2&gt;
  
  
  Quais abordagens seguir?
&lt;/h2&gt;

&lt;p&gt;Pesquisando alternativas para melhorar esse processo, deixando mais fácil para gerar os ícones pensando em automatizar a maior parte do processo eu encontrei essa lib dart &lt;a href="https://pub.dev/packages/icon_font_generator" rel="noopener noreferrer"&gt;https://pub.dev/packages/icon_font_generator&lt;/a&gt; que "por baixo do motor" utiliza nodeJS para gerar os ícones, e eu percebi que o resultado era exatamente o que estávamos esperando, mas resolveria tudo em uma linha de comando para gerar, sem a necessidade de abrir o site Flutter Icon. Tudo que precisaríamos de input era a pasta com todos os SVGs para conseguirmos gerar a nossa fonte localmente.&lt;/p&gt;

&lt;p&gt;Só tinha um pequeno problema...&lt;/p&gt;
&lt;h2&gt;
  
  
  Cadê os meus SVGs?
&lt;/h2&gt;

&lt;p&gt;Logo no começo me deparo com um problema bem grande. Os ícones SVG são usados para gerar a fonte e os arquivos de configuração, mas não existe um jeito de baixar os SVGs de volta no site fluttericon.com.&lt;/p&gt;

&lt;p&gt;Foi daí então que eu encontrei um artigo excelente de uma desenvolvedora chamada Sara, sobre como recuperar os arquivos SVGs de sites geradores de fontes. Não era algo exatamente sobre o fluttericon.com, mas foi algo que me chamou a atenção.&lt;/p&gt;

&lt;p&gt;Link do artigo dela:&lt;br&gt;
&lt;a href="https://www.sarasoueidan.com/blog/icon-fonts-to-svg/" rel="noopener noreferrer"&gt;https://www.sarasoueidan.com/blog/icon-fonts-to-svg/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Lendo mais sobre o artigo eu me dei conta que o Flutter Icon é um fork do Fontello, um dos sites citados pela Sara no artigo.&lt;/p&gt;

&lt;p&gt;Resumidamente, seguindo o artigo:&lt;br&gt;
1) subir o arquivo config.json do FlutterIcon no Fontello&lt;br&gt;
2) baixar as fontes no Fontello&lt;br&gt;
3) Importar as fontes do Fontello no Icomoon.app&lt;br&gt;
4) Selecionar todos os ícones e baixar todos em formato SVG&lt;/p&gt;

&lt;p&gt;Deste modo eu consegui os SVGs de volta, ufa!&lt;/p&gt;
&lt;h2&gt;
  
  
  Botando o pacote Icon Font Generator pra trabalhar
&lt;/h2&gt;

&lt;p&gt;Primeiro instalei o IconFontGenerator como global&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;dart pub get activate icon_font_generator
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Em seguida, baixei o NodeJS pelo brew (MacOS):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;brew &lt;span class="nb"&gt;install &lt;/span&gt;node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Só pra ter certeza, dei um confere para ver se tava apontando corretamente (o esperado era algo parecido com &lt;code&gt;/opt/homebrew/bin/node&lt;/code&gt;).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;which node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Resultado:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$ &lt;/span&gt;/opt/homebrew/opt/node@18/bin/node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Perfeito, ultimo passo é só rodar o icon_font_generator:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;icon_font_generator &lt;span class="nt"&gt;--from&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;./assets/icons/svg &lt;span class="nt"&gt;--class-name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;MeuProjetoIcons &lt;span class="nt"&gt;--out-font&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;./assets/icons/MeuProjetoIcons.ttf &lt;span class="nt"&gt;--out-flutter&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;./assets/icons/meu_projeto_icons.dart &lt;span class="nt"&gt;--naming-strategy&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;camel
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Deu tudo certo, agora o nosso processo de geração da fonte de ícones é muito mais simples e rápido. &lt;/p&gt;

&lt;p&gt;Espero que isso tenha te ajudado&lt;/p&gt;

&lt;p&gt;Até a próxima,&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>icons</category>
      <category>tutorial</category>
      <category>dart</category>
    </item>
    <item>
      <title>Notebook de bambu</title>
      <dc:creator>Rodrigo Castro</dc:creator>
      <pubDate>Sun, 23 Apr 2023 16:08:06 +0000</pubDate>
      <link>https://dev.to/rodrigocastro_o/notebook-de-bambu-2m4b</link>
      <guid>https://dev.to/rodrigocastro_o/notebook-de-bambu-2m4b</guid>
      <description>&lt;h2&gt;
  
  
  Culto a carga
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6m7jr1bektlente3rmg2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6m7jr1bektlente3rmg2.png" alt=" " width="497" height="375"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Desde que conheci o podcast &lt;a href="https://www.boanoiteinternet.com.br/" rel="noopener noreferrer"&gt;Boa Noite Internet&lt;/a&gt;, me apaixonei pela narrativa do Cris Dias, e um dos episódios mais marcantes pra mim, foi o episódio chamado "&lt;a href="https://www.boanoiteinternet.com.br/2018/11/30/001-avioes-de-bambu/" rel="noopener noreferrer"&gt;Aviões de Bambu&lt;/a&gt;". &lt;/p&gt;

&lt;p&gt;Nesse episódio é retratada a história dos moradores de ilhas no pacífico, que no período da segunda guerra mundial, tiveram contato contato imediato com tecnologias como aviões, rádio, armas de fogo. E que para eles, todas aquelas tecnologias foram enviadas pelos deuses.&lt;/p&gt;

&lt;p&gt;Mas isso não durou muito, ao fim da guerra, as bases militares dessas ilhas rapidamente foram desfeitas. E do dia para a noite, toda aquela tecnologia sumiu. E eles, de maneira totalmente desesperada começaram a fazer o culto da carga. Imitando os soldados da melhor maneira que eles podiam, com capacetes de coco e aviões de bambu, para que a comida que surgia da barriga dos gigantes pássaros de ferro, voltassem a aparecer. &lt;/p&gt;

&lt;h2&gt;
  
  
  E você, já fez culto a carga?
&lt;/h2&gt;

&lt;p&gt;Eu lembro que no início da minha carreira eu sempre via um ou outro programador com MacBook e pensava comigo mesmo. Um dia eu vou ser um programador tão bom quanto esse cara ai, como eu faço para chegar, lá? Comprando um MacBook, é claro. &lt;/p&gt;

&lt;p&gt;Mas para que eu preciso de um MacBook? Na época eu era desenvolvedor Android Nativo, o qual esse desenvolvimento poderia ser feito em qualquer sistema operacional. &lt;br&gt;
Até que um dia, tive a oportunidade de ter um MacBook para chamar de meu. Coloquei na minha cabeça, que iria começar a desenvolver para iOS também, fiz um ou outro curso mas logo em seguida o estudo nunca foi pra frente. &lt;/p&gt;

&lt;p&gt;Vale ressaltar que eu me considero um bom profissional, mas as vezes parece que eu sou que nem um ilhéu do pacífico. É só sair um modelo novo de computador e eu já vou lá usar meu capacete de coco.&lt;/p&gt;

&lt;h2&gt;
  
  
  O caminho certo é o caminho mais rápido
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu2w8lfvp75hk6ur2ucun.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu2w8lfvp75hk6ur2ucun.gif" alt=" " width="630" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Já dizia o He-man, que o caminho correto para o sucesso é o trabalho duro e dedicação em programação, assim como em qualquer outra área. &lt;/p&gt;

&lt;p&gt;Gostaria de citar alguns cases aqui para que caso eu queira iniciar um novo culto a carga eu pare e reflita antes disso.&lt;/p&gt;

&lt;p&gt;Lembro que teve um case de um &lt;a href="https://g1.globo.com/economia/tecnologia/noticia/2021/03/09/como-brasileiro-virou-programador-usando-celulares-quebrados.ghtml" rel="noopener noreferrer"&gt;programador autodidata&lt;/a&gt; que programava com teclado e mouse em um celular Android usando cabo OTG, e que por meio de seu esforço, conseguiu ser contratado por uma grande Fintech do Brasil.&lt;/p&gt;

&lt;h2&gt;
  
  
  Como ser um dev melhor?
&lt;/h2&gt;

&lt;p&gt;Acho que primeiro ponto é ter um bom planejamento de estudo, assim você consegue construir qual caminho você deve trilhar e deste modo é possível visualizar o quão distante está do objetivo. &lt;/p&gt;

&lt;p&gt;A &lt;a href="https://www.alura.com.br/" rel="noopener noreferrer"&gt;Alura&lt;/a&gt; criou um projeto open-source muito interessante há meses atrás, que é o &lt;a href="https://techguide.sh/" rel="noopener noreferrer"&gt;TechGuide&lt;/a&gt;. É algo que consegue ajudar as pessoas a se guiarem e entenderem quais skills faltam para se tornar profissional naquela área específica.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusão
&lt;/h2&gt;

&lt;p&gt;Não tem jeito, o He-man está certo, a gente precisa criar um hábito de estudar constantemente, para nos mantermos atualizados. Algumas das práticas que busco praticar são: ter um pet project, &lt;a href="https://codingdojo.org/" rel="noopener noreferrer"&gt;coding dojos&lt;/a&gt;, solucionar problemas de programação no &lt;a href="https://exercism.org/" rel="noopener noreferrer"&gt;Exercism&lt;/a&gt;, participar ativamente de comunidades (isso eu preciso melhorar), e por aí vai. Até posts como esse aqui é algo que quero fazer mais frequentemente. Aguarde que virão alguns posts de Flutter em breve.&lt;/p&gt;

&lt;p&gt;Agradeço a atenção e até a próxima.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Publishing your Flutter apps into GitHub pages</title>
      <dc:creator>Rodrigo Castro</dc:creator>
      <pubDate>Tue, 04 Oct 2022 08:31:39 +0000</pubDate>
      <link>https://dev.to/rodrigocastro_o/publishing-your-flutter-apps-into-github-pages-1l61</link>
      <guid>https://dev.to/rodrigocastro_o/publishing-your-flutter-apps-into-github-pages-1l61</guid>
      <description>&lt;p&gt;Versão em português: &lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/rodrigocastro_o/publicando-suas-aplicacoes-flutter-no-github-pages-268f" class="crayons-story__hidden-navigation-link"&gt;Publicando suas aplicações Flutter no GitHub Pages&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/rodrigocastro_o" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" alt="rodrigocastro_o profile" class="crayons-avatar__image" width="400" height="400"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/rodrigocastro_o" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Rodrigo Castro
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Rodrigo Castro
                
              
              &lt;div id="story-author-preview-content-1210442" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/rodrigocastro_o" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" class="crayons-avatar__image" alt="" width="400" height="400"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Rodrigo Castro&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/publicando-suas-aplicacoes-flutter-no-github-pages-268f" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Oct 4 '22&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/rodrigocastro_o/publicando-suas-aplicacoes-flutter-no-github-pages-268f" id="article-link-1210442"&gt;
          Publicando suas aplicações Flutter no GitHub Pages
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/tutorial"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;tutorial&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/flutter"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;flutter&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/dart"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;dart&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/publicando-suas-aplicacoes-flutter-no-github-pages-268f" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;5&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/rodrigocastro_o/publicando-suas-aplicacoes-flutter-no-github-pages-268f#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            5 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


&lt;h2&gt;
  
  
  Long, long time ago...
&lt;/h2&gt;

&lt;p&gt;In a far far away land, when Flutter web used to be something experimental yet, and I was looking for somewhere to publish my Flutter app into Github pages.&lt;/p&gt;

&lt;p&gt;But now with Flutter 3.3.3, Flutter web is already stable long time ago, decided to see what has changed. I took the opportunity to document here everything I learned.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is this GitHub pages?
&lt;/h2&gt;

&lt;p&gt;Essentially is one approach that GitHub offers you to promote your repository, as a webpage to your code, it can be a landing page, documentation or whatever you want. It's possible to do that in every repository, including a "secret" repository that consists on naming it as &lt;code&gt;&amp;lt;your_github_username&amp;gt;.github.io&lt;/code&gt;, and if you create one GitHub page in this repository, it will be your home page and the other repositories always will be &lt;code&gt;&amp;lt;your_github_username&amp;gt;.github.io/other_repo_name/&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;I remember that it was cool, long time ago, when the developers used to have their blogs made with static websites into GitHub using Jekyll framework, it was really popular at that moment, I remember that I used to find some cools plugins and themes to customise my blog.&lt;/p&gt;

&lt;p&gt;Now (not really now) it's possible to publish your app into GitHub pages, and have your own web app.&lt;/p&gt;

&lt;h2&gt;
  
  
  Source code
&lt;/h2&gt;

&lt;p&gt;The source code used in this article will be available in this link: &lt;a href="https://github.com/castrors/flutter_web" rel="noopener noreferrer"&gt;https://github.com/castrors/flutter_web&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Option 1: Peanut
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://pub.dev/packages/peanut
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;it's a tool that makes the application build and updates/create a  &lt;code&gt;gh-pages&lt;/code&gt; branch.&lt;/p&gt;

&lt;p&gt;In my case, I had to follow these steps: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Install peanut
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="n"&gt;flutter&lt;/span&gt; &lt;span class="n"&gt;pub&lt;/span&gt; &lt;span class="n"&gt;global&lt;/span&gt; &lt;span class="n"&gt;activate&lt;/span&gt; &lt;span class="n"&gt;peanut&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Run the peanut command line with one extra parameter, because my repository will be available at &lt;a href="https://castrors.github.io/flutter_web/" rel="noopener noreferrer"&gt;https://castrors.github.io/flutter_web/&lt;/a&gt;, that is different than the default that is &lt;code&gt;/&lt;/code&gt;, that's why I needed to give this base-href extra parameter too.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="n"&gt;flutter&lt;/span&gt; &lt;span class="n"&gt;pub&lt;/span&gt; &lt;span class="n"&gt;global&lt;/span&gt; &lt;span class="n"&gt;run&lt;/span&gt; &lt;span class="n"&gt;peanut&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="n"&gt;extra&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;args&lt;/span&gt; &lt;span class="s"&gt;"--base-href=/flutter_web/"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;In the end it will show that the gh-pages branch construction was completely successful, but you need to sync it in git.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;To push your gh-pages branch to github (without switching from your working branch), run:
  git push origin --set-upstream gh-pages
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;It's just run this command, and your local branch will be synced with the remote and that's it, you just need to wait. You can see that there is one GitHub action running, called &lt;code&gt;pages build and deployment&lt;/code&gt;. It's responsible to pick-up your selected branch, in this example &lt;code&gt;gh-pages&lt;/code&gt;, and publish it as the page of your repository. &lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;If for some reason you cannot find this GitHub action, maybe it's because the GitHub page was not configured in your repository. To fix that you need to go into your repository -&amp;gt; Settings -&amp;gt; Pages and select the branch you want to build your GitHub page.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj334evmpktm5vxhposx5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj334evmpktm5vxhposx5.png" alt="GitHub pages settings page" width="800" height="518"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Success! The Flutter web application is alarde published, checkout this link: &lt;a href="https://castrors.github.io/flutter_web/#/" rel="noopener noreferrer"&gt;https://castrors.github.io/flutter_web/#/&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftpgiqxuja80s9y499u9b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftpgiqxuja80s9y499u9b.png" alt="Flutter web application running, with the initial counter app with the default color, which is blue" width="566" height="626"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.gifer.com%2F7RWA.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.gifer.com%2F7RWA.gif" alt="It's alive" width="200" height="109"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Option 2: GitHub actions
&lt;/h2&gt;

&lt;p&gt;In this alternative we are going to create one workflow that will have as trigger, any update into the &lt;code&gt;main&lt;/code&gt; branch, so follow all of these steps to publish the GitHub page.&lt;/p&gt;

&lt;p&gt;Let's go, open your repository into the GitHub website and follow these steps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;First, click into the tab Actions, just bellow the repository name and then click into &lt;code&gt;New workflow&lt;/code&gt;.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuhzfspkiq4fv9e23q2h1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuhzfspkiq4fv9e23q2h1.png" alt="GitHub actions menu" width="607" height="222"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Select the option to create the workflow by yourself &lt;code&gt;set up a workflow yourself&lt;/code&gt;. &lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fll2y8ywj0u50zy8pzqa1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fll2y8ywj0u50zy8pzqa1.png" alt="Action creation menu" width="437" height="208"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You will see this screen here. First, in the top rename the file, if you want. I'll change it to &lt;code&gt;deploy_github_page&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xryli6lbggxdd7vqf2h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xryli6lbggxdd7vqf2h.png" alt="GitHub action creation screen, in edit mode" width="800" height="788"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Delete all the content of this file and replace with this code bellow:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;name: Flutter Web Deploy
on:
  push:
    branches:
      - main
jobs:
  build:    
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: subosito/flutter-action@v2
      - run: flutter build web --release --base-href /flutter_web/
      - run: git config user.name github-actions
      - run: git config user.email github-actions@github.com
      - run: git --work-tree build/web add --all
      - run: git commit -m "Automatic deployment by github-actions"
      - run: git push origin HEAD:gh-pages --force

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Code changed, we are ready to submit the changes, create a commit or PR directly the GitHub to save the changes, in my case I'm going to save it directly into the main branch.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dkkb3m192hrrufre5e4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dkkb3m192hrrufre5e4.png" alt="Commit changes menu" width="800" height="409"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Is it ready? Yes, now we just need to change any UI component into our application so we can proof that the workflow is working properly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7k32ry5j1h60zzrj56r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7k32ry5j1h60zzrj56r.png" alt="Commit showing the color change from blue to green" width="781" height="488"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2mt15w4xjm3npziy2xcw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2mt15w4xjm3npziy2xcw.png" alt="Screen showing all the GitHub actions steps, all successfully executed" width="673" height="653"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All the workflow steps were satisfied and in the end it updates our application that has it's primary color as green instead of blue.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzpws7kvb6t6axflnxqsa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzpws7kvb6t6axflnxqsa.png" alt="Again the flutter application running, but this time with the primary color as green" width="571" height="631"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Pros and Cons of these approaches
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.gifer.com%2F3RFR.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.gifer.com%2F3RFR.gif" alt="Nazaré Tedesco thinking in some math formulas" width="305" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Peanut is the simplest solution, because it takes just two command lines and you already have your &lt;code&gt;gh-pages&lt;/code&gt; branch updated. But we have to consider that we are humans and probably we would forget to run these command lines and your application will not be updated.&lt;/p&gt;

&lt;p&gt;In another way, with GitHub action everything runs automatically, but it takes really more time, and you have to consider once your application is growing, it will take more time to run the workflow too. But these steps will never be forgotten, because every time you update your main branch it will trigger these action once again.&lt;/p&gt;

&lt;h2&gt;
  
  
  Use this knowledge to go further
&lt;/h2&gt;

&lt;p&gt;GitHub pages is not the only option to deploy your Flutter web app, you can give a try in other services like:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://firebase.google.com/products/hosting" rel="noopener noreferrer"&gt;Firebase Hosting&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.netlify.com" rel="noopener noreferrer"&gt;Netlify&lt;/a&gt;&lt;br&gt;
&lt;a href="https://docs.codemagic.io/flutter-publishing/publishing-to-codemagic-static-pages/" rel="noopener noreferrer"&gt;Codemagic Static Pages&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;I hope I can help someone with this content, use both approaches wisely, or only one of them,  depends on your use case.&lt;/p&gt;

&lt;p&gt;See you soon!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.gifer.com%2F6I9a.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fi.gifer.com%2F6I9a.gif" alt="Hagrid waving his hands, saying bye!" width="245" height="170"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>flutter</category>
      <category>dart</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Publicando suas aplicações Flutter no GitHub Pages</title>
      <dc:creator>Rodrigo Castro</dc:creator>
      <pubDate>Tue, 04 Oct 2022 06:53:31 +0000</pubDate>
      <link>https://dev.to/rodrigocastro_o/publicando-suas-aplicacoes-flutter-no-github-pages-268f</link>
      <guid>https://dev.to/rodrigocastro_o/publicando-suas-aplicacoes-flutter-no-github-pages-268f</guid>
      <description>&lt;p&gt;English version: &lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/rodrigocastro_o/publishing-your-flutter-apps-into-github-pages-1l61" class="crayons-story__hidden-navigation-link"&gt;Publishing your Flutter apps into GitHub pages&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/rodrigocastro_o" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" alt="rodrigocastro_o profile" class="crayons-avatar__image" width="400" height="400"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/rodrigocastro_o" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Rodrigo Castro
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Rodrigo Castro
                
              
              &lt;div id="story-author-preview-content-1210456" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/rodrigocastro_o" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" class="crayons-avatar__image" alt="" width="400" height="400"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Rodrigo Castro&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/publishing-your-flutter-apps-into-github-pages-1l61" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Oct 4 '22&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/rodrigocastro_o/publishing-your-flutter-apps-into-github-pages-1l61" id="article-link-1210456"&gt;
          Publishing your Flutter apps into GitHub pages
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/flutter"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;flutter&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/dart"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;dart&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/tutorial"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;tutorial&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/publishing-your-flutter-apps-into-github-pages-1l61" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;7&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/rodrigocastro_o/publishing-your-flutter-apps-into-github-pages-1l61#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            5 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


&lt;h2&gt;
  
  
  A muito tempo atrás...
&lt;/h2&gt;

&lt;p&gt;Em uma terra muito distante, quando Flutter web era algo experimental ainda, e eu já tinha visto algumas maneiras de publicar o meu aplicativo Flutter no GitHub pages.&lt;/p&gt;

&lt;p&gt;Mas agora com o Flutter 3.3.3, Flutter web já estável há muito tempo, resolvi ver o que mudou. Vou aproveitar e documentar aqui o que aprendi.&lt;/p&gt;

&lt;h2&gt;
  
  
  O que é esse tal de Github pages?
&lt;/h2&gt;

&lt;p&gt;Essencialmente é uma maneira que o GitHub oferece para você divulgar o seu repositório, seja com uma página do seu código, seja uma landing page, documentação ou o que quer que seja. Em todo repositório é possível fazer isso, inclusive um repositório "secreto" que consiste em ter o nome &lt;code&gt;&amp;lt;sua_conta_do_github&amp;gt;.github.io&lt;/code&gt;, e se voce criar uma GitHub page nesse repositório, ele será a sua página inicial e outros repositórios sempre serão &lt;code&gt;&amp;lt;sua_conta_do_github&amp;gt;.github.io/nome_de_outro_repo/&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Eu lembro que era modinha a muito tempo atrás, quando os programadores tinham os seus blogs feitos em sites estáticos no GitHub usando um tal de framework Jekyll, era a sensação&lt;br&gt;
do momento, eu lembro que eu até procurava plugins e temas bem legais para criar o meu blog bem bonito.&lt;/p&gt;

&lt;p&gt;Agora (faz tempo já) é possível publicar seu aplicativo no GitHub pages, pra chamar de seu!&lt;/p&gt;

&lt;h2&gt;
  
  
  Código
&lt;/h2&gt;

&lt;p&gt;O código utilizado neste artigo estará disponibilizado neste link aqui: &lt;a href="https://github.com/castrors/flutter_web" rel="noopener noreferrer"&gt;https://github.com/castrors/flutter_web&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Opção 1: Peanut
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;https://pub.dev/packages/peanut
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;é uma ferramenta que faz o build da aplicação e atualiza/cria a branch &lt;code&gt;gh-pages&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;No meu caso, eu tive que seguir esses seguintes passos:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Instalar o peanut
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="n"&gt;flutter&lt;/span&gt; &lt;span class="n"&gt;pub&lt;/span&gt; &lt;span class="n"&gt;global&lt;/span&gt; &lt;span class="n"&gt;activate&lt;/span&gt; &lt;span class="n"&gt;peanut&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Rodar o peanut com um parâmetro extra, pois o meu repositório estará disponibilizado em &lt;a href="https://castrors.github.io/flutter_web/" rel="noopener noreferrer"&gt;https://castrors.github.io/flutter_web/&lt;/a&gt;, ou seja é diferente do padrão que é &lt;code&gt;/&lt;/code&gt;, por isso precisei passar o parâmetro base-href também.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight dart"&gt;&lt;code&gt;&lt;span class="n"&gt;flutter&lt;/span&gt; &lt;span class="n"&gt;pub&lt;/span&gt; &lt;span class="n"&gt;global&lt;/span&gt; &lt;span class="n"&gt;run&lt;/span&gt; &lt;span class="n"&gt;peanut&lt;/span&gt; &lt;span class="o"&gt;--&lt;/span&gt;&lt;span class="n"&gt;extra&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="n"&gt;args&lt;/span&gt; &lt;span class="s"&gt;"--base-href=/flutter_web/"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Ao finalizar ele mostra que a construção da branch gh-pages foi efetuada com sucesso, porém precisa sincronizar essa branch no git.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;To push your gh-pages branch to github (without switching from your working branch), run:
  git push origin --set-upstream gh-pages
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;É só executar esse comando, que a sua branch local será sincronizada com a remota e é só aguardar. Você pode ver que tem uma GitHub action rodando, chamada &lt;code&gt;pages build and deployment&lt;/code&gt;. Ela é a responsável em pegar a branch selecionada, no caso gh-pages, e publicar como a página do seu repositório. &lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Se por algum motivo você não encontrar essa GitHub action, deve ser porque a GitHub page não foi configurada no seu repositório. Para resolver isso vá em seu repositório -&amp;gt; Settings -&amp;gt; Pages e selecione a branch a qual você quer construir a sua GitHub page. &lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj334evmpktm5vxhposx5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj334evmpktm5vxhposx5.png" alt="Pagina de configuração do GitHub pages" width="800" height="518"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Sucesso! A aplicação Flutter web está publicada, confira neste link: &lt;a href="https://castrors.github.io/flutter_web/#/" rel="noopener noreferrer"&gt;https://castrors.github.io/flutter_web/#/&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftpgiqxuja80s9y499u9b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftpgiqxuja80s9y499u9b.png" alt="Aplicação flutter web rodando, aplicativo contador inicial com a cor padrão, que é azul" width="566" height="626"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgh7i2e98cdyo4a55umpj.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgh7i2e98cdyo4a55umpj.gif" alt="It's alive" width="200" height="109"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Opção 2: GitHub actions
&lt;/h2&gt;

&lt;p&gt;Nessa alternativa iremos criar um fluxo de trabalho que irá ter como o gatilho, toda vez que a branch &lt;code&gt;main&lt;/code&gt; for atualizada, e então faça todos os passos necessários para publicarmos a GitHub page. &lt;/p&gt;

&lt;p&gt;Vamos lá, abra o seu repositório e siga esses passos&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Primeiro, clique na aba Actions, logo abaixo do nome do seu repositório e em seguida clique em &lt;code&gt;New workflow&lt;/code&gt;.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuhzfspkiq4fv9e23q2h1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuhzfspkiq4fv9e23q2h1.png" alt="Menu de actions do GitHub" width="607" height="222"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Selecione a opção de criar o fluxo você mesmo &lt;code&gt;set up a workflow yourself&lt;/code&gt;. &lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fll2y8ywj0u50zy8pzqa1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fll2y8ywj0u50zy8pzqa1.png" alt="Menu de criação de uma action" width="437" height="208"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Você verá essa tela aqui. Primeiro, na parte superior renomeie o nome do seu arquivo, caso queira. Eu mudarei para deploy_github_page.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xryli6lbggxdd7vqf2h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xryli6lbggxdd7vqf2h.png" alt="Tela de criação de uma GitHub action, em modo de edição" width="800" height="788"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Em seguida apague todo o conteúdo do arquivo e substitua por esse código abaixo:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;name: Flutter Web Deploy
on:
  push:
    branches:
      - main
jobs:
  build:    
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - uses: subosito/flutter-action@v2
      - run: flutter build web --release --base-href /flutter_web/
      - run: git config user.name github-actions
      - run: git config user.email github-actions@github.com
      - run: git --work-tree build/web add --all
      - run: git commit -m "Automatic deployment by github-actions"
      - run: git push origin HEAD:gh-pages --force

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Código alterado, estamos prontos para submeter as alterações, crie um commit ou PR diretamente pelo GitHub para salvar as alterações, no meu caso vou salvar diretamente na main.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dkkb3m192hrrufre5e4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0dkkb3m192hrrufre5e4.png" alt="Menu de criar commit das alterações" width="800" height="409"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tudo está pronto? Sim, agora só precisamos fazer alguma alteração visual em nosso código para que possamos ver o fluxo de trabalho acontecendo&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7k32ry5j1h60zzrj56r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg7k32ry5j1h60zzrj56r.png" alt="Commit mostrando a alteração da cor do aplicativo de azul para verde" width="781" height="488"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2mt15w4xjm3npziy2xcw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2mt15w4xjm3npziy2xcw.png" alt="Tela mostrando os passos do GitHub action, todos executados com sucesso" width="673" height="653"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Todos os passos do workflow foram satisfeitos e por fim ele atualiza nossa aplicação e que agora está com as cores predominantes de verde.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzpws7kvb6t6axflnxqsa.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzpws7kvb6t6axflnxqsa.png" alt="Novamente a aplicação flutter rodando, mas desta vez com as cores predominantes em verde" width="571" height="631"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Pros e contras das abordagens
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvtvtggfd661vuqrbwbvo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvtvtggfd661vuqrbwbvo.gif" alt="Nazaré Tedesco pensando nas fórmulas matemáticas" width="305" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A peanut é a mais simples, pois só exige dois comandos e já está com a branch &lt;code&gt;gh-pages&lt;/code&gt; atualizada. Porém é necessário fazer você mesmo esse comando, manualmente. E por sermos humanos provavelmente eventualmente esqueceremos de rodar esse comando e a nossa aplicação não será atualizada.&lt;/p&gt;

&lt;p&gt;De outro modo, com o GitHub action tudo roda automaticamente, mas ele é muito mais demorado, e conforme sua aplicação for crescendo, como por exemplo geração de código, isso fará com que esse workflow demore ainda mais. Mas esse passo jamais será esquecido, pois toda vez que a sua branch main for atualizada ele criará um gatilho para rodar esse action mais uma vez. &lt;/p&gt;

&lt;h2&gt;
  
  
  Use esse conhecimento para ir além
&lt;/h2&gt;

&lt;p&gt;GitHub pages provavelmente não é a única opção para publicar suas aplicações Flutter web, você pode testar esses outros serviços:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://firebase.google.com/products/hosting" rel="noopener noreferrer"&gt;Firebase Hosting&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.netlify.com" rel="noopener noreferrer"&gt;Netlify&lt;/a&gt;&lt;br&gt;
&lt;a href="https://docs.codemagic.io/flutter-publishing/publishing-to-codemagic-static-pages/" rel="noopener noreferrer"&gt;Codemagic Static Pages&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusão
&lt;/h2&gt;

&lt;p&gt;Espero que eu consiga ajudar alguém com esse conteúdo, use os dois sabiamente, ou só um dos dois, depende do seu caso de uso. &lt;/p&gt;

&lt;p&gt;Até a próxima!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxv2bf24cwrjgjp8shcqf.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxv2bf24cwrjgjp8shcqf.gif" alt="Hagrid dando tchau!" width="245" height="170"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>tutorial</category>
      <category>flutter</category>
      <category>dart</category>
    </item>
    <item>
      <title>Mudança de emprego na Alemanha 🇩🇪</title>
      <dc:creator>Rodrigo Castro</dc:creator>
      <pubDate>Tue, 24 May 2022 16:03:03 +0000</pubDate>
      <link>https://dev.to/rodrigocastro_o/mudanca-de-emprego-na-alemanha-10fo</link>
      <guid>https://dev.to/rodrigocastro_o/mudanca-de-emprego-na-alemanha-10fo</guid>
      <description>&lt;p&gt;Esse post é uma continuação desse post aqui:&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/rodrigocastro_o/como-vim-parar-na-alemanha--2ie3" class="crayons-story__hidden-navigation-link"&gt;Como vim parar na Alemanha 🇩🇪?&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/rodrigocastro_o" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" alt="rodrigocastro_o profile" class="crayons-avatar__image" width="400" height="400"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/rodrigocastro_o" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Rodrigo Castro
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Rodrigo Castro
                
              
              &lt;div id="story-author-preview-content-1067938" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/rodrigocastro_o" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F744114%2Fbe6d3b3a-b648-474b-8b54-0011364fde6e.JPG" class="crayons-avatar__image" alt="" width="400" height="400"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Rodrigo Castro&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/como-vim-parar-na-alemanha--2ie3" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;May 12 '22&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/rodrigocastro_o/como-vim-parar-na-alemanha--2ie3" id="article-link-1067938"&gt;
          Como vim parar na Alemanha 🇩🇪?
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/flutter"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;flutter&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/career"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;career&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/programming"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;programming&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/rodrigocastro_o/como-vim-parar-na-alemanha--2ie3" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;7&lt;span class="hidden s:inline"&gt; reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/rodrigocastro_o/como-vim-parar-na-alemanha--2ie3#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            4 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


&lt;p&gt;Se você não leu ainda, dá uma conferida lá, rapidinho :)&lt;/p&gt;

&lt;h2&gt;
  
  
  Introdução
&lt;/h2&gt;

&lt;p&gt;No momento que estou escrevendo esse post, faltam exatamente uma semana para eu sair do meu primeiro emprego aqui na Alemanha. &lt;/p&gt;

&lt;p&gt;Gostaria de compartilhar um pouco o motivo da mudança de emprego e a minha experiência morando aqui a procura de um novo trabalho.&lt;/p&gt;

&lt;h2&gt;
  
  
  Antes de me mudar pra Alemanha
&lt;/h2&gt;

&lt;p&gt;Eu estava meio infeliz como desenvolvedor Android nativo e estava procurando trabalhar com Flutter. No momento eu conseguia fazer algumas coisas com Flutter no trabalho, mas nada de um projeto de verdade que alguém usaria de fato. E então em paralelo com o processo seletivo da Alemanha, eu estava em um outro processo para uma empresa de banco no Brasil que já estava adotando Flutter fazia um tempo já. &lt;/p&gt;

&lt;p&gt;No final, não passei no processo dessa empresa brasileira mas passei na empresa Alemã. O engraçado é que se eu tivesse continuado por alguns meses nessa empresa que eu tava, ela seria adquirida por esse banco que eu não passei no processo seletivo. E eu seria funcionário deles, ironia do destino hehe.&lt;/p&gt;

&lt;h2&gt;
  
  
  Emprego dos sonhos
&lt;/h2&gt;

&lt;p&gt;Iniciei nesta empresa Alemã remotamente no início de abril de 2020, trabalhei sozinho por um tempo e logo depois entrou uma amiga desenvolvedora para trabalharmos junto. &lt;/p&gt;

&lt;p&gt;Qual era o desafio? Era refazer um aplicativo de gerenciamento de senhas, só que agora em Flutter. A configuração do time era pessoas que trabalhavam nas extensões do browser, backend e mobile nativos. &lt;/p&gt;

&lt;p&gt;O legal é que eu e essa amiga dev viemos de desenvolvimento nativo Android e conseguimos trazer bastante bagagem de aprendizado de lá. Tivemos total autonomia de arquiteturar o projeto, montar do jeito que gostariamos, com reatividade, testes e tudo mais.&lt;/p&gt;

&lt;p&gt;O aprendizado foi incrível, estávamos aprendendo demais a cada sprint que passava. Tínhamos coisas que gostaríamos de melhorar, para entregarmos as coisas ainda mais rápido e com mais qualidade. Tudo incrível, até que um dia tudo mudou.&lt;/p&gt;

&lt;h2&gt;
  
  
  A aquisição inesperada
&lt;/h2&gt;

&lt;p&gt;Um belo dia, o CEO da empresa informa que adquirimos uma empresa menor de segurança localizada em Londres. Nessa reunião foi muito clara quais os objetivos da união das empresas e como que seguiríamos os nossos projetos a primeiro momento.&lt;/p&gt;

&lt;h2&gt;
  
  
  A aquisição inesperada, vol. 2
&lt;/h2&gt;

&lt;p&gt;Na semana seguinte, uma reunião surpresa aparece de última hora e o CEO informa que nós e a empresa que acabamos de adquirir, fomos adquiridos por uma empresa de segurança dos EUA, mas dessa vez foi estranho. Não tivemos muito posicionamento de como que seriam as coisas. E ficamos aguardando novidades.&lt;/p&gt;

&lt;h2&gt;
  
  
  A negociação
&lt;/h2&gt;

&lt;p&gt;A empresa Americana teve a mesma idéia que tivemos em jogar fora o aplicativo nativo e escrever tudo denovo em uma aplicação híbrida, mas eles estavam com a idéia de adotar React Native. &lt;/p&gt;

&lt;p&gt;Foi aí então que nós do time de mobile, montamos um comparativo das ferramentas e tentamos discutir pros e contras sobre Flutter e React Native.&lt;/p&gt;

&lt;p&gt;Levei horas montando essa apresentação e no final de tudo me pareceu que só estávamos lá só por estar, pois a decisão já tinha vindo de cima, que descontinuaríamos o Flutter e seguiríamos com React Native.&lt;/p&gt;

&lt;h2&gt;
  
  
  A depressão
&lt;/h2&gt;

&lt;p&gt;Fiquei muito triste, pois o Flutter tinha sido descontinuado na empresa e teria que começar a estudar o React Native. &lt;/p&gt;

&lt;p&gt;O processo de acesso aos códigos foi bem demorado e eu consegui fazer vários cursos de React Native até lá. Achei interessante a ferramenta, mas ao iniciar no projeto de fato junto com o novo time percebi que seria uma jornada difícil. A cada dia que passava eu não me sentia produtivo, muito menos feliz.&lt;/p&gt;

&lt;p&gt;Dias e mais dias se passaram foi aí que eu percebi que eu estava realmente ficando triste ao trabalhar nessa empresa, que eu já não estava produzindo como eu gostaria. De certo modo até sinto que desaprendi a programar nesse último ano, me sinto mal só de lembrar das frustrações que tive.&lt;/p&gt;

&lt;h2&gt;
  
  
  A aceitação
&lt;/h2&gt;

&lt;p&gt;Com todos esses problemas eu percebi que já não tinha mais autonomia como antes, e que a única maneira seria procurar uma outra oportunidade de trabalho. &lt;/p&gt;

&lt;p&gt;Foi aí então que comecei a me atualizar nas novidades do Flutter e comecei a aplicar para várias vagas de Flutter na Alemanha.&lt;/p&gt;

&lt;h2&gt;
  
  
  Processos seletivos
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Empresa A
&lt;/h3&gt;

&lt;p&gt;Conversa normal com o RH, para alinharmos o meu background e expectativa salarial. Foi tudo bem nessa parte e agendamos uma conversa com um desenvolvedor, sobre assuntos técnicos de Flutter.&lt;/p&gt;

&lt;p&gt;Foi uma conversa muito legal com o desenvolvedor, foi cobrado vários tópicos bem baixo nível de flutter e eu falei a verdade quando não sabia responder, pois afinal fazia 1 ano que eu não estava trabalhando ativamente com Flutter. &lt;/p&gt;

&lt;p&gt;O desenvolvedor foi bem transparente e disse que gostaria de alguém que conseguisse responder todas as questões na ponta da lingua para seguir. Até me recomendou de estudar e reaplicar novamente em um mês.&lt;/p&gt;

&lt;h3&gt;
  
  
  Empresa B
&lt;/h3&gt;

&lt;p&gt;Conversa bem parecida com o RH também e em seguida uma conversa com um techlead, conversa muito parecida com a anterior também, porém menos técnica. Acredito que foi tudo bem e me pediram para implementar um desafio em Flutter e submeter em uma semana (não me lembro ao certo do prazo).&lt;/p&gt;

&lt;p&gt;Submeti o código na data exigida e até hoje não me avaliaram sobre o meu código e nem me deram negativa no processo. Vida que segue... &lt;/p&gt;

&lt;h3&gt;
  
  
  Empresa C
&lt;/h3&gt;

&lt;p&gt;Essa aqui foi rápida, o RH me mandou um e-mail com um link do calendly para escolher um melhor horário para conversarmos e em 2 dias ele mandou outro e-mail cancelando tudo, falando que não iriam seguir comigo no processo.&lt;/p&gt;

&lt;h3&gt;
  
  
  Empresa D
&lt;/h3&gt;

&lt;p&gt;Sabe quando você percebe quando a pessoa não gostou de você? Sei lá qual foi o motivo, mas esse foi assim. Durante a conversa com a RH, como de praxe fui apresentar a minha trajetória contei resumidamente e no instante que terminei a RH me diz que não conseguiu se concentrar direito na conversa, pois eu tinha um vício de linguagem disse muitos "E então...". Eu respirei fundo e falei: "Você me desculpe mas eu não sou nativo em Inglês". Mas senti um toque ácido nesse comentario, não falei nada e conversa que segue. Logo depois ela pergunta a pretensão salarial e eu prontamente respondo. Ela me diz: "Nossa, que salto salarial ein, é isso mesmo que você quer?". A conversa meio que acabou por aí, ela disse que ia passar meu perfil para o gestor e depois entrariam em contato comigo para continuarmos o processo. &lt;/p&gt;

&lt;p&gt;Acredito que ela já me excluiu do processo logo ali. Mas nunca entraram em contato comigo novamente, vai saber.&lt;/p&gt;

&lt;h3&gt;
  
  
  Empresa E
&lt;/h3&gt;

&lt;p&gt;Começou com um headhunter me oferecendo a vaga no linkedin, conversamos por telefone e foi bem legal, ele me explicou os detalhes da vaga e disse que me encaminharia para o techlead do time que eu iria trabalhar.&lt;/p&gt;

&lt;p&gt;Conversei com esse techlead, que me explicou novamente a vaga e me deu mais detalhes sobre a empresa, finalizamos a conversa com um pair programming agendado para os próximos dias. &lt;/p&gt;

&lt;p&gt;Uma semana depois fizemos o pair programming, onde eu pude escolher qualquer linguagem para resolver os problemas computacionais. Decidi ir de dart mesmo, pois era o que eu já estava esperando. Foram dois problemas simples, um de contagem de caracteres e o outro era o FizzBuzz. Fiz ambos com TDD e por mais que eu estava nervoso, fluiu bem legal, fui explicando e comentando o meu código enquanto resolvia. &lt;/p&gt;

&lt;p&gt;No final do desafio, como consegui resolver os dois dentro do tempo ele disse que me passaria para a próxima etapa. E antes de encerrar ele me perguntou se eu já tinha resolvido esses problemas antes, eu falei que já tinha visto algumas vezes o FizzBuzz e que tinha visto um vídeo muito legal que comentava sobre o assunto. O qual foi no keynote evento Flutter Europe,  que por sinal, acho que é uma das melhores palestras que eu já ví na vida. Segue o vídeo:&lt;br&gt;
  &lt;iframe src="https://www.youtube.com/embed/uNjp0gS8x_k?start=2076"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Mandei o vídeo pra ele antes de encerrar a call. O mais legal foi que no dia seguinte, logo cedo ele me mandou uma mensagem falando que curtiu pra caramba o vídeo e me agradeceu novamente por ter compartilhado com ele.&lt;/p&gt;

&lt;p&gt;Logo em seguida veio o email perguntando minha disponibilidade para a entrevista final de 4 horas seguidas, o que eles chamam de Hiring Day.&lt;/p&gt;

&lt;h3&gt;
  
  
  Hiring Day
&lt;/h3&gt;

&lt;p&gt;O hiring day começou com uma conversa com a RH, mais para entender o meu trabalho em time e ela pediu para eu dar exemplos das minhas experiências passadas. A conversa foi bem tranquila e logo seguiu para um outro pair programming, mas dessa vez era para implementar uma pequena aplicação em Flutter.&lt;/p&gt;

&lt;p&gt;Fiz esse pair programming com um desenvolvedor do time ele me explicou o que deveria ser feito e disse que eu tinha total liberdade de pesquisar na internet, só não deveria usar nenhuma lib para resolver o problema. O desafio era um input de texto com alguns botões de manipulação no texto digitado. Se não me falha a memória, foram ações de deixar tudo maiusculo, inverter maiusculas com minusculas e vice versa, cifra de Cesar rot13 e mapear textos para transformar em emoji. &lt;/p&gt;

&lt;p&gt;Estava nervoso no início, mas logo foi fluindo e consegui explicar o meu pensamento. Consegui acabar bem antes do tempo dado e no final esse outro programador disse que nunca tinha se divertido tanto com um pair programming e que eu tinha sido a pessoa que tinha resolvido o mais rápido que ele já tinha visto. Fiquei bem animado, mas ainda era a metade das entrevistas.&lt;/p&gt;

&lt;p&gt;Tivemos uma pequena pausa e a conversa continuou com um outro programador, sobre boas práticas de desenvolvimento. Ele me dava um tópico e eu explicava como que seria minha abordagem para aquela situação ou problema. Foi bem tranquila essa etapa, mas não dava pra saber muito se eu tinha me saído bem.&lt;/p&gt;

&lt;p&gt;E por fim, a última etapa, com o product owner do time. Foram várias conversas sobre agilidade e que eu fiquei bem feliz de saber que a empresa adota várias coisas que eu acredito que funcionam e que não só são ágeis por ter um Kanban.&lt;/p&gt;

&lt;p&gt;No fim da conversa o PO disse que a empresa entraria em contato comigo nos próximos dias, mas que spoiler alert eu já tinha alguns fãs no time. &lt;/p&gt;

&lt;p&gt;O Hiring day foi numa quinta-feira e não deu outra, as 8 da manhã da segunda-feira estava lá, a proposta de trabalho toda detalhada e com algumas perguntas sobre o contrato.&lt;/p&gt;

&lt;p&gt;Fiquei tão feliz que nesse dia estourei um espumante e comemorei com minha família. &lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusão
&lt;/h2&gt;

&lt;p&gt;Fico pensando aqui se deveria ter saído logo no início, quando ví que não iria trabalhar com Flutter mais. Mas acho que o problema foi muito além de framework, pois com a aquisição, a cultura da empresa foi muito afetada. Sinto que minha autonomia e a do time já não era a mesma. Agora tínhamos que simplesmente aceitar as demandas e não influenciar mais sobre a maneira que o projeto deveria seguir. Paguei um preço muito caro, o valor mais caro que paguei foi minha sanidade mental, foi uma experiência que não quero que se repita nunca mais. O intuito de documentar isso aqui é para reforçar isso para mim e espero que ajude alguém que está passando pela mesma situação que eu. &lt;/p&gt;

&lt;p&gt;Durante os processos eu recebi vários nãos, alguns foram construtivos, outros nem tanto. Mas sei que cada um dos nãos me ajudou a chegar no sim. Eu sei que não sou o cara mais expert do mundo em Flutter e a empresa que me contratou também não quer esse cara, quer uma pessoa que ajude a construir um time e um produto incrível, espero que eu consiga contribuir com isso. A minha parte eu vou fazer, com certeza! &lt;/p&gt;

&lt;p&gt;Obrigado pela atenção e até a próxima.&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>career</category>
      <category>programming</category>
    </item>
    <item>
      <title>Como vim parar na Alemanha 🇩🇪?</title>
      <dc:creator>Rodrigo Castro</dc:creator>
      <pubDate>Thu, 12 May 2022 13:16:22 +0000</pubDate>
      <link>https://dev.to/rodrigocastro_o/como-vim-parar-na-alemanha--2ie3</link>
      <guid>https://dev.to/rodrigocastro_o/como-vim-parar-na-alemanha--2ie3</guid>
      <description>&lt;h2&gt;
  
  
  Quem sou eu?
&lt;/h2&gt;

&lt;p&gt;Sou Rodrigo Castro, sou desenvolvedor de software desde 2014, trabalhei a maioria da minha carreira desenvolvendo aplicações nativas para Android. Já trabalhei em várias empresas no Brasil, como por exemplo bancos, hipermercados e corretora de investimentos. &lt;/p&gt;

&lt;p&gt;Mas em 2018, acredito eu, foi um divisor de águas na minha carreira, quando ví o framework multiplataforma novo do Google, o Flutter (confira o vídeo do Google I/O 18 &lt;a href="https://www.youtube.com/watch?v=Px4ckfvecHM" rel="noopener noreferrer"&gt;aqui&lt;/a&gt;). Eu já tinha testado outras ferramentas multiplataforma antes, mas nunca tinha botado fé nelas, acreditava que eram mais pra hackathons ou para validar idéia de uma aplicação e então realmente desenvolver nativo depois. Mas com Flutter foi diferente, já no anúncio do Flutter, mesmo sendo beta, já tinha cara de produto final e eu decidi apostar minhas fichas nesse framework. &lt;/p&gt;

&lt;p&gt;No começo eu comecei a fazer meetups sobre Flutter (GDG São Paulo e FlutterBR), criar palestras, fazer projetos pessoas para consolidar melhor o meu conhecimento e é claro contar para as pessoas sobre a palavra do Flutter e o quanto é legal esse framework do Google. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjk02q4h4j55omtqgciuj.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjk02q4h4j55omtqgciuj.gif" alt=" " width="720" height="405"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Esse GIF é um meme que sempre aparecia na comunidade &lt;a href="http://slack.androiddevbr.org/" rel="noopener noreferrer"&gt;AndroidDevBR&lt;/a&gt; 😂&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  A preparação
&lt;/h2&gt;

&lt;p&gt;O meu primeiro processo em inglês foi para uma empresa do Brasil, que me levaria para os EUA por um tempo e depois trabalhar remotamente com esse time. A intenção era fazer um app de um banco do zero em Flutter. &lt;/p&gt;

&lt;p&gt;Eu lembro como se fosse hoje, no final de 2019, eu estava de férias viajando e fiz as entrevistas todas em inglês, estava muito nervoso mas consegui me comunicar. A última etapa foi com um dos sócios fundadores do projeto, que era ex funcionário do Google. Eu acabei não passando nessa vaga, mas a cada pergunta que eu errava ou que respondia incompleta o cara me dava uma aula explicando qual era a resposta e o porque. Na hora fiquei muito triste ao saber que não passei, mas hoje vejo que foi muito rica e me preparou bastante para as próximas etapas da minha carreira.&lt;/p&gt;

&lt;h2&gt;
  
  
  Um chamado inesperado
&lt;/h2&gt;

&lt;p&gt;No início de 2020, acredito que janeiro eu estava de boa, morando em São Paulo, quando recebi uma mensagem de uma headhunter me oferecendo uma vaga de trabalho para refazer um projeto nativo em Flutter, morar na Alemanha, eles ajudariam com o visto e com a mudança. Eu e a minha esposa estávamos querendo morar fora do país já, até tínhamos feito consultoria para imigrar para o Canadá, nunca tínhamos pensado na Alemanha.&lt;/p&gt;

&lt;h2&gt;
  
  
  O processo
&lt;/h2&gt;

&lt;p&gt;Teve uma conversa com a headhunter, que me explicou tudo, e falou que era pra morar em uma cidade do interior da Alemanha, não em Berlin ou Munique, como a maioria das pessoas espera. Eu achei tudo massa demais, inclusive sobre morar em cidade pequena chamada Tettnang, eu venho de uma cidadezinha chamada Coxim, no interior do Mato Grosso do Sul, minúscula, então estou acostumado e gosto das vantagens de morar em cidade pequena.&lt;/p&gt;

&lt;p&gt;A conversa foi tudo certo e me mandaram um desafio técnico num &lt;a href="https://www.hackerrank.com/" rel="noopener noreferrer"&gt;HackerRank&lt;/a&gt; da vida. Fui bem e me convidaram para ir na Alemanha com tudo pago para conhecer a cidade e fazer a última etapa lá na empresa. Já daria pra conhecer o time e conhecer melhor como que seria morar na cidade. &lt;/p&gt;

&lt;p&gt;Você já deve estar imaginando o que aconteceu, era início de 2020 e eu estava indo viajar pra Alemanha. Foi bom enquanto durou, um ou dois dias depois desse convite, a pessoa do RH me ligou e informou que infelizmente não seria mais possível viajar, por conta do COVID-19, mas me perguntou se eu gostaria de continuar o processo remotamente mesmo assim. &lt;/p&gt;

&lt;p&gt;Aceitei e o processo continuou em uma conversa com o RH da empresa e o gestor do time que eu iria trabalhar, foi mais pra explicar como que era a empresa e o time que eu iria trabalhar.&lt;/p&gt;

&lt;p&gt;Próxima etapa, pair programming com o gestor e um outro programador do time, que por coincidência era um Brasileiro também, que trabalhava na empresa fazia uns 4 anos. Foi legal que conseguimos conversar um pouquinho em português, e eu consegui ficar um pouco mais tranquilo para continuar o desafio. Nessa etapa foi onde eu desenvolvi Flutter junto com eles e fui explicando o meu código enquanto implementava. &lt;/p&gt;

&lt;p&gt;Depois dessa etapa teve um fit cultural com uma desenvolvedora de um outro time. Falamos sobre os desafios técnicos e não técnicos que passei durante a minha carreira. A conversa foi boa mas eu ainda não sabia se tinha sido aprovado ou não.&lt;/p&gt;

&lt;p&gt;Na semana seguinte o RH me liga falando que eu tinha passado no processo e que eles gostariam de me fazer uma proposta de trabalho. Eu saí correndo avisar a minha esposa e contar as boas novas!&lt;/p&gt;

&lt;p&gt;A empresa me transferiu dinheiro pra comprar a máquina, e trabalhei de casa por uns 2 ou 3 meses até conseguir meu visto. Na época, o consulado da Alemanha no Brasil estava fechado.&lt;/p&gt;

&lt;p&gt;Visto em mãos, passagens compradas, em agosto de 2020 a gente se mudou para a Alemanha e aqui se iniciou uma nova aventura! &lt;/p&gt;

&lt;h2&gt;
  
  
  Mais detalhes em vídeo
&lt;/h2&gt;

&lt;p&gt;Moro aqui faz quase 2 anos já, fiz um vídeo e postei no youtube logo que cheguei. Lá eu explico um pouco melhor, confira &lt;a href="https://www.youtube.com/watch?v=-Npk6Dcfyo4" rel="noopener noreferrer"&gt;nesse link&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Continua &lt;del&gt;no próximo episódio&lt;/del&gt;
&lt;/h2&gt;

&lt;p&gt;Durante esses 2 anos de empresa ví a necessidade de mudar de trabalho, pretendo contar em mais detalhes sobre o processo de mudança de emprego em um próximo post. Fiquem ligados!&lt;/p&gt;

</description>
      <category>flutter</category>
      <category>career</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
