According to your requirement, you want to add scrolling functionality to the child within the parent, where currently the page scrolls along with the TabBar and TabBarView (on the home page).
If anything is unclear please let me know.
Explanation: I added height and width to the Container and used the Expanded widget to occupy all available space. This ensures that we achieve scrolling within the child.
Happy coding
class MainStuff extends StatefulWidget {
const MainStuff({super.key});
@override
State<MainStuff> createState() => _MainStuffState();
}
class _MainStuffState extends State<MainStuff> with TickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.sizeOf(context);
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
surfaceTintColor: Colors.white,
toolbarHeight: 120,
backgroundColor: Colors.white,
centerTitle: false,
title: Text("testing scrolling"),
scrolledUnderElevation: 20,
elevation: 20,
),
body: SingleChildScrollView(
child: Container(
height: size.height,
width: size.width,
child: Column(
children: [
Material(
elevation: 10,
shadowColor: Colors.black26,
color: Colors.white,
child: TabBar(
labelColor: Colors.green[700],
labelStyle: TextStyle(fontWeight: FontWeight.w800),
tabs: [
Tab(
text: "Home",
icon: Icon(Icons.home),
),
Tab(
text: "Our Story",
icon: Icon(Icons.people_alt),
),
Tab(
text: "Shop",
icon: Icon(Icons.storefront_outlined),
),
Tab(
text: "Special Offers",
icon: Icon(Icons.star),
),
Tab(
text: "Contact Us",
icon: Icon(Icons.call),
)
],
controller: _tabController,
),
),
Expanded(
child: Container(
child: TabBarView(
controller: _tabController,
children: [
Home(),
Center(child: Text("Our Story")),
Center(child: Text("Shop")),
Center(child: Text("Special Offers")),
Center(child: Text("Contact Us")),
],
),
),
),
],
),
),
),
);
}
}
class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
List<String> images = ["1.png", "2.png"];
PageController _sliderController = PageController();
int currImage = 0;
late PageView image_carousel;
@override
void initState() {
super.initState();
image_carousel = PageView.builder(
controller: _sliderController,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) => Image.asset(
"images/slider_images/${images[index % images.length]}",
// fit: BoxFit.cover,
),
);
}
@override
Widget build(BuildContext context) {
return Column(
children: [
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 400),
child: Stack(children: [
image_carousel,
Align(
alignment: Alignment.centerLeft,
child: ElevatedButton(
onPressed: () {
_sliderController.previousPage(
duration: Duration(seconds: 1), curve: Curves.easeIn);
},
style: ElevatedButton.styleFrom(
elevation: 0,
shape: CircleBorder(),
backgroundColor: Colors.white70,
foregroundColor: Colors.black),
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(
Icons.arrow_back_ios_rounded,
size: 40,
),
)),
),
Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
onPressed: () {
_sliderController.nextPage(
duration: Duration(seconds: 1), curve: Curves.easeIn);
},
style: ElevatedButton.styleFrom(
elevation: 0,
shape: CircleBorder(),
backgroundColor: Colors.white70,
foregroundColor: Colors.black),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.arrow_forward_ios_rounded,
size: 40,
),
)),
)
]),
),
Container(
height: 100,
width: 400,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(children: List.generate(4, (index) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
padding: const EdgeInsets.all(8.0),
child:
Image(image: AssetImage("assets/images/options_banner.png"))),)),
),
)
],
);
}