You need to use the same `ScrollController` in all the scrollable widgets inside the `DraggableScrollableSheet` , its really weird cuz i know the scrollController should attach to just one scrollable widget but its work.
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
late TabController _tabController;
final List<String> _items = List.generate(50, (index) => 'Item $index');
@override
void initState() {
super.initState();
_tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: DraggableScrollableSheet(
initialChildSize: 0.35,
minChildSize: 0.15,
maxChildSize: 0.8,
builder: (context, scrollController) {
return Container(
decoration: const BoxDecoration(
borderRadius:
BorderRadius.vertical(top: Radius.circular(16.0)),
color: Colors.amber,
),
child: CustomScrollView(
controller: scrollController,
slivers: <Widget>[
SliverToBoxAdapter(
child: Container(
padding: const EdgeInsets.all(16),
height: 50,
child: const Text('Header'),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TabBar(
controller: _tabController,
isScrollable: true,
tabs: const [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
Tab(text: 'Tab 4'),
],
),
),
),
SliverToBoxAdapter(
child: SizedBox(
height: 400,
child: TabBarView(
controller: _tabController,
children: [
ListView.builder(
controller: scrollController,
itemCount: _items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_items[index]),
);
},
),
ListView.builder(
controller: scrollController,
itemCount: _items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_items[index]),
);
},
),
ListView.builder(
controller: scrollController,
itemCount: _items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_items[index]),
);
},
),
ListView.builder(
controller: scrollController,
itemCount: _items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_items[index]),
);
},
),
],
),
),
),
],
));
},
));
}
}
> First of all, you really need to optimize your widgets. You could have
> achieved the design in a much easier way.
Now, you have made a little mistake with your current widget design pattern. You need to wrap your ``Stack()`` under ``Column()`` and move ``ListView()`` from ``Stack()`` and make it as second child of ``Column()`` and it should work.
**Full source code:**
Column(children: <Widget>[
Stack(children: <Widget>[
Container(
height: MediaQuery.of(context).size.height * .4,
),
Container(
height: MediaQuery.of(context).size.height * .14,
color: Colors.pink[100],
),
Positioned(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Temples",
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
),
),
Positioned(
top: 95,
child: Padding(
padding: const EdgeInsets.only(left: 4, right: 4),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: 50.0,
width: MediaQuery.of(context).size.width * .97,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: Container(
margin: EdgeInsets.only(
left:
MediaQuery.of(context).size.width *
.4),
child: new Text(
"Favourite",
style: TextStyle(
fontSize: 16,
color: Colors.grey,
fontWeight: FontWeight.bold),
)),
)),
),
Container(
height: 50.0,
width: MediaQuery.of(context).size.width * .5,
color: Colors.transparent,
child: new Container(
decoration: new BoxDecoration(
gradient: LinearGradient(
// Where the linear gradient begins and ends
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// Add one stop for each color. Stops should increase from 0 to 1
stops: [0.1, 0.5, 0.7, 0.9],
colors: [
// Colors are easy thanks to Flutter's Colors class.
Colors.pink[800],
Colors.pink[700],
Colors.red[600],
Colors.red[400],
],
),
color: Colors.redAccent[100],
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(40.0),
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0),
topRight: const Radius.circular(40.0))),
child: new Center(
child: new Text(
"ALL",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
)),
),
],
),
],
),
),
),
]),
ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: 2,
itemBuilder: (context, index) {
return Text("my widget card will add here");
})
])
