Um estudo sobre Flutter SafeArea

Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa introdução.

SafeArea

O video do Widget da semana postado no dia 14 de agosto de 2018, fala sobre a SafeArea. Esse widget inspeciona o modelo da tela do celular e ajusta a conteúdo para que ele fique formatado dentro dos limites.

Não so o modelo/formato da tela é importante, mas como hoje aparecem varias notificações e também existem os recortes de tela, seu aplicativo pode ficar assim:

Para resolver esse tipo de incompatibilidade nós podemos usar o SafeArea.

SafeArea(
    child: //Seus Widgets
);

Para entender a diferença entre usar ou não usar o SafeArea veja o exemplo a baixo:

Esse aplicativo tem o seguinte código:

Container(
      color: Colors.white,
      child: Text(
        'Esse texto invade a barra de notificação',
        style: TextStyle(color: Colors.black),
      ),
    );

Sem usar a SafeArea o texto invade a barra de notificação e, ao olhar no celular, o texto é cortado pelo formato das pontas da tela que é arredondado.

Se você apenas adicionar a SafeArea:

SafeArea(
        child: Container(
      color: Colors.white,
      child: Text(
        'Esse texto nao invade a barra de notificação',
        style: TextStyle(color: Colors.black),
      ),
    ));

O resultado é bem melhor:

Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma página e um grupo no Facebook.
Também estamos no Meetup e no GitHub!