I want the body of my page to slide, but I couldn't get it to work. Widgets on the page compress themselves instead of sliding. When I use single child scrollview, I get a hassize error. If you could help with this situation, I would greatly appreciate it. so far I have used singlechildscrollview and custom scroll but without success. I don't know if there is something I've overlooked. I will be glad if you help
SafeArea(
child: Scaffold(
body: Stack(
children: [
CustomAppbar(
homeIcon: true,
),
CustomBody(
height: MediaQuery.of(context).size.height * 0.7.w,
child: Column(
children: [
Padding(
padding: EdgeInsets.fromLTRB(25, 50, 25, 50),
child: ListView.builder(
shrinkWrap: true,
itemCount: 1,
itemBuilder: (context, index) {
return Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(25),
child: Container(
decoration:
buildProductContainerBoxDecoration(),
// PRODUCTS
child: Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
//PRODUCT TITLE-SUBTITLE
buildProductTitleAndSubTitle(),
// PRODUCT IMAGE-COUNTER
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
//PRODUCT IMAGE
buildProductImage(),
//PRODUCT COUNTER
Spacer(),
buildIncrementButton(viewModel),
buildProductCount(viewModel),
buildDecrementButton(viewModel),
Spacer(),
],
),
],
),
),
),
],
);
},
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Açıklama',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12))),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Açıklama',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12))),
),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: 'Açıklama',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
),
),
),
),
),
Expanded(
child: Card(
child: ListTile(
title: Text('ADRES BAŞLIĞIM'),
subtitle: Text('ADRESİM'),
trailing: Icon(
Icons.navigate_next_outlined,
),
),
),
),
Expanded(
child: Card(
child: ListTile(
title: Text('ADRES BAŞLIĞIM'),
subtitle: Text('ADRESİM'),
trailing: Icon(
Icons.navigate_next_outlined,
),
),
),
)
],
),
),
),
],
),
),
),
);
}
EDIT
I edited my custom body widget like this but the result did not change.
class CustomBody extends StatelessWidget {
final Widget? child;
final double height;
CustomBody({Key? key, this.child, required this.height}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: [
Align(
alignment: Alignment.bottomCenter,
child: CustomScrollView(
shrinkWrap: true,
slivers: [
SliverToBoxAdapter(
child: Container(
height: height,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60),
),
),
child: child,
),
),
],
),
),
],
);
}
}
CodePudding user response:
Did you try putting singlechildscrollview on custombody?
CodePudding user response:
cannot be more than 1 Expanded widget in a column. the best option is using a CustomScrollView like this :
Scaffold(
appBar: AppBar(),
drawer: Drawer(),
body: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildListDelegate(
[
Container(height: 50, color: Colors.red), // your widget here
Container(height: 50, color: Colors.green), // your widget here
Container(height: 50, color: Colors.green), // your widget here
Container(
height: 300,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('test'),
Text('test'),
Text('test'),
Text('test'),
],
),
), // your widget here
],
),
),
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 20),
),
),
SliverList(
delegate: SliverChildListDelegate(
[
Container(height: 50, color: Colors.red), // your widget here
Container(height: 50, color: Colors.green), // your widget here
Container(height: 50, color: Colors.green), // your widget here
Container(
height: 300,
color: Colors.grey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('test'),
Text('test'),
Text('test'),
Text('test'),
],
),
), // your widget here
],
),
),
],
),
)

