Skip to content

PageView not rendering page correctly with conditional extendBodyBehindAppBar #103741

@Zolmy

Description

@Zolmy

Using a conditional statement that depends on the current page in extendBodyBehindAppBar breaks PageView. Navigating to the page that should extend behind the app bar will not render correctly unless its navigated to twice (click bottom nav bar when already on the broken page).

Please see dart pad example. Same result on flutter 3.0 and 2.10

Code sample
// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentPage = 0;
  late PageController controller;

  @override
  void initState() {
    super.initState();
    controller = PageController();
  }
  
  @override
  Widget build(BuildContext context) {
    try {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.transparent,
        elevation: 0
      ),
      extendBodyBehindAppBar: currentPage == 1, //conditional breaks pageview
      body: PageView(
        controller: controller,
        onPageChanged: (int index) {
          setState(() {
            currentPage = index;
          });
        },
        children: [
          Container(color: Colors.blue),
          Container(color: Colors.red),
          Container(color: Colors.green),
        ]
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentPage,
        onTap: (int index) {
          controller.jumpToPage(index);
        },
        items: const [
          BottomNavigationBarItem(
            label: "1",
            icon: Icon(Icons.circle)
          ),
          BottomNavigationBarItem(
            label: "2",
            icon: Icon(Icons.square)
          ),
          BottomNavigationBarItem(
            label: "3",
            icon: Icon(Icons.accessible)
          ),
        ]
      )
    );
    } catch (e) {
      print(e);
      return Container();
    }
  }
}

Metadata

Metadata

Assignees

Labels

f: material designflutter/packages/flutter/material repository.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work on

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions