class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [
Card(
child: DefaultTabController(
length: 2,
child: Column(
children: const [
TabBar(
tabs: [
Tab(icon: Icon(Icons.cloud_outlined)),
Tab(icon: Icon(Icons.beach_access_sharp)),
],
),
SizedBox(
height: 300, // delete this.
child: TabBarView(
children: [
//ListView(shrinkWrap: true) ← and adjust the TabBarView to the height of this.
Text(''),
],
),
),
],
),
),
),
],
);
}
}
I'm working on a card that allows you to switch the content with the TabBar.I would like to make the height of the TabBarView match the height of the children's ListView, but I get an error when I remove the SizedBox or use Expanded. Can you please advise me on the option of using other widgets as well?
Try this -
class MTabs extends StatefulWidget {
@override
_StackOverState createState() => _StackOverState();
}
class _StackOverState extends State<MTabs>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
_tabController = TabController(length: 3, vsync: this);
super.initState();
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.all(8.0),
color: Theme.of(context).primaryColor,
child: Column(
children: [
// give the tab bar a height [can change height to preferred height]
Container(
height: 45,
decoration: BoxDecoration(
color: Theme.of(context).backgroundColor,
borderRadius: BorderRadius.circular(
25.0,
),
),
child: TabBar(
controller: _tabController,
// give the indicator a decoration (color and border radius)
indicator: BoxDecoration(
borderRadius: BorderRadius.circular(
25.0,
),
color: Theme.of(context).accentColor,
),
labelColor: Theme.of(context).textSelectionColor,
unselectedLabelColor: Theme.of(context).textSelectionColor,
tabs: [
// first tab [you can add an icon using the icon property]
const Tab(
text: ViewStrings.txtTab1,
),
// second tab [you can add an icon using the icon property]
const Tab(
text: ViewStrings.txtTab2,
),
// second tab [you can add an icon using the icon property]
Tab(
text: ViewStrings.txtTab3,
),
],
),
),
// tab bar view here
Expanded(
child: TabBarView(
controller: _tabController,
children: const [
// tab bar view widget
Tab1(),
Tab2(),
Tab3(),
],
),
),
],
),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.