DefaultTabController without Scaffold?

Question

I'm trying to use DefaultTabController in the middle of some widgets. So my TabBar could not be in AppBar and has to be down some widgets. So my problem is when I use TabBarView it crashes...

So here's an example of Flutter sample but no found how to do it without Scaffold.

final List<Tab> myTabs = <Tab>[
  Tab(text: 'LEFT'),
  Tab(text: 'RIGHT')];

Code

DefaultTabController(
  length: myTabs.length,
  child: Scaffold(
    appBar: TabBar(
      tabs: myTabs,
    ),
    body: TabBarView(
      children: myTabs.map((Tab tab) {
        final String label = tab.text.toLowerCase();
        return Center(
          child: Text(
            'This is the $label tab',
            style: const TextStyle(fontSize: 36),
          ),
        );
      }).toList(),
    ),
  ),
);

Here is another example of a TabBar I should do image

Real Code

class ProfileTabBarNavigation extends StatelessWidget {
 final List<Tab> myTabs = <Tab>[
   const Tab(text: kArtwork),
   const Tab(text: kPastJobs)];
@override
Widget build(BuildContext context) {
return DefaultTabController(
  length: 2,
  initialIndex: 0,
  child: Padding(
    padding: kPaddingTabBar,
    child: Container(
      padding: EdgeInsets.all(5.0),
      decoration: BoxDecoration(
        color: kLightGrey,
        borderRadius: BorderRadius.all(
          Radius.circular(50),
        ),
      ),
      child: Column(children: <Widget>[
        TabBar(
          tabs: myTabs,
          unselectedLabelColor: Colors.black54,
          labelColor: Colors.black,
          unselectedLabelStyle: kBoldText,
          labelStyle: kBoldText,
          indicatorSize: TabBarIndicatorSize.tab,
          indicator: BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(50),
            color: Colors.white,
          ),
        ),
        TabBarView(
          children: myTabs.map((Tab tab) {
            final String label = tab.text.toLowerCase();
            return Center(
              child: Text(
                'This is the $label tab',
                style: const TextStyle(fontSize: 36),
              ),
            );
          }).toList(),
        ),
      ]),
    ),
  ),
);
}
}

@Kahou I want to use it, and sorry for not expressing good, but when I use `TabBarView` it crashes... — Jonathan Gómez, Feb 23 '20 at 13:07
11 exceptions... RenderCustomMultiChildLayoutBox object was given an infinite size during layout. _RenderInkFeatures object was given an infinite size during layout. RenderPhysicalModel object was given an infinite size during layout. — Jonathan Gómez, Feb 23 '20 at 13:17
@Kahou One of my ideas was to use instead of `Scaffold`, `Column`, but has different errors... Horizontal viewport was given unbounded height. RenderBox was not laid out: RenderViewport#ab47d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' — Jonathan Gómez, Feb 23 '20 at 13:21

Kahou · Accepted Answer · 2020-02-23T14:57:45.120

8

Wrap your TabBarView with Expanded.

