NeverScrollableScrollPhysics() is not working in flutter and need advice about tab padding/margin

Question

#1. I was making a tab menus using tabcontroller, and I wanted to stop its tab scrolling ability, and wanted to select tab using tab menu click.

I was trying with physics: NeverScrollableScrollPhysics(), but failed. As a newbie, I don't understand what is the problem or what I am missing!

Here is A GIF file to illustrate my scenario --> here

#2. In this Scenario, the "Places", means the first tab is maintains a padding, how can I remove it and push it to the left, from where the body started?

Thanks in Advance :)

My Code -->

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'dart:math' as math;
void main() => runApp(StartPage());
class StartPage extends StatelessWidget {
 static const String _title = 'TravelApp';
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 debugShowCheckedModeBanner: false,
 title: _title,
 home: Scaffold(body: StartPage1()),
 );
 }
}
class StartPage1 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 dynamic screenHeight = MediaQuery.of(context).size.height;
 dynamic screenwidth = MediaQuery.of(context).size.width;
 return Scaffold(
 body: Container(
 height: screenHeight,
 width: screenwidth,
 padding: EdgeInsets.symmetric(
 horizontal: screenwidth * 0.03,
 vertical: screenHeight * 0.02,
 ),
 child: Container(
 // Places BAr
 height: screenHeight * 0.20,
 child: MaterialApp(
 debugShowCheckedModeBanner: false,
 home: DefaultTabController(
 length: 3,
 child: Scaffold(
 appBar: PreferredSize(
 preferredSize: Size.fromHeight(screenHeight * 0.076607387),
 child: new Container(
 child: SafeArea(
 child: Column(
 children: <Widget>[
 Expanded(
 child: Container(),
 ),
 Container(
 height: screenHeight * 0.05,
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 screenHeight * 0.02,
 ),
 alignment: Alignment.centerLeft,
 child: TabBar(
 indicator: CircleTabIndicator(
 color: Color(0xFF7675E0),
 radius: 4,
 ),
 isScrollable: true,
 labelColor: Color(0xFF7675E0),
 unselectedLabelColor: Colors.grey,
 physics: NeverScrollableScrollPhysics(),
 tabs: <Widget>[
 Align(
 alignment: Alignment.centerLeft,
 child: Text(
 "Placess",
 style: GoogleFonts.sniglet(),
 ),
 ),
 Tab(
 child: Text(
 "Activities",
 style: GoogleFonts.sniglet(),
 ),
 ),
 Tab(
 child: Text(
 "Hotels",
 style: GoogleFonts.sniglet(),
 ),
 ),
 ],
 ),
 )
 ],
 ),
 ),
 ),
 ),
 body: TabBarView(
 children: <Widget>[
 Container(
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: <Widget>[
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1002.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Mountain",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1017.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Beach",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1013.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Location",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 screenHeight * 0.012311902,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1002.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "More",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 ],
 ),
 ),
 Container(
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: <Widget>[
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1004.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Mountain",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1013.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Beach",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1017.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Location",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1004.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "More",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 ],
 ),
 ),
 Container(
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: <Widget>[
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1002.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Mountain",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1013.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Beach",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1017.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "Location",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 Container(
 width: screenwidth * 0.18,
 child: Column(
 children: <Widget>[
 Container(
 margin: EdgeInsets.fromLTRB(
 0,
 0,
 0,
 9,
 ),
 child: ClipOval(
 child: Material(
 child: InkWell(
 splashColor: Color(0xFF7675E0),
 child: SizedBox(
 width: screenwidth * 0.136253041,
 height: screenHeight * 0.076607387,
 child: Image(
 image:
 AssetImage('assets/1004.png'),
 ),
 ),
 onTap: () {},
 ),
 ),
 ),
 ),
 Text(
 "More",
 style: GoogleFonts.sniglet(
 color: Colors.black45,
 ),
 ),
 ],
 ),
 ),
 ],
 ),
 ),
 ],
 ),
 ),
 ),
 ),
 ),
 ),
 );
 }
}

• Dmytro Rostopira: Why do you have isScrollable: true?
• xahid_rocks: @DimaRostopira to align them and in case the tab name excess the limit,then it will hide them, will not break them!

Answer 1

For the tabbar scrolling issue: you will need to set the NeverScrollableScrollPhysics() in TabBarView's physics property, and not in the TabBar's physics property.