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()
            ])),
          ],
        ),
      ),
    );
  }
}

Pic of what I see

New contributor

Denuda Lots is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.