Expanded(
 child: TabBarView(//...),
),

Try it on DartPad

edited Feb 23 '20 at 14:57

answered Feb 23 '20 at 14:25

Kahou

3,200
1
14
21

1

Not working :( I have this error >RenderFlex children have non-zero flex but incoming height constraints are unbounded. – Jonathan Gómez Feb 23 '20 at 14:44
With Sizeboxed and putting a height doesn't crash... But the heigh could change depend on the content... – Jonathan Gómez Feb 23 '20 at 14:50
Could you please, pass the link of your DartPad? – Jonathan Gómez Feb 23 '20 at 15:01
I added.~~~~~~~ – Kahou Feb 23 '20 at 15:03
In the DartPad works but in my project doesn't work XD – Jonathan Gómez Feb 23 '20 at 15:10
I see the problem if you add in the class `MyApp` and put `child: Column(children:[Text('Hey'), ProfileTabBarNavigation()]),`, doesn't work – Jonathan Gómez Feb 23 '20 at 15:19
Replace `Column` with `Scaffold` in `DefaultTabController`. I updated DartPad. – Kahou Feb 23 '20 at 16:53
But the problem was to insert `DefaultTabController` in the middle of some widgets, inside a `Column` – Jonathan Gómez Feb 23 '20 at 19:19
Yes, see the DartPad. It is after Text('Hey') in `Column`. – Kahou Feb 23 '20 at 19:22
Sorry I didn't refresh the page and it appears the old one – Jonathan Gómez Feb 23 '20 at 19:31

score 1 · Answer 2 · answered Feb 23 '20 at 12:53

1

you can use defaultTabView in middle of screen or use one of this packages

Bubble Tab Indicator

MD2 Tab Indicator

answered Feb 23 '20 at 12:53

Amir

2,225
2
18
27

Thanks for these packages. I would not used in this screen, but I could use it in another that I thought about it. – Jonathan Gómez Feb 23 '20 at 13:11

score 1 · Answer 3 · answered Nov 18 '22 at 10:10

  Create a stateful widget like below

  import 'package:flutter/material.dart';
  import 'package:flutter_text_to_image/utils/app_colors.dart';
  
  /*
  Title: TabBarWidget
  Purpose: To Display TabBar in a Screen
  Created On : 16/11/2022
  Last Updated on : 16/11/2022
  Author : Kalpesh Khandla
  */

  class TabBarWidget extends StatefulWidget {
  final String firstTabTxt;
  final String firstTabViewTxt;
  final String secondTabTxt;
  final String secondTabViewTxt;
  const TabBarWidget({
  super.key,
  required this.firstTabTxt,
  required this.secondTabTxt,
  required this.firstTabViewTxt,
  required this.secondTabViewTxt,
  });
  @override
  State
  <TabBarWidget>
  createState() => _TabBarWidgetState();
  }
  class _TabBarWidgetState extends State
  <TabBarWidget>
  with SingleTickerProviderStateMixin {
  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 Container(
  height: 100,
  child: Column(
  children: [
  Container(
  height: 35,
  decoration: BoxDecoration(
  border: Border.all(
  color: AppColors.tabBorderColor,
  ),
  borderRadius: BorderRadius.circular(
  5.0,
  ),
  ),
  child: TabBar(
  controller: _tabController,
  indicator: BoxDecoration(
  gradient: LinearGradient(
  colors: [
  AppColors.waterMelonColor,
  AppColors.mangoColor,
  AppColors.azureColor,
  AppColors.sapphireColor,
  ],
  begin: FractionalOffset(0.0, 0.0),
  end: FractionalOffset(1.0, 0.0),
  stops: [
  0.1,
  0.4,
  0.6,
  1.0,
  ],
  tileMode: TileMode.clamp,
  ),
  borderRadius: BorderRadius.circular(
  2.0,
  ),
  ),
  labelColor: AppColors.whiteColor,
  unselectedLabelColor: AppColors.blackColor,
  tabs: [
  Tab(
  text: widget.firstTabTxt,
  ),
  Tab(
  text: widget.secondTabTxt,
  ),
  ],
  ),
  ),
  Expanded(
  child: TabBarView(
  controller: _tabController,
  children: [
  Padding(
  padding: EdgeInsets.only(top: 10),
  child: Column(
  children: [
  Text(
  widget.firstTabViewTxt,
  ),
  ],
  ),
  ),
  Padding(
  padding: EdgeInsets.only(top: 10),
  child: Column(
  children: [
  Text(
  widget.secondTabViewTxt,
  ),
  ],
  ),
  ),
  ],
  ),
  ),
  ],
  ),
  );
  }
  }

and use it like a below :


TabBarWidget(
firstTabTxt: "Tab1",
firstTabViewTxt: "Tab1 View",
secondTabTxt: "Tab1",
secondTabViewTxt: "Tab2 View",
),

the code is not formatted and is hard to follow, can you please use the tools to format this code section? — kilokahn, Jun 01 '23 at 05:14

DefaultTabController without Scaffold?

3 Answers3

Linked