loading...
Flutter

Um estudo sobre Flutter SafeArea

biaherculano profile image Beatriz Herculano Updated on ・2 min read

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:

Imagem simulando aplicativo que não se ajusta a tela de um celular com um recorte de tela e com pontas arredondadas

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:

Captura de tela de um aplicativo onde o texto invade a barra de notificação

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:

Captura de tela de um aplicativo onde o texto não invade a barra de notificação

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!

Discussion

pic
Editor guide