Flutter

Como construir um layout Flutter responsivo

Neste artigo veremos algumas das abordagens e widgets que são usados no desenvolvimento de aplicativos responsivos com Flutter .

há 1 ano 11 meses

Formação Desenvolvedor Dart Flutter
Conheça a formação em detalhes

Neste artigo, vamos aprender algumas das abordagens e widgets que são usados na construção de layouts responsivo no Flutter.

Quando falamos em responsividade, significa dizer que o conteúdo ou o layout deve ser flexível para caber em diferentes tamanhos de tela as quais a aplicação será exibida.

Um dos principais objetivos do Flutter é criar uma estrutura que permita desenvolver aplicativos a partir de uma única base de código. Isso significa que seu aplicativo pode aparecer em telas de diferentes dimensões.

Não há uma regra para projetar um layout responsivo em Flutter, o mesmo disponibiliza diversas maneiras para se alcançar tal objetivo e cada uma é mais indicada para um determinado contexto, o importante é conhecer quais são essas maneiras e como as mesmas funcionam.

A diferença entre um aplicativo adaptativo e um responsivo

Em primeiro lugar, adaptável e responsivo podem ser vistos como dimensões separadas de um aplicativo. Você pode ter um aplicativo adaptativo que não seja responsivo, ou vice-versa. E, claro, um aplicativo pode ser ambos, ou nenhum dos dois.

Normalmente, um aplicativo responsivo deve ter seu layout sintonizado para o tamanho da tela disponível. Por exemplo, se o usuário redimensionar a janela ou mudar a orientação do dispositivo.

Contudo, adaptar um aplicativo para ser executado em diferentes tipos de dispositivos, como celular e desktop, requer lidar com a entrada de mouse e do teclado, bem como entrada de toque. Por exemplo, uma tela que ao scrollar arrastando o dedo no touch screen também deve responder ao scrollar do mouse.

Flutter - Fundamentos
Curso Flutter - Fundamentos
Conhecer o curso

Como construir um layout Flutter responsivo

Antes de mais nada, o Flutter permite criar aplicativos que se auto ajustam para diferentes tamanhos e orientações da tela do dispositivo.

Para que isso seja possível, temos diversos widgets que vão nos ajudar no desenvolvimento de aplicativos responsivos.

Alguns widgets e classes úteis para criar uma interface do usuário responsiva são:

Agora, vamos ver alguns exemplos de como utilizar esses widgets.

OrientationBuilder

O widget OrientationBuilder permite que você modifique seu layout para responder de acordo com a orientação do dispositivo.

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      crossAxisCount: orientation == Orientation.portrait ? 2 : 4,
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      children: List.generate(
        50,
        (index) => Container(
          color: Colors.grey,
          child: Text(
            "$index",
            style: const TextStyle(fontSize: 32),
          ),
        ),
      ),
    );
  },
);

Assim como mostrado neste exemplo o OrientationBuilder tem um builder que passa o context e o orientation, os quais podemos utilizar para saber em qual tipo de orientação o dispositivo se encontra.

Sendo assim dependendo da orientação em que o dispositivo estiver nosso layout irá se organizar em duas ou quatro colunas.

Confira mais detalhes na Documentação do OrientationBuilder

Flutter  - Conhecendo o GetX
Curso Flutter - Conhecendo o GetX
Conhecer o curso

LayoutBuilder

De acordo com a documentação do Flutter o LayoutBuilder é um widget que consegue passar o tamanho onde ele se encontra na arvore de widgets.

@override
Widget build(BuildContext context) {
  const percent = 3;

  return Scaffold(
    body: LayoutBuilder(
      builder: (context, constrains) {
        return Column(
          children: [
            Container(
              width: constrains.maxWidth,
              height: constrains.maxHeight / percent,
              color: Colors.red,
            ),
            Container(
              width: constrains.maxWidth,
              height: constrains.maxHeight / percent,
              color: Colors.blue,
            ),
            Container(
              width: constrains.maxWidth,
              height: constrains.maxHeight / percent,
              color: Colors.green,
            ),
          ],
        );
      },
    ),
  );
}

O LayoutBuilder passa um builder, que é uma função, passando o context e as constrains.

As constrains são exatamente onde conseguimos pegar o tamanho e fazer um cálculo simples para que todos os conteúdos filhos possam caber corretamente na tela. Ou seja, como resultado teremos containers que vão se adaptar independentemente do tamanho da tela.

Confira mais detalhes na Documentação do LayoutBuilder

Flexible e Expanded

Também temos os widgets Flexible e Expanded para nos ajudar na construção de layouts Flutter responsivos.

O widgets Expanded e Flexible funcionam de maneira semelhante, ambos vão preencher todo o conteúdo disponível da tela. Porém, o Flexible permite que você respeite o tamanho do widget filho enquanto o Expanded não.

Column(
  children: [
    Flexible(
      child: Container(
        color: Colors.blue,
      ),
    ),
    Flexible(
      flex: 3,
      child: Container(
        color: Colors.green,
      ),
    ),
    Flexible(
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
);

Desse modo mostrado no exemplo todos os filhos do Flexible vão tentar ocupar o maximo de espaços possível.

Flutter - Rotas e Pilhas
Curso Flutter - Rotas e Pilhas
Conhecer o curso

Componentes

Usando uma abordagem de componentização, podemos extrair sua lógica do layout em componentes separados para que, ao projetar layouts em uma tela grande, você não precisa definir a lógica separadamente. Sendo assim podemos apenas reutilizar a lógica que foi definido para cada fragmento.

Vamos utilizar como exemplo o código desenvolvido no artigo Criando um BottomNavigationBar com Flutter, porém o fragmentando em um componente para melhor reaproveitamento.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        bottomNavigationBar: CustomAppBar(),
      ),
    );
  }
}

class CustomAppBar extends StatelessWidget {
  const CustomAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
      builder: (context, orientation) {
        final isPortrait = orientation == Orientation.portrait;
        return BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: const Icon(Icons.person),
              label: "Minha conta",
              activeIcon:
                  isPortrait ? null : const Text('Configurações da conta'),
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.shopping_basket),
              label: "Meus pedidos",
              activeIcon: isPortrait
                  ? null
                  : const Text('Carrinho de Compras e seus pedidos'),
            ),
            BottomNavigationBarItem(
              icon: const Icon(Icons.favorite),
              label: "Favoritos",
              activeIcon:
                  isPortrait ? null : const Text('Itens Favoritos do carrinho'),
            ),
          ],
        );
      },
    );
  }
}

Gráficos vetoriais

Ao contrário de serem criados usando bitmaps de pixel, gráficos vetoriais são imagens definidas em arquivos XML como caminhos e cores. Sendo assim eles podem escalar para qualquer tamanho sem perder a qualidade da imagem.

Caso queira aprender mais sobre imagens vetoriais leia o artigo O que são imagens vetoriais.

Conclusão

Criar um aplicativo totalmente responsivo em Flutter é um desafio, porém, como vimos neste artigo há uma série de widgets que podemos usar para nós auxiliar nesta tarefa.

Além disso, existem plugins que também possuem o intuito de facilitar a vida que quem desenvolve aplicativos responsivos com Flutter, alguns deles são:

Por fim, caso queira aprender mais sobre Flutter e sua infinidade de recursos saiba que aqui na Treinaweb temos o curso Flutter - Fundamentos que possui 01h54 de vídeo e um total de 11 exercícios. Conheça também nossos outros cursos de Flutter.

Veja quais são os tópicos abordados durante o curso de Flutter - Fundamentos:

  • Como configurar seu ambiente de desenvolvimento;
  • O que são e como funcionam os widgets;
  • O que são os widgets stateful e stateless;
  • Como funciona a hierarquia de interfaces do Flutter;
  • Como trabalhar com estados em nosso app;
  • Como validar formulários com o Flutter.

Autor(a) do artigo

Ariel Sardinha
Ariel Sardinha

Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. arielsardinha

Todos os artigos

Artigos relacionados Ver todos