Question 242399 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to put TabBarView's content at AppBar level after setting extendBodyBehindAppBar to true?

I’m trying to make the images that are inside the children of TabBarView to be on same top level as the AppBar. It works for other widgets, such as Images, Text, etc, but not for TabBarView.

MaterialApp(
      debugShowCheckedModeBanner: false,
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        extendBodyBehindAppBar: true,
        endDrawer: EndDrawerButton(
          onPressed: () {},
        ),
        appBar: AppBar(
          actions: [
            EndDrawerButton(
              onPressed: () {},
              style: const ButtonStyle(
                  iconColor: MaterialStatePropertyAll(Colors.white)),
            )
          ],
          toolbarHeight: 50,
          backgroundColor: Colors.transparent,
          elevation: 0,
        ),
        body: DefaultTabController(
          length: 3,
          child: SizedBox(
            width: 460,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  color: Colors.transparent,
                  width: 500,
                  height: 800,
                  child: TabBarView(children: [
                  Image.asset('lib/assets/images/luggage.png'),
                  Image.asset('lib/assets/images/luggage.png'),
                  Image.asset('lib/assets/images/window.png'),
                ]),
                ),
                
                TabBar(tabs: [
                  Container(
                    height: 20,
                    width: 50,
                    decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(15))),
                    child: OutlinedButton(
                        onPressed: () {}, child: const Text('One')),
                  ),
                  Container(
                    height: 20,
                    width: 50,
                    decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(15))),
                    child: OutlinedButton(
                        onPressed: () {}, child: const Text('Two')),
                  ),
                  Container(
                    height: 20,
                    width: 50,
                    decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.all(Radius.circular(15))),
                    child: OutlinedButton(
                        onPressed: () {}, child: const Text('Three')),
                  ),
                ]),

I tried using images and other widgets, seems to work, but not TabBarView, any workaround this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved it by wrapping it with SingleChildScrollView.


  2. 0

    As per my understanding, this is what you wanted to achieve. If I’m thinking I’m going in the right direction. So, replace your build method with mine. Try & test the below-mentioned code & provide an update for the same. If you think I misunderstood, feel free to add a comment.

      @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
      ),
      body: const DefaultTabController(
        length: 3,
        child: Column(
          children: <Widget>[
            Expanded(
              child: TabBarView(
                children: <Widget>[
                  ColoredBox(
                    color: Colors.blue,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[FlutterLogo(), Text("TabBarView 1")],
                    ),
                  ),
                  ColoredBox(
                    color: Colors.pink,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[FlutterLogo(), Text("TabBarView 2")],
                    ),
                  ),
                  ColoredBox(
                    color: Colors.amber,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[FlutterLogo(), Text("TabBarView 3")],
                    ),
                  ),
                ],
              ),
            ),
            TabBar(
              tabs: <Tab>[
                Tab(
                  height: 80,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[FlutterLogo(), Text("TabBar 1")],
                  ),
                ),
                Tab(
                  height: 80,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[FlutterLogo(), Text("TabBar 2")],
                  ),
                ),
                Tab(
                  height: 80,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[FlutterLogo(), Text("TabBar 3")],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search