Flutterでボタンを押したらリストを表示する方法

Question

Flutterでアプリを開発していますが、

1. IconButtonウィジットのonPressedメソッドを押下
2. TextFieldから入力した値を取得してbuildItemListメソッド(非同期のでリストを返す）に渡す
3. buildItemListで返されたリストをListview.builderに表示する

という処理を書いています。

そこで１つ問題が発生しており、その問題というのが、例えば、TextFieldに[Python]と入力してボタンを押すと、１回目はリストに何も表示されず、２回押すとリストに表示されるというものです。

ログを見て解析していたのですが、どうも原因がわからず、何かしらソースコード上に問題がありましたらご教示いただきたいです。よろしくお願い致します。

class _SearchAndRegistrationState extends State<SearchAndRegistration> {
  _SearchAndRegistrationState({this.userId});

  final String userId;
  List<Book> bookList = [];

// Create a text controller and use it to retrieve the current value
// of the TextField.
  final myController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: Header(),
      body: Container(
        margin: EdgeInsets.all(10.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Expanded(
                      flex: 8,
                      child: TextField(
                        controller: myController,
                        decoration: InputDecoration(
                          hintText: '検索したいキーワードを入力',
                          filled: true,
                          prefixIcon: Icon(
                            Icons.book,
                            size: 20,
                          ),
                          suffixIcon: IconButton(
                            icon: Icon(Icons.search),
                            onPressed: () {
                              setState(() {
                                buildItemList(bookList, myController.text);
                                myController.clear();
                              });
                            },
                          ),
                        ),
                      ),
                    ),
                  ]),
            ),
            Expanded(
              flex: 8,
              child: Center(
                  child: (bookList == null || bookList.length == 0)
                      ? Text("Book List is displayed here!")
                      : ListView.builder(
                          itemBuilder: (BuildContext context, int index) {
                            return Card(
                              elevation: 4.0,
                              child: ListTile(
                                contentPadding: EdgeInsets.all(4.0),
                                leading: Image(
                                  image: AdvancedNetworkImage(
                                    bookList[index].thumbnail,
                                    height: 120,
                                    useDiskCache: true,
                                    cacheRule: CacheRule(
                                        maxAge: const Duration(days: 7)),
                                  ),
                                  fit: BoxFit.scaleDown,
                                ),
                                title: Text("${bookList[index].title}"),
                              ),
                            );
                          },
                          itemCount: bookList.length)),
            )
          ],
        ),
      ),
    );
  }
}

Future<List<Book>> buildItemList(List<Book> bookList, String input) async {
//  final baseUrl = 'https://www.googleapis.com/books/v1/volumes?';
  String baseUrl = 'https://www.googleapis.com/books/v1/volumes?q=';
  String getUrl = baseUrl + input;

  final response = await http.get(getUrl);

  if (response.statusCode == 200) {
    Map<String, dynamic> map = json.decode(response.body);
    List<dynamic> data = map["items"];

    for (int i = 0; i < data.length; i++) {
      bookList.add(Book(
          data[i]['volumeInfo']['authors'],
          data[i]['volumeInfo']['categories'],
          data[i]['volumeInfo']['description'],
          data[i]['volumeInfo']['pageCount'],
          data[i]['volumeInfo']['publishedDate'],
          data[i]['volumeInfo']['publisher'],
          data[i]['volumeInfo']['imageLinks']['thumbnail'],
          data[i]['volumeInfo']['title']));
    }
  } else {
    throw Exception('Failed to load books from API');
  }

  return bookList;
}

class Book {
  final List authors;
  final List categories;
  final String description;
  final int pageCount;
  final String publishedDate;
  final String publisher;
  final String thumbnail;
  final String title;

  Book(this.authors, this.categories, this.description, this.pageCount,
      this.publishedDate, this.publisher, this.thumbnail, this.title);
}

Answer 1

buildItemListメソッドが非同期だからではないでしょうか。
onPressedの部分を以下のようにしてみてください。

onPressed: () async {
  await buildItemList(bookList, myController.text);
  setState(()  {
    myController.clear();
  });
},

Comments

[退会済みユーザー]

ご回答ありがとうございます。おっしゃるとおり、非同期なのに記載がそうなってませんでしたね。
結局、最終的な実装は、onPressで本の情報を非同期に取得し、表示部分はFutureBuilderを使いました。
どうもありがとうございました。