flutter problem: how to manage height in tabbar - flutter

Question

I have a problem this that in my android device cwctv page is working but in IOS Device giving height error,so how to set height for every device.
I have a problem this that in my android device cwctv page is working but in IOS Device giving height error,so how to set height for every device.
I have a problem this that in my android device cwctv page is working but in IOS Device giving height error,so how to set height for every device.
this is my cwctv page.
#override
Widget build(BuildContext context) {
return Scaffold(backgroundColor: Colors.white,
resizeToAvoidBottomInset: false,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.black),
automaticallyImplyLeading: true,
backgroundColor: Colors.white,
elevation: 0.5, ),
drawer: Drawer(
child: SideBar(),
),
floatingActionButton: Padding(
padding: const EdgeInsets.only(top: 18.0),
child: Container(
height: 80,
width: 80,
child: FittedBox(
child: FloatingActionButton(
focusColor: Colors.transparent,
backgroundColor: selectBlueColor,
onPressed: () {
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) => HomePage()));
},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Image.asset(
'assets/home_icon.png',
),
elevation: 1.0,
highlightElevation: 2,
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: Container(
// height: MediaQuery.of(context).size.height * (10 / 100),
child: BottomNavBarTV()),
body: Stack(
children: [
Padding(
padding: const EdgeInsets.only(left: 16.0,right: 16,bottom: 4,top: 0),
child: SizedBox(
height: 60,
child: TextField( keyboardType: TextInputType.text,
onChanged: (value) {
setState(() {
print("tab on cwctv page $cwcTvTab");
});
},
// controller: cwcTvTab == 3 ?searchImageQuery : cwcTvTab == 2 ?searchPdfQuery : cwcTvTab == 1 ? searchAudioQuery : searchVideoQuery,
controller: searchQuery,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
filled: true,
fillColor: const Color(0xFFF1F2F6),
hintText: 'Search for Wellness Tips & Tricks',
suffixIcon: const Icon(
Icons.search_outlined,
color: Color(0xFF444444),
),
),
)
)),
Padding(
padding: EdgeInsets.only(top: 70.0),
child: TestScreen(widget.selectTab),
),
// CwcTVPageChanger(),
// VideoComponent(),
],
),
);
}
This is my tab screen page.
import 'package:cwc/constants/constants.dart';
import 'package:cwc/ui/CwcTv/components/images/image_document.dart';
import 'package:cwc/ui/CwcTv/components/podcast/podcast_list.dart';
import 'package:cwc/ui/CwcTv/components/slides/slide_component.dart';
import 'package:cwc/ui/CwcTv/components/videos/video_component.dart';
import 'package:cwc/ui/CwcTv/cwc_tv.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:cwc/constants/constant_functions.dart';
class TestScreen extends StatefulWidget {
int selectedPage;
TestScreen(this.selectedPage);
#override
State<TestScreen> createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> with SingleTickerProviderStateMixin, WidgetsBindingObserver {
void _handleTabSelection() {
setState(() {});
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
// _tabSection(context, widget.selectedPage,controller!),
_tabSection(context, widget.selectedPage),
],
);
}
}
Widget _tabSection(BuildContext context, var selectedPage) {
return DefaultTabController(
initialIndex: selectedPage,
length: 4,
child: SafeArea(
child: Column(
// mainAxisSize: MainAxisSize.min,
children: [
TabBar(
indicatorColor: Colors.black,
onTap: (v) {
cwcTvTab = v;
},
isScrollable: true,
// physics: NeverScrollableScrollPhysics(),
labelColor: Colors.black,
tabs: [
Tab(
child: Text(
'Video',
style: GoogleFonts.poppins(color: Colors.black),
),
),
Tab(
child: Text(
'Podcast',
style: GoogleFonts.poppins(color: Colors.black),
),
),
Tab(
child: Text(
'Documents',
style: GoogleFonts.poppins(
color: Colors.black,
),
),
),
Tab(
child: Text(
'Images',
style: GoogleFonts.poppins(color: Colors.black),
),
),
],
),
Container(
height: MediaQuery.of(context).size.height - 282,
// height: MediaQuery.of(context).size.height - 205,
// height: double.infinity,
child:
TabBarView( physics: NeverScrollableScrollPhysics(),
children: [
VideoComponent(),
PodcastList(),
SlideComponent(),
ImageDocument(),
]),
),
],
),
),
);
}
this is my android Device's screenshot.
this is my IOS Device's screenshot.

Answer 1

There is 2 options you can use, first try with indicator like this one:
TabBar(
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 5.0),
insets: EdgeInsets.symmetric(horizontal:16.0)
),
indicatorColor: Colors.black,
onTap: (v) {
cwcTvTab = v;
},
isScrollable: true,
// physics: NeverScrollableScrollPhysics(),
labelColor: Colors.black,
tabs: [
Tab(
child: Text(
'Video',
style: GoogleFonts.poppins(color: Colors.black),
),
),
Tab(
child: Text(
'Podcast',
style: GoogleFonts.poppins(color: Colors.black),
),
),
Tab(
child: Text(
'Documents',
style: GoogleFonts.poppins(
color: Colors.black,
),
),
),
Tab(
child: Text(
'Images',
style: GoogleFonts.poppins(color: Colors.black),
),
),
],
),
Or you can just wrap it with a container.
PreferredSize(
preferredSize: const Size.fromHeight(10),
child: Container(
height: 50,
child: TabBar(
indicatorColor: Colors.black,
isScrollable: true,
labelColor: Colors.black,
tabs: [
Tab(
child: Text(
'Video',
),
),
Tab(
child: Text(
'Podcast',
),
),
Tab(
child: Text(
'Documents',
),
),
Tab(
child: Text(
'Images',
),
),
],
),
),
),