ボトムナビゲーションバーに画像を使用した際、読み込み中に何も表示されない

Question

前提・実現したいこと

Flutterを使用したスマホアプリを作っています。
ボトムナビゲーションバーでオリジナルの画像を使用しています。
現状表示はできているのですが、画像を使用した際、読み込み中の２〜３秒間、何も表示されないのですが、何かいい方法ありましたら教えてもらいたいです。
現状のコードではニュースページのみ、非同期処理を行って、通知の有無で場合わけしています。

発生している問題・エラーメッセージ

特になし

該当のソースコード

以下、main.dart

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

import 'custom_bottom_navigation_bar.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setPreferredOrientations([
  ]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _selectedIndex = 0;
  PageController _pageController;

  static List<Widget> _pageList = [
    SimplePage(text: 'ホーム'),
    SimplePage(text: 'ニュース'),
    SimplePage(text: '検索'),
    SimplePage(text: 'その他'),
  ];

  void _onPageChanged(int index){
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  void initState() {
    _pageController = PageController(
      initialPage: _selectedIndex,
    );
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("SampleApp"),
      ),
      body: _pageList.elementAt(_selectedIndex),
      bottomNavigationBar: CustomBottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );

  }

  void _onItemTapped(int index) => setState(() => _selectedIndex = index);
}

class SimplePage extends StatelessWidget {
  final String text;
  SimplePage({this.text});
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(text),
    );
  }
}

以下、custom_bottom_navigation_bar.dart

import 'package:flutter/material.dart';

class CustomBottomNavigationBar extends BottomNavigationBar {
  CustomBottomNavigationBar({int currentIndex, ValueChanged<int> onTap})
    : super (
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: (currentIndex == 0)
            ? Image.asset("images/icon/home_on.png")
            : Image.asset("images/icon/home_off.png"),
          label: 'ホーム', 
        ),
        BottomNavigationBarItem(
          icon: (currentIndex == 1)
            ? Image.asset("images/icon/news_on.png")
            : NewsOffIcon(),
          label: 'ホーム', 
        ),
        BottomNavigationBarItem(
          icon: (currentIndex == 2)
            ? Image.asset("images/icon/serch_on.png")
            : Image.asset("images/icon/serch_off.png"),
          label: 'ホーム', 
        ),
        BottomNavigationBarItem(
          icon: (currentIndex == 3)
            ? Image.asset("images/icon/other_on.png")
            : Image.asset("images/icon/other_off.png"),
          label: 'ホーム', 
        ),
      ],
      currentIndex: currentIndex,
      onTap: onTap,
      selectedItemColor: Colors.red,
      unselectedItemColor: Colors.grey,
      type: BottomNavigationBarType.fixed,
    );
}

class NewsOffIcon extends StatefulWidget {
  @override
  _NewsOffIconState createState() => _NewsOffIconState();
}

class _NewsOffIconState extends State<NewsOffIcon> {
  Future<bool> _future;
  bool hasNew = false;

  @override
  void initState() {
    _future = _hasNewInfo();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _future,
      builder: (context, snapshot) {
        if(snapshot.hasData){
          if(hasNew){
            //通知がある場合の画像
          return Image.asset("images/icon/news_off_new.png");
          }
        }
        //通知がない場合の画像
        return Image.asset("images/icon/news_off.png");
      }
    );
  }

  Future<bool> _hasNewInfo() async {
    //非同期処理
    //新着通知がある場合、hasNew = trueの処理
  }
}

Answer 1

確かにアセットからの読み込み遅いですよねFlutter。
precacheImage関数であらかじめロードしておくことはできます。
https://api.flutter.dev/flutter/widgets/precacheImage.html
使うタイミングが重要なのでよく考えてください。

Comments

[Inete6Q]

いつもありがとうございます！
precacheImage知らなかったので調べて使ってみようかと思います！