BottomNavigationBarをデータベースから非同期処理を用いて取得した情報で構築したい

Question

Flutter（Flutter 3.3.2／Dart 2.18.1）にてBottomNavigationBarを使ったページの作成をしています。

BottomNavigationBarのアイテムリスト（LIST<BottomNavigationBarItem>）をデータベースから取得し表示したいのですが、データ取得が非同期処理の為、先にWidgetの生成が始まりその時点ではアイテムリストが空となり「_AssertionError ('package:flutter/src/material/bottom_navigation_bar.dart': Failed assertion: line 197 pos 15: 'items.length >= 2': is not true.)」といったエラーメッセージが表示されます。

エラーの意味する事は理解でき、データベースからの情報の取得が非同期処理の為、その処理完了後に「Widget build」が実施されれば良いとは思うのですが、どうやって解決すれば良いのかわかりません。

どのようにすれば｢reloadTabs()｣により非同期処理の実行完了後に取得した情報で「Widget build」を実行できるのでしょうか。

該当のソースコード

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';

void main() {

    runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        initialRoute: '/',
        routes: {
          '/': (context)  => const MyApp(),
        },
      ),  
    );

}

class MyApp extends StatefulWidget {

  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => MyAppState();
  
}

class MyAppState extends State<MyApp> {

  int screenIndex = 0;

  final List<Widget> pages = [
    const FirstPage(),
    const SecondPage()
  ];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: pages[screenIndex],
      bottomNavigationBar: BottomNavigationBarPage(
        changeTab: (int index) {
          changeTab(index);
        }
      )
    );

  }

  void changeTab(int tabIndex) {

    setState(() {
      screenIndex = tabIndex;
    });

  }

}

class FirstPage extends StatefulWidget {

  const FirstPage({Key? key}) : super(key: key);

  @override
  FirstPageState createState() => FirstPageState();

}

class FirstPageState extends State<FirstPage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              '1ST Page',
            ),
          ],
        ),
      ),

    );

  }

}

class SecondPage extends StatefulWidget {

  const SecondPage({Key? key}) : super(key: key);

  @override
  SecondPageState createState() => SecondPageState();

}

class SecondPageState extends State<SecondPage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(
              '2ND Page',
            ),
          ],
        ),
      ),

    );

  }

}

class BottomNavigationBarPage extends StatefulWidget {

  const BottomNavigationBarPage({Key? key, required this.changeTab}) : super(key: key);

  final Function(int) changeTab;

  @override
  BottomNavigationBarPageState createState() => BottomNavigationBarPageState();

}

class BottomNavigationBarPageState extends State<BottomNavigationBarPage> {

  int tabIndex = 0;

  List<BottomNavigationBarItem> bottomItems = [];

  @override
  void initState() {

    super.initState();

    reloadTabs();

  }

  @override
  Widget build(BuildContext context) {

    return BottomNavigationBar(
      items: bottomItems,
      currentIndex: tabIndex,
      onTap: (index) {

        setState(() {
          tabIndex = index;
        });

        widget.changeTab(index);

      },
    );

  }

  void reloadTabs() async {

    final items = await DatabaseHelper.getTabs();

    List<BottomNavigationBarItem> tabItems = [];

    for (var item in items) {

      tabItems.add(
        BottomNavigationBarItem(
          icon: const Icon(Icons.square),
          label: item["name"],
        )
      );

    }

    setState(() {
      bottomItems = tabItems;
    });

  }

}

class DatabaseHelper {

  static Future<List<Map<String, dynamic>>> getTabs() async {

    final db = await DatabaseHelper.db();

    final rows = await db.rawQuery("""
      SELECT
        tabs.id,
        tabs.name
      FROM
        tabs
    """
    );

    return rows;

  }

  static Future<void> _onUpgrade(Database db, int oldVersion, int newVersion) async {

    await db.transaction((txn) async {

      if(oldVersion == 0){

        await txn.execute("""
          CREATE TABLE "tabs" (
            "id"	 INTEGER,
            "name" TEXT NOT NULL,
            PRIMARY KEY("id" AUTOINCREMENT)
          );
        """);

        await txn.execute("""
          INSERT INTO tabs(name) 
          VALUES("1ST")
        """);

        await txn.execute("""
          INSERT INTO tabs(name) 
          VALUES("2ND")
        """);

      }

    });

  }

  static Future<Database> db() async {

    final dbFilePath = await getDbPath();

    debugPrint(dbFilePath);

    return openDatabase(
      dbFilePath,
      version: 3,
      onUpgrade: _onUpgrade,
    );

  }

  static Future<String> getDbPath() async {
    
    var dbFilePath = '';

    if (Platform.isAndroid) {
      dbFilePath = await getDatabasesPath();
    } else if (Platform.isIOS) {
      final dbDirectory = await getLibraryDirectory();
      dbFilePath = dbDirectory.path;
    }

    final path = join(dbFilePath, 'app.db');

    return path;

  }

}

なお、動作の為に以下のパッケージを導入しております。

sqflite: ^2.0.3+1
path: ^1.8.2
path_provider: ^2.0.11

Answer 1

こういうasyncな関数の結果をもってWidgetを構築するのはFutureBuilderを使うのがFlutterの標準の作法です。
https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

ただ今回提示されたコードだとFutureBuilderに対応するには変更箇所がちょっと多そうなので、使わない形のコードを提示しておきます。（たぶん動くと思うけど）
変更前

    return BottomNavigationBar(

変更後

    return bottomItems.isEmpty? const CircularProgressIndicator():BottomNavigationBar(

まだDBからのロードが完了しておらずbottomItemsの中身が空だったらCircularProgressIndicatorを代わりに表示するという感じ。
またDBからのロード時間が極端に短い場合にはCircularProgressIndicatorではなくからのコンテナなどを配置してからにしておくというのもありかもしれない。

Comments

[Auxo]

ご回答ありがとう御座います。

確かに中身が空だったら･･･と処理すればいいと･･･。
言われてみればその通りです。
こんな単純な、と思いつつも全く思い至りませんでした。

また「FutureBuilder」は使っていなかったでの、少し勉強したいと思います。
今回はご指摘のように空の場合は代替の何かを返す方法で無事対応できました。

ありがとう御座いました。