Flutter - I need to display text, but the app doesn't

Question

import 'package:flutter/material.dart';
import 'package:books_finder/books_finder.dart';

String inputText = '';
List<String> infoTitle = [];
String infoSubtitle = "";
List<String> infoAuthors = [];

class FinderBookSearch extends StatefulWidget {
  const FinderBookSearch({super.key, required this.title});
  final String title;

  @override
  State<FinderBookSearch> createState() => _FinderBookSearch();
}

class _FinderBookSearch extends State<FinderBookSearch> {
  void loadBookInfos() async {
    final books = await queryBooks(
      inputText,
      maxResults: 20,
      printType: PrintType.books,
      orderBy: OrderBy.relevance,
      reschemeImageLinks: true,
      langRestrict: "en",
    );
    for (var book in books) {
      var info = book.info;
      infoTitle.add(info.title);
    }
  }

  final TextEditingController _searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.white,
          title: Container(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: TextField(
              onChanged: (text) {
                setState(() {
                  inputText = text;
                });
              },
              controller: _searchController,
              decoration: InputDecoration(
                hintText: 'Search...',
                // Add a clear button to the search bar
                suffixIcon: IconButton(
                  icon: const Icon(
                    Icons.clear,
                    color: Colors.black,
                  ),
                  onPressed: () => _searchController.clear(),
                ),
                prefixIcon: IconButton(
                  icon: const Icon(
                    Icons.search,
                    color: Colors.black,
                  ),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => const AfterSearchScreen(),
                      ),
                    );
                    loadBookInfos();
                  },
                ),
              ),
            ),
          )),
    );
  }
}

class AfterSearchScreen extends StatefulWidget {
  const AfterSearchScreen({super.key});

  @override
  State<AfterSearchScreen> createState() => _AfterSearchScreenState();
}

class _AfterSearchScreenState extends State<AfterSearchScreen> {
  Widget a(String text) {
    return ElevatedButton(
      style: const ButtonStyle(),
      onPressed: () {},
      child: ListTile(
        title: Text(
          text,
          style: const TextStyle(color: Colors.black),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Book Finder",
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Container(
          decoration: const BoxDecoration(
            color: Colors.greenAccent,
          ),
          child: ListView.builder(
            itemCount: infoTitle.length,
            itemBuilder: (context, index) {
              return a(infoTitle[index]);
            },
          ),
        ),
      ),
    );
  }
}

That is my code. I want to display text on my app. I don't know why that code isn't work at once. It doesn't work at once. When I refresh myself in my Visual Studio Code, then it display the text.

My subject is display the elevation button without reload. Please let me know if it works fine on your PC. Because my PC may be faulty.

Answer 1

after reading the code you gave and from your question is

I want to display text on my app. I don't know why that code isn't work at once. It doesn't work at once. When I refresh myself in my Visual Studio Code, then it display the text.

after reading this part of your code

 onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => const AfterSearchScreen(),
                      ),
                    );
                    loadBookInfos();
                  },

I think I found your issue, because from this code you navigate to other page before the data is finish being add to list, you can move the navigator.push function to the loadBookInfos this is the example

void loadBookInfos() async {
    final books = await queryBooks(
      inputText,
      maxResults: 20,
      printType: PrintType.books,
      orderBy: OrderBy.relevance,
      reschemeImageLinks: true,
      langRestrict: "en",
    );
    for (var book in books) {
      var info = book.info;
      infoTitle.add(info.title);
    }
      Navigator.push(
         context,
         MaterialPageRoute(
            builder: (_) => const AfterSearchScreen(),
         ),
     );
  }

and on the onpressed function, remove your navigator.push