6
respostas

Paisagem - App - Dúvida

Bom dia!

Pelo que eu entendi, sempre que eu precisa ter um scroll em paisagem orientação, o indicado é usar o Listview ou SingleChildScrollView...

Porém temos que elaborar um app sempre visando que ele pode ter essa orientação. Logo sempre no contéudo, devo colocar meus widget dentro de SingleChildScrollView? É tipo um procedimento comum no dia a dia de um dev flutter?

6 respostas

Boa noite João!

Independente da orientação do dispositivo (retrato ou paisagem) pode existir ou não essa necessidade de usar algum Widget que permita a geração de scroll quando não existir espaço para o conteúdo da tela.

Um dispositivo na orientação de retrato que exibe uma listagem de vários itens vai usar um ListView por exemplo.

Outro exemplo: se o seu dispositivo estiver em orientação de paisagem, mas o seu conteúdo é sempre todo visível dentro da área disponível (um conjunto de itens fixos que ocupam o espaço disponível) essa necessidade de scroll não vai existir.

Em resumo: a decisão vai ser de acordo com a necessidade e conteúdo que será exibido. O widget usado também vai mudar conforme o objetivo da tela. Fora o ListView e o SingleChildScrollView tem várias outras opções (https://docs.flutter.dev/development/ui/widgets/scrolling).

Geralmente quando estamos desenvolvendo e testando e temos aquelas marcações em amarelo de espaço excedido é o momento de adicionar um tratamento para ter o scroll. Ou então cenários que sabemos de antemão que a tela vai exibir vários itens ou tem conteúdo que é adicionado dinamicamente (um novo item aparece para cada nova informação cadastrada pelo usuário, por exemplo).

sim, mas digo que quase sempre temos que ter scroll, visto que se um dispositivo tem tela com menor altura, ai ja tem a necessidade. na pratica seria isso?

"mas o seu conteúdo é sempre todo visível dentro da área disponível (um conjunto de itens fixos que ocupam o espaço disponível) essa necessidade de scroll não vai existir." - Mas e se meu cliente utilizar um celular pequeno? Pois pelo que eu entendi, nesse caso, dependo da tela do cliente nao?

Em vários cenários você precisa de scroll sim. Um formulário com vários campos de texto é um exemplo comum.

Mas existem funcionalidades em que o conteúdo deve ser adaptado de acordo com o espaço disponível na tela (ocupando mais ou menos espaço) e você não vai querer um scroll.

Vamos usar de exemplo um aplicativo de xilofone (um teclado musical colorido).

Nós vamos querer que as teclas ocupem o espaço disponível da tela do usuário. Visualmente seria mais ou menos assim:

Exemplo teclado xilofone widgets expanded

E o código seria algo como:

class TeclaMusical extends StatelessWidget {
  final Color color;
  const TeclaMusical({ Key? key, required this.color }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GestureDetector(
        onTap: () {
          //tocar a música ...
        },
        child: Container(color: color),
      ),
    );
  }
}


class MyApp extends StatelessWidget {

  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              TeclaMusical(color: Colors.red),
              TeclaMusical(color: Colors.orange),
              TeclaMusical(color: Colors.yellow),
              TeclaMusical(color: Colors.green),
              TeclaMusical(color: Colors.lightGreen),
              TeclaMusical(color: Colors.blue),
              TeclaMusical(color: Colors.purple),
            ],
        ),
      ),
    );
  }
}

Nesse exemplo criamos uma Column com cada item sendo um Expanded. Isso faz com que cada item ocupe o espaço disponível. Mesmo em uma tela menor não vamos gerar um scroll.

mas numa tela menor não ira aparecer aquele erro de limite tela??

Nesse exemplo não pois cada item está dentro de um Expanded (https://api.flutter.dev/flutter/widgets/Expanded-class.html). Então eles esticam ou contraem para ocupar o espaço disponível.

Faça alguns testes com esse exemplo ou algo parecido que vai ficar mais claro como esse cenário funciona. O ponto aqui é que a necessidade ou não de um scroll vai variar de acordo com o que a sua tela faz. Existem recursos para gerar scroll quando necessário e também para redimensionar o conteúdo de acordo com o tamanho disponível quando for o caso.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software