flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
165.32k stars 27.28k forks source link

Is it possible to place a Tab container as a child of listview? #19081

Closed pepie closed 5 years ago

pepie commented 6 years ago

Hello. I am new to Flutter, and trying understand tab containers. I want a layout, with the screen consisting of a widget (say a container) on top, and the tabview below this container. ex: [-widget1] [-possible widget 2--] [-tab bar--&-- tabview]

What is the best way to accomplish this? With the following code, the screen renders, but only the top container is visible - the tabbar and tabview is not. No errors are thrown.

Is this layout possible, or must the tab container be part of the root scaffold?

class Demo extends StatefulWidget{
  Demo({Key key, this.title}): super(key: key);
  final String title;

  @override
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> with SingleTickerProviderStateMixin{
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    this._tabController = new TabController(length: 3, vsync: null);
  }

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Demo Tabs')
      ),
      body: new ListView(
        children: [
          new Container(
              height: 240.0,
              color: Colors.black,
          ),
          new Scaffold(
                resizeToAvoidBottomPadding: true,
                appBar: AppBar(
                  bottom: TabBar(
                    controller: _tabController,
                    tabs: [
                      Tab(icon: Icon(Icons.directions_car)),
                      Tab(icon: Icon(Icons.directions_transit)),
                      Tab(icon: Icon(Icons.directions_bike)),
                    ],
                  ),
                  title: Text('Tabs Demo'),
                ),
                body: TabBarView(
                  controller: _tabController,
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
                ),
              ),
          ],
        ),
    );
  }
}
zoechi commented 6 years ago

I think this question is a good fit for StackOverflow

omidraha commented 3 years ago

SO link: https://stackoverflow.com/questions/45588300/can-i-use-a-tabbar-and-tabbarview-as-an-in-page-widget

github-actions[bot] commented 3 years ago

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.