Tabbar.image does not render at initialIndex for the first time

✓] Flutter (Channel stable, v1.17.3, on Mac OS X 10.15.5 19F101, locale zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.45.1)
[✓] Connected device (1 available)

TabBar(
                    labelColor: Theme.of(context).accentColor,
                    unselectedLabelColor: Theme.of(context).hintColor,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicator: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage('assets/618.png'),
                        fit: BoxFit.cover,
                      ),
                    ),
                    isScrollable: true,
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),

@mzl1988

Hi @mzl1988
it is possible the the widget containing the TabBar is build
before the image is loaded
could you please provide a minimal complete reproducible code sample.
Thank you

@iapicca

@iapicca

Hi, This is my code, thanks! https://github.com/mzl1988/tabbar_indicator_test

@mzl1988

Hi @mzl1988
I've tested this modified version of your code sample with the latest master

code

import 'dart:async';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  static const Widget _home = MyHomePage();
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: _home,
      );
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();
  static const String _url =
      'https://flutter.dev/assets/flutter-lockup-c13da9c9303e26b8d5fc208d2a1fa20c1ef47eb021ecadf27046dea04c0cebf6.png';

  Future<ImageProvider> _provider() async {
    NetworkImageDecoder _decoder = NetworkImageDecoder(
      image: NetworkImage(_url),
    );
    MemoryImageProvider _provider = MemoryImageProvider(image: await _decoder());
    return _provider();
  }

  @override
  Widget build(BuildContext context) => FutureBuilder<ImageProvider>(
      future: _provider(),
      builder: (BuildContext context, AsyncSnapshot<ImageProvider> snapshot) =>
          snapshot.hasError
              ? const Material(
                  child: Center(
                    child: Text('error'),
                  ),
                )
              : !snapshot.hasData
                  ? const Material(
                      child: Center(
                        child: Text('waiting'),
                      ),
                    )
                  : TabbarPage(
                      image: snapshot.data,
                    ),
                  );
}

class TabbarPage extends StatelessWidget {
  const TabbarPage({
    @required this.image,
    key,
  }) : super(key: key);
  final ImageProvider image;

  static const List<String> _tabs = ['One', 'Two', 'Three'];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: _tabs.length,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Sample'),
          bottom: TabBar(
            indicator: BoxDecoration(
              image: DecorationImage(
                image: image,
                fit: BoxFit.cover,
              ),
            ),
            isScrollable: true,
            tabs: [for (String name in _tabs) Tab(text: name)],
          ),
        ),
        body: TabBarView(children: [
          for (String name in _tabs)
            Center(
              child: Text('page $name'),
            ),
        ]),
      ),
    );
  }
}

class NetworkImageDecoder {
  const NetworkImageDecoder({this.image});
  final NetworkImage image;

  Future<ui.Image> call() async {
    final Completer<ImageInfo> completer = Completer();
    image.resolve(ImageConfiguration()).addListener(
          ImageStreamListener(
            (ImageInfo info, bool _) => completer.complete(info),
          ),
        );
    final ImageInfo _info = await completer.future;
    return _info.image;
  }
}

class MemoryImageProvider {
  const MemoryImageProvider({this.image});
  final ui.Image image;

  Future<ImageProvider> call() async {
    final ByteData _data =
        await image.toByteData(format: ui.ImageByteFormat.png);
    return MemoryImage(_data.buffer.asUint8List());
  }
}

doctor

[✓] Flutter (Channel master, 1.20.0-1.0.pre.29, on Mac OS X 10.15.5 19F101, locale en-GB)
    • Flutter version 1.20.0-1.0.pre.29 at /Users/nevercode/development/flutter_master
    • Framework revision 1d407de925 (11 hours ago), 2020-06-11 19:45:02 -0400
    • Engine revision d417772d7a
    • Dart version 2.9.0 (build 2.9.0-15.0.dev f043f9e5f6)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] VS Code
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.11.0

[✓] Connected device (3 available)
    • Pixel 3a   • 965AY0WP5C • android-arm64  • Android 10 (API 29)
    • Web Server • web-server • web-javascript • Flutter Tools
    • Chrome     • chrome     • web-javascript • Google Chrome 83.0.4103.97

• No issues found!

I can reproduce the issue
Thank you

Try this.

tabs: _tabs.map((String name) => Tab(
//          text: name,
          icon: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Text(name),
              Align(
                 alignment: Alignment.bottomCenter,
                  child: Offstage(
                    child: Image.asset(
                      "assets/618.png",
                    ),
                  )),
            ],
          ),
        )).toList(),
        ),

precacheImage(AssetImage("xxx.png"), context); can be solved.

Works for me. Thanks.

I'm looking at this issue and found why this happens:

TabBar is using _indicatorPainter, which is a CustomPainter to manage painting things in the whole bar, and each image on tabs is painted by a BoxPainter named _painter, which also takes image configuration:

flutter/packages/flutter/lib/src/material/tabs.dart

Line 571 in 6ff4a4a

_painter ??= indicator.createBoxPainter(markNeedsPaint);

flutter/packages/flutter/lib/src/material/tabs.dart

Lines 582 to 595 in 6ff4a4a

    
           final configuration = ImageConfiguration( 
        
             size: _currentRect!.size, 
        
             textDirection: _currentTextDirection, 
        
             devicePixelRatio: devicePixelRatio, 
        
           ); 
        
           if (showDivider && dividerHeight! > 0) { 
        
             final dividerPaint = Paint() 
        
               ..color = dividerColor! 
        
               ..strokeWidth = dividerHeight!; 
        
             final dividerP1 = Offset(0, size.height - (dividerPaint.strokeWidth / 2)); 
        
             final dividerP2 = Offset(size.width, size.height - (dividerPaint.strokeWidth / 2)); 
        
             canvas.drawLine(dividerP1, dividerP2, dividerPaint); 
        
           } 
        
           _painter!.paint(canvas, _currentRect!.topLeft, configuration);

In this scenario, image is loaded asynchronously, so tracing the flow, we will see what happened inside as below:

1 . In _indicatorPainter, it requests to create a boxpainter:

flutter/packages/flutter/lib/src/material/tabs.dart

Line 571 in 6ff4a4a

_painter ??= indicator.createBoxPainter(markNeedsPaint);

paint background image in BoxDecorationPainter

flutter/packages/flutter/lib/src/painting/box_decoration.dart

Lines 536 to 540 in 2343d68

    
           void _paintBackgroundImage(Canvas canvas, Rect rect, ImageConfiguration configuration) { 
        
             if (_decoration.image == null) { 
        
               return; 
        
             } 
        
             _imagePainter ??= _decoration.image!.createPainter(onChanged!);

handle asynchronous image source in DecorationImagePainter

flutter/packages/flutter/lib/src/painting/decoration_image.dart

Line 375 in 2343d68

final listener = ImageStreamListener(_handleImage, onError: _details.onError);

Inside _handleImage, if it's a non-synchronousCall, _onChanged callback is called:

flutter/packages/flutter/lib/src/painting/decoration_image.dart

Lines 423 to 425 in 2343d68

    
           if (!synchronousCall) { 
        
             _onChanged(); 
        
           }

_onChanged triggers markNeedsPaint callback, but in markNeedsPaint, it only sets _needsPaint flag to true but doesn't actually trigger a repaint. I did debugging and saw that shouldRepaint is not invoked, even though _needsPaint is true already.

I have an idea to fix this, it's on the way.

Fix TabBar.image does not render at initialIndex for the first time (#…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Fix TabBar.image does not render at initialIndex for the first time (…

Navigation Menu

Repository navigation

Tabbar.image does not render at initialIndex for the first time #59143

30 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	final configuration = ImageConfiguration(
	size: _currentRect!.size,
	textDirection: _currentTextDirection,
	devicePixelRatio: devicePixelRatio,
	);
	if (showDivider && dividerHeight! > 0) {
	final dividerPaint = Paint()
	..color = dividerColor!
	..strokeWidth = dividerHeight!;
	final dividerP1 = Offset(0, size.height - (dividerPaint.strokeWidth / 2));
	final dividerP2 = Offset(size.width, size.height - (dividerPaint.strokeWidth / 2));
	canvas.drawLine(dividerP1, dividerP2, dividerPaint);
	}
	_painter!.paint(canvas, _currentRect!.topLeft, configuration);

	void _paintBackgroundImage(Canvas canvas, Rect rect, ImageConfiguration configuration) {
	if (_decoration.image == null) {
	return;
	}
	_imagePainter ??= _decoration.image!.createPainter(onChanged!);

Tabbar.image does not render at initialIndex for the first time #59143

Description

Activity

iapicca commented on Jun 10, 2020

mzl1988 commented on Jun 12, 2020

iapicca commented on Jun 12, 2020

OctMon commented on Aug 6, 2020

Nomeleel commented on Nov 14, 2020

30 remaining items

Mahm0ud-Ahmed commented on Aug 2, 2024

Cedar-byte commented on Nov 4, 2024

jingkeling commented on Dec 2, 2025

huycozy commented on Dec 8, 2025

github-actions commented on Jan 21, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions