Listview not showing when code for state is defined in a seperate file

Issue

am new to Flutter development, and this might be a naive question, but i was following the beginner tutorial on flutter dev site, and my listview is not showing. I have changed some class/function names,and put the code in different files, but am not sure what is being wrong here, This is supposed to be a list of infinite list of random words.
Here is the complete code:

//File name: main.dart
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_as/StatefulWidgetStates.dart';

class StatefulRandomWordsWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return RandomWordsState();
  }

}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var wordWidget = StatefulRandomWordsWidget();
    return MaterialApp(
        title: 'Useless Title',
        home: Scaffold(
            appBar: AppBar(title: Text('Welcome to Flutter')),
            body: wordWidget));
  }
}

void main() {
  runApp(MyApp());
}

and

//File name: StatefulWidgetStates.dart
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_as/main.dart';


class RandomWordsState extends State<StatefulRandomWordsWidget> {
  final dataList = <WordPair>[];

  @override
  Widget build(BuildContext context) {
    return getListView();
  }

  Widget getListView() {
    ListView listViewWidget = ListView.builder(
        itemCount: dataList.length,
        padding: EdgeInsets.all(8.0),
        itemBuilder: (context, pos) {
          if (pos.isOdd) {
            return Divider();
          }
          else {
            final index = pos ~/ 2;
            if (index >= dataList.length) {
              List<WordPair> pairs=generateWordPairs().take(10);
              dataList.addAll(pairs);
            }

            WordPair childData = dataList[index];
            return ListTile(title:  Text(childData.asCamelCase, style: TextStyle(fontSize: 12.0)));
          }

        });
    return listViewWidget;
  }

}

I also don’t understand whats this final index = pos ~/ 2; logic about. The official docs say:

The expression i ~/ 2 divides i by 2 and returns an integer result. For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2. This calculates the actual number of word pairings in the ListView, minus the divider widgets.

But am guessing am using it wrong.

Solution

Remember that when you are working with StateFul Widgets, you need to tell the framework that some state(date) in that widget has changed and it needs to be rebuild. So when you are adding thing to te list, the state changes and it needs to be re-builded. You tell the framework to rebuild by calling the setState((){
});
method.

example:

List<WordPair> pairs = generateWordPairs().take(10);
dataList.addAll(pairs);
setState(() {});

Answered By – Sergio Bernal

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.