Tabbarview with card generating error while loading data into flutter

Question

Good morning, I’m starting now in the flutter world and I’m mounting a Tabbarview card with data coming from a bank. I’m putting it inside Listview so I can separate it into tabs and load the data into a Listview.builder. When debugging, I saw that the data is being taken, but it generates an error and does not click on the screen. The mistake is:

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderViewport#0e7dd NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1702 pos 12: 'hasSize'


════════ Exception caught by rendering library ═════════════════════════════════
The getter 'scrollOffsetCorrection' was called on null.
Receiver: null
Tried calling: scrollOffsetCorrection

The fabric mounting class:

class _LacamentosWidgetState extends State<LacamentosWidget> {

  @override
  Widget build(BuildContext context) {
    Lancamentos _lancamentos = Provider.of(context);

    return TabBarView(
      children: <Widget>[
        //aba despesas
        ListView(
          children: <Widget>[
            Card(
              margin: EdgeInsets.all(10),
              child: Column(
                children: <Widget>[
                  ListTile(
                    title: Text('Descrição'),
                  ),
                ],
              ),
            )
          ],
        ),
        //aba receitas
        ListView(
          children: <Widget>[
            ListView.builder(
                itemCount: _lancamentos.itemsCount,
                itemBuilder: (_, int position) {
                  final item = position;
                  return Card(
                    child: ListTile(
                      title: Text('sdfd'),
                    ),
                  );
                }),
          ],
        ),
      ],
    );
  }
}

and the class takes the data:

class Lancamento {
  final int id;
  final String descLancamento;
  final DateTime diaLancamento;
  final double valorLancamento;
  final bool isReceita;
  final String tipoLancamento; //FIXO VARIAVEL para enum

  Lancamento({
    this.id,
    this.descLancamento,
    this.diaLancamento,
    this.valorLancamento,
    this.isReceita = true,
    this.tipoLancamento,
  });
}

class Lancamentos with ChangeNotifier {

  List<Lancamento> _items = DUMMY_LANCAMENTOS;

  List<Lancamento> get items {
    return [..._items];
  }

  int get itemsCount {
    return _items.length;
  }
}

Answer 1

You need to add one TabController your class to work with the TabBarView.

In your case it would be

controller: TabController(length: 2, vsync: this)

Another thing wrong is that you are creating a list within another list, without setting the size of the internal lists, thus causing an error when drawing them, because the ListView when they do not have a height specified, take all the size of the parent widget, and as they may have infinite sizes, never finish drawing...

Instead of doing:

ListView(
    children: <Widget>[
        ListView.builder(
        itemCount: _lancamentos.itemsCount,
        itemBuilder: (_, int position) {
            final item = position;
            return Card(
                child: ListTile(
                  title: Text('sdfd'),
            ),
            );
        }),
    ],
),

Just do it like this:

ListView.builder(
    itemCount: _lancamentos.itemsCount,
    itemBuilder: (_, int position) {
        final item = position;
        return Card(
            child: ListTile(
                    title: Text('sdfd'),
        ),
        );
    }
),

Note: If you need to be like you are, define a height for internal lists.

Corrected full class

class _LacamentosWidgetState extends State<LacamentosWidget> with SingleTickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {

    TabController _controller = TabController(length: 2, vsync: this);

    return TabBarView(
      controller: _controller,
      children: <Widget>[
        //aba despesas
        ListView(
          children: <Widget>[
            Card(
              margin: EdgeInsets.all(10),
              child: Column(
                children: <Widget>[
                  ListTile(
                    title: Text('Descrição'),
                  ),
                ],
              ),
            )
          ],
        ),
        //aba receitas
        ListView.builder(
            itemCount: _lancamentos.itemsCount,
            itemBuilder: (_, int position) {
              final item = position;
              return Card(
                child: ListTile(
                  title: Text('sdfd'),
                ),
              );
            }
         ),
      ],
    );
  }
}