I'm new to Flutter and I was learning about tab bars but I can't fix this problem where the contents of the tab bar view are stretched. I tried a simple black box, then I also tried images but it also got stretched. How do I fix this problem and am I even doing tab bars correctly?
P.S. this is my first time using stack overflow, apologies if the formatting of this question is messy.
This is one of my tabs:
import 'package:flutter/material.dart';
class topCharts_tab extends StatelessWidget {
const topCharts_tab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 5, top: 10),
child: SizedBox(
width: 100, // Set a specific width
height: 100, // Set a specific height
child: Container(
color: Colors.black,
),
),
);
}
}
This is my main
import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:practice/tabs/forYou_tab.dart';
import 'package:practice/tabs/topCharts_tab.dart';
void main() => runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 5,
child: MyApp(),
),
));
class MyApp extends StatelessWidget {
const MyApp({Key? key});
@override
Widget build(BuildContext context) {
double screenWidth = MediaQuery.of(context).size.width;
return DefaultTabController(
length: 5,
child: Scaffold(
body: Column(
children: [
Row(
children: [
SizedBox(height: screenWidth * 0.3),
Padding(
padding: const EdgeInsets.only(left: 15, top: 30),
child: Container(
width: screenWidth * 0.65,
height: screenWidth * 0.14,
child: TextField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: 'Search apps & ...',
hintStyle: TextStyle(fontSize: 17),
fillColor: Color.fromRGBO(227, 230, 238, 1.0),
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: BorderSide.none,
),
prefixIcon: Padding(
padding: const EdgeInsets.only(left: 13),
child: Icon(
Icons.search_rounded,
size: screenWidth * 0.07,
),
),
suffixIcon: Padding(
padding: const EdgeInsets.only(right: 13),
child: Icon(
Icons.mic_rounded,
size: screenWidth * 0.07,
),
)),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 27, left: 8),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.notifications_none_rounded),
iconSize: screenWidth * 0.08,
),
),
Padding(
padding: const EdgeInsets.only(top: 27),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.account_circle_rounded),
iconSize: screenWidth * 0.1,
),
),
],
),
TabBar(
labelPadding: EdgeInsets.only(left: 25, right: 25),
tabAlignment: TabAlignment.start,
isScrollable: true,
tabs: [
Tab(icon: Text('For you')),
Tab(icon: Text('Top charts')),
Tab(icon: Text('Kids')),
Tab(icon: Text('Premium')),
Tab(icon: Text('Categories')),
]),
Expanded(
child: TabBarView(children: [
forYou_tab(),
topCharts_tab()
])),
],
),
),
);
}
}
In your topCharts_tab
class, you're using a SizedBox
with a fixed width and height, which might not be appropriate for every screen size. You need to remove it.
class TopChartsTab extends StatelessWidget {
const TopChartsTab({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 5, top: 10),
child: Container(
color: Colors.black,
),
);
}
}