DEV Community

Beatriz Herculano for Flutter

Posted on • Updated on

 

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:

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!

Top comments (0)

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout 😆