To fix this, you could use **a** `CustomScrollView` instead of `SingleChildScrollView` and a `SliverList` for the user profile section. That way, the `ReorderableListView` will work seamlessly with scrolling.
```
import 'package:flutter/material.dart';
class PostsView extends StatefulWidget {
const PostsView({super.key});
@override
State<PostsView> createState() => _PostsViewState();
}
class _PostsViewState extends State<PostsView> {
final List<int> items = List.generate(20, (index) => index); // Example items
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"My Profile",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfGaPeS62qusTUFyVchOrh_r2cL4_P8-q3bg&s',
),
),
SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('John Doe'),
Text("Hello, my name is John. Welcome to my profile."),
Text("Followers: 100"),
Text("Following: 100"),
Text("Posts: 100"),
Text("Comments: 100"),
Text("Likes: 100"),
],
),
],
),
Icon(Icons.more_vert),
],
),
),
],
),
),
SliverReorderableList(
itemBuilder: (context, index) {
return Container(
key: ValueKey(items[index]),
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.grey.shade200,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: Colors.black,
),
),
child: Column(
children: [
Image.network(
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfGaPeS62qusTUFyVchOrh_r2cL4_P8-q3bg&s',
width: 100,
height: 100,
),
Text("Post title: ${items[index]}"),
Text("Post description: ${items[index]}"),
],
),
);
},
itemCount: items.length,
onReorder: (oldIndex, newIndex) {
setState(() {
if (newIndex > oldIndex) newIndex -= 1;
final item = items.removeAt(oldIndex);
items.insert(newIndex, item);
});
},
),
],
),
);
}
}
```
Adding a page like below and routing might help
<!-- language: lang-dart -->
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
// TODO: implement initState
super.initState();
Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(color: Colors.redAccent),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 50.0,
child: Icon(
Icons.shopping_cart,
color: Colors.greenAccent,
size: 50.0,
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
Flutkart.name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
Flutkart.store,
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
}
}
<!-- end snippet -->
If you want to follow through, see:
https://www.youtube.com/watch?v=FNBuo-7zg2Q
