This is my code
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
// appBar: AppBar(
// backgroundColor: Colors.white,
// automaticallyImplyLeading: false,
// ),
body: SingleChildScrollView(
child: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.only(top: 20, bottom: 20),
child: Padding(
padding: EdgeInsets.all(20),
child: Text(
"Dashboard",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
)),
decoration: BoxDecoration(color: const Color(0xff09325E)),
),
Positioned(
top: 85,
child: Container(
width: 470,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15.0)),
child: Container(
// height: 500,
// height: MediaQuery.of(context).size.height - 90,
child: Column(
children: [
SizedBox(
width: 400,
height: 100,
child: Align(
alignment: Alignment.centerLeft,
child: Text(
"Kasus Tertinggi",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20),
),
)),
Divider(color: Color(0xffD3D3D3)),
Column(children: [
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
Container(
margin: EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
Divider(color: Color(0xffD3D3D3)),
])
],
),
),
))
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
// Navigator.of(context).pushNamed('/create');
}),
tooltip: 'Add Product',
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
iconSize: 30.0,
// padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
// Navigator.of(context).pushNamed('/home');
},
),
IconButton(
iconSize: 30.0,
// padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.person),
onPressed: () {
Navigator.of(context).pushNamed('/profile');
},
)
],
),
),
),
);
}
}
I have try using singlechild SingleChildScrollView but it's not working, how to make scrollable whole screen include appbar scaffold?
CodePudding user response：
Use CustomScrollView, I did some refactoring to your code import sliver_tools package for sliverStack
import 'package:sliver_tools/sliver_tools.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
// ignore: library_private_types_in_public_api
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
const SliverAppBar(
title: Text(
'AppBAR',
style: TextStyle(color: Colors.indigo),
),
),
SliverPadding(
padding: const EdgeInsets.only(bottom: 20),
sliver: SliverStack(
insetOnOverlap: false,
children: [
SliverToBoxAdapter(
child: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(top: 20, bottom: 20),
decoration: const BoxDecoration(color: Color(0xff09325E)),
child: const Padding(
padding: EdgeInsets.all(20),
child: Text(
"Dashboard",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
)),
),
),
SliverPositioned.fill(
top: 80,
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
offset: Offset(0, 4),
blurRadius: 8,
color: Color.fromRGBO(0, 0, 0, 0.1),
),
]),
),
),
SliverPositioned.fill(
top: 100,
child: SliverPadding(
padding: const EdgeInsets.fromLTRB(15, 8, 15, 0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate(
(context, i) {
return Column(
children: [
Container(
margin: const EdgeInsets.only(top: 100),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Expanded(
flex: 2,
child: Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
),
Expanded(
flex: 6,
child: Column(
children: const [
Align(
alignment: Alignment.centerLeft,
child: Text(
"POLSEK METRO TAMAN SARI",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pola Waktu 02.00 - 04.00",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
)),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Wilayah: KELAGIAN",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15),
))
],
),
),
Expanded(
flex: 2,
child: Column(children: const [
Text("1",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
Text("KASUS",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15)),
])),
],
),
),
const Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Divider(color: Color(0xffD3D3D3)),
),
],
);
},
childCount: 6,
),
),
),
),
],
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () => setState(() {
Navigator.of(context).pushNamed('/create');
}),
backgroundColor: Colors.indigo,
tooltip: 'Add Product',
child: const Icon(
Icons.add,
color: Colors.white,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: Container(
height: 60.0,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.home),
onPressed: () {
//Navigator.of(context).pushNamed('/home');
},
),
IconButton(
iconSize: 30.0,
padding: EdgeInsets.only(left: 28.0),
icon: Icon(Icons.person),
onPressed: () {
// Navigator.of(context).pushNamed('/profile');
},
)
],
),
),
),
);
}
}
CodePudding user response：
Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, isScrolled) {
return [
const SliverAppBar(
title: Text("Title"),
)
];
},
body: MediaQuery.removePadding(
context: context,
removeTop: true,
child: // your body
),
),
);