Skip to content

TabBarView.viewportFraction change is ignored #135557

@bleroux

Description

@bleroux

Is there an existing issue for this?

Steps to reproduce

  1. Run the code sample.
  2. Press the "Set viewportFraction to 0.6" button.

Expected results

The TabBarView view port is reduced:

Capture d’écran du 2023-09-27 10-28-10

Actual results

The TabBarView is unchanged:
Capture d’écran du 2023-09-27 10-27-17

Code sample

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(const TabBarViewHome());
}

class TabBarViewHome extends StatelessWidget {
  const TabBarViewHome({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const TabBarViewViewportFractionNotUpdatable(),
    );
  }
}

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

  @override
  State<TabBarViewViewportFractionNotUpdatable> createState() =>
      _TabBarViewViewportFractionNotUpdatableState();
}

class _TabBarViewViewportFractionNotUpdatableState
    extends State<TabBarViewViewportFractionNotUpdatable>
    with TickerProviderStateMixin {
  TabController? _tabController;
  double viewPortFraction = 1.0;

  @override
  void dispose() {
    _tabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final List<String> tabs = <String>['Red', 'Green', 'Blue'];

    void reduceViewPortFraction() {
      setState(() {
        viewPortFraction = 0.6;
      });
    }

    return DefaultTabController(
      length: 3,
      initialIndex: 1,
      child: Scaffold(
        appBar: AppBar(
          title: Center(
            child: FilledButton(
              onPressed: reduceViewPortFraction,
              child: const Text('Set viewportFraction to 0.6'),
            ),
          ),
          bottom: TabBar(
            tabs: tabs.map<Widget>((String tab) => Tab(text: tab)).toList(),
          ),
        ),
        body: TabBarView(
          viewportFraction: viewPortFraction,
          children: <Widget>[
            Container(color: Colors.red),
            Container(color: Colors.green),
            Container(color: Colors.blue),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

No response

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[!] Flutter (Channel [user-branch], 3.14.0-6.0.pre.736, on Ubuntu 23.04 6.2.0-33-generic, locale fr_FR.UTF-8)
    ! Flutter version 3.14.0-6.0.pre.736 on channel [user-branch] at /home/bruno/Nevercode/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
    ! Upstream repository unknown source is not the same as FLUTTER_GIT_URL
    • FLUTTER_GIT_URL = [email protected]:NevercodeHQ/flutter.git
    • Framework revision 7c5838ac51 (il y a 33 minutes), 2023-09-27 09:56:42 +0200
    • Engine revision 230dfeed79
    • Dart version 3.2.0 (build 3.2.0-199.0.dev)
    • DevTools version 2.28.0-dev.12
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /media/oldhome/Android/Sdk
    • Platform android-33-ext5, build-tools 33.0.2
    • ANDROID_HOME = /media/oldhome/Android/Sdk
    • Java binary at: /media/oldhome/Produits/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • Ubuntu clang version 15.0.7
    • cmake version 3.25.1
    • ninja version 1.11.1
    • pkg-config version 1.8.1

[✓] Android Studio (version 2021.3)
    • Android Studio at /media/oldhome/Produits/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code (version unknown)
    • VS Code at /snap/code/current
    • Flutter extension version 3.72.0
    ✗ Unable to determine VS Code version.

[✓] Connected device (2 available)
    • Linux (desktop) • linux  • linux-x64      • Ubuntu 23.04 6.2.0-33-generic
    • Chrome (web)    • chrome • web-javascript • Google Chrome 117.0.5938.88

[✓] Network resources
    • All expected network resources are available.

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listf: material designflutter/packages/flutter/material repository.found in release: 3.15Found to occur in 3.15frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions