Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Content scrolling under tab bar #72

Closed
cedvdb opened this issue Feb 16, 2022 · 1 comment
Closed

Content scrolling under tab bar #72

cedvdb opened this issue Feb 16, 2022 · 1 comment

Comments

@cedvdb
Copy link

cedvdb commented Feb 16, 2022

In the repro below the content is scrolling under the tab bar. I'm unsure this is a bug because the tab bar is set to have a collapsedSize of 0, However there is a bottom tab bar displayed and I think it should be taken into account. If there is a way to do this it is not exactly clear from the documentation either imo.

Repro

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late final TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 2, vsync: this);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) => [
        SliverAppBar(
      collapsedHeight: 0,
      toolbarHeight: 0,
      pinned: true,
      expandedHeight: 250,
          bottom: TabBar(
            controller: tabController,
            tabs: const [
              Tab(text: 'A'),
              Tab(text: 'B'),
            ],
          ),
        ),
      ],
      body: TabBarView(
        controller: tabController,
        children: [
          SingleChildScrollView(
            child: MyTabView(),
          ),
          SingleChildScrollView(
            child: MyTabView(),
          ),
        ],
      ),
    );
  }
}

class MyTabView extends StatelessWidget {
  final List<Person> persons = [
    Person('Jack', age: 20),
    Person('John', age: 21),
//     Person('Doe', age: 25),
//     Person('Neil Young', age: 25),
//     Person('Joe rogan', age: 45),
//     Person('David Bowie', age: 45),
//     Person('Whatever', age: 45),
//     Person('Whatever', age: 45),
//     Person('Whatever', age: 45),
//     Person('Whatever', age: 45),
  ];

  MyTabView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (final person in persons)
          Card(
            child: Column(
              children: [
                ListTile(
                  title: const Text('name'),
                  trailing: Text(person.name),
                ),
                ListTile(
                  title: const Text('age'),
                  trailing: Text(person.age.toString()),
                ),
                ListTile(
                  title: const Text('male'),
                  trailing: Text(person.male.toString()),
                ),
              ],
            ),
          )
      ],
    );
  }
}

class Person {
  final String name;
  final bool male;
  final int age;
  Person(
    this.name, {
    required this.age,
    this.male = true,
  });
}
@cedvdb
Copy link
Author

cedvdb commented Feb 16, 2022

wrong repository

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant