Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Problemas com ListView

Boa tarde, estou praticando fazendo uma tela e tive o seguinte problema, adicionei 3 radio buttons e um TextFormField e logo abaixo uma ListView (vermelho e azul) quando eu rolo a ListView para cima a tela inteira está rolando eu gostaria de fazer com que somente a ListView fosse para cima e os campos de pesquisa ficassem fixos. Alguém pode me ajudar por favor? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

4 respostas

Bom dia, meu querido!

Você pode compartilhar seu código com a gente? Assim fica mais fácil de ajudar!

Uma dica que eu dou é: Você pode colocar na ListView apenas os elementos que quer arrastar, e os outros põe num widget separado!

class PesquisaClientes extends StatefulWidget {
  const PesquisaClientes({Key? key}) : super(key: key);

  @override
  State<PesquisaClientes> createState() => _PesquisaClientesState();
}

class _PesquisaClientesState extends State<PesquisaClientes> {
  String? tipoPesquisa = 'Razão Social';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarPadrao(
        title: const Text('Pesquisa de Clientes'),
        appBar: AppBar(),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const SizedBox(
              height: 10,
            ),
            const Text(
              'Relação de Clientes 0/0',
              style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue),
            ),
            SizedBox(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Radio(
                    value: "Razão Social",
                    groupValue: tipoPesquisa,
                    onChanged: (String? value) {
                      setState(() {
                        tipoPesquisa = value;
                      });
                    },
                  ),
                  const Text('Razão Social'),
                  Radio(
                    value: "Fantasia",
                    groupValue: tipoPesquisa,
                    onChanged: (String? value) {
                      setState(() {
                        tipoPesquisa = value;
                      });
                    },
                  ),
                  const Text('Fantasia'),
                  Radio(
                    value: "Código",
                    groupValue: tipoPesquisa,
                    onChanged: (String? value) {
                      setState(() {
                        tipoPesquisa = value;
                      });
                    },
                  ),
                  const Text('Código'),
                ],
              ),
            ),
            SizedBox(
              child: Padding(
                padding: const EdgeInsets.all(1.0),
                child: TextFormField(
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    labelText: tipoPesquisa,
                    border: const OutlineInputBorder(),
                    fillColor: Colors.white70,
                    filled: true,
                  ),
                ),
              ),
            ),
            SizedBox(
              child: ListView(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                children: [
                  Container(
                    color: Colors.red,
                    height: 100,
                    width: 100,
                  ),
                  Container(
                    color: Colors.blue,
                    height: 100,
                    width: 100,
                  ),
                  Container(
                    color: Colors.red,
                    height: 100,
                    width: 100,
                  ),
                  Container(
                    color: Colors.blue,
                    height: 100,
                    width: 100,
                  ),
                  Container(
                    color: Colors.red,
                    height: 100,
                    width: 100,
                  ),                Container(
                    color: Colors.blue,
                    height: 100,
                    width: 100,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Olá, creio que o problema aconteça porque vc envolveu todo o conteúdo do body com o SingleChildScrowView, para resolver o problema retire o SingleChildScrowView do body e deixe a Column, e caso no ListView ocorra algum erro de Scrow envolva-o com SingleChildScrowView.

espero que ajude.

solução!

Bom dia, retire o SinglechildScrollView como pai dos seus Widgets. Com ele sendo o pai de todos isso faz com que a pagina toda ela seja scrolavel.

Depois voce coloca o ListView dentro do Widget Expanded, pois ele já é um componente scrolavel por padrão, mas não tem uma altura definida dentro do Column. Com Expanded todo o espaço que sobrar na tela para column será usado pelo ListView.

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