2

Estou tentando criar esse layout para um app, usei um expansion tile dentro de um Card e uma listView abaixo, porém quando eu abro o expansionTile, se bater no fundo da tela acontesse isso e se a listView tiver muitos tiles acontece isso, não estou conseguindo de forma alguma resolver esse problema.

Segue meu código abaixo:

     class HomeState extends State<Teste>{
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text (""),
          ),
            body: Container(
              padding: EdgeInsets.all(15.0),
              child: Column(
                children: <Widget>[
                  CardList(),
                  MyList()
                ],
              ),
            ),
        );
      }
    }

    Widget CardList(){
      return new Flexible(
          child: Card(
            elevation: 5,
            color: Color.fromARGB(255, 0xC8, 0xF4, 0xF2),
            child: ExpansionTile(
              title: Text("Periodo",
                style: new TextStyle(
                ),textAlign: TextAlign.center,
              ),
              children: <Widget>[
                ListaPeriodos(10)
              ],
            ),
          )
      );
    }

Widget MyList(){
  return new ListView.builder(
    padding: EdgeInsets.all(10.0),
    shrinkWrap: true,
    itemBuilder: (BuildContext context, int index) {
      return new ListTile(
        title: new Text(
          "Texto",
          textAlign: TextAlign.center,
          style: new TextStyle(
            fontWeight: FontWeight.normal,
            color: Colors.black45
          ),
        ),
      );
    },
    itemCount: 15,
  );
}
3
  • 2
    Pelo que entendo seu conteúdo está transbordando do tamanho possível de tela. Tente colocar sua árvore de Widgets em um SingleChildScrollView(). Commented 21/12/2018 às 10:58
  • Obrigado, eu fiz isso e funcionou visualmente, porem agora eu não consigo rolar a pagina, só se eu passar o dedo pela bordinha da tela. Minha ideia é que esse expansionTile fique fixo na tela, enquanto a lista abaixo seja possível de rolar, as opções da lista serão mostradas de acordo como o que é selecionado no expansionTile.
    – pksasso
    Commented 21/12/2018 às 14:00
  • Entendi, no caso seu conteúdo completo da tela poderá ser "scrollado" não é isso? e no caso de o Tile e a lista ser maior que a tela vc fará o "scroll" nos dois widgets? Pq eu fiquei pensando no seu layout e acho que o seletor que vc apresentou ficaria com o conteúdo melhor apresentado em um Dialog que exibisse suas opções. Assim apenas a lista teria o scroll. Fica a sugestão. Commented 21/12/2018 às 15:23

2 Respostas 2

1

Os erros ocorrem, pois pelo fato de você não ter indicado uma altura limite da ListView e ela estar dentro da Column do ExpansionTile, ela cresce de acordo com a quantidade de itens, dessa forma em algum momento ultrapassa o limite da tela e acontece o erro.

Uma solução possível é envolver sua ListView em um Container de altura limitada com uma altura menor que a da tela inteira, por exemplo 200, permitindo assim scrollar tanto a lista (Dentro desses 200), como a tela.

Você limitar a altura da ListView utilizando o Container evita o erro e ativa o scroll da própria ListView , sem necessidade de implementar um SingleChildScrollView.

0

Olá! Caso não tenha conseguido ajustar o scroll da ListView dentro do ExpansionTile, aconselho adicionar a seguinte linha dentro do seu ListView.builder:

controller: ScrollController(keepScrollOffset: true)

O "ScrollController" te permite adicionar um controlador que faz com que sua lista de widgets reaja de acordo com as interações que você fizer na tela, e o argumento "keepScrollOffset: true" libera o comportamento de scroll ao tocar em qualquer item de sua lista.

Resumindo, dessa forma você conseguirá "scrollar" tocando em qualquer parte da sua lista, e não somente no ExpansionTile.

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 15/02/2023 às 12:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .