My code:
var _body = Builder(builder: (BuildContext context) {
return Padding(
padding: EdgeInsets.only(
top: 340),
child: Column(
children: [
SizedBox(height: 10),
_customWidget,
SizedBox(height: 10),
Expanded(
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
CustomWidget(
txt: 'item1',
txt2: 'info',
callback: () {
_showDialog(context);
},
),
CustomWidget(
txt: 'item1',
txt2: 'info',
callback: () {
_showDialog(context);
},
},
),
CustomWidget(
txt: 'item1',
txt2: 'info',
callback: () {
_showDialog(context);
},
),
_customWidget,
_customWidget,
],
)),
)
],
),
);
Another exception was thrown: RenderFlex children have non-zero flex but incoming width constraints are unbounded.
Another exception was thrown: RenderBox was not laid out: RenderFlex#97324 relayoutBoundary=up40 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I have tried wrapping children into expanded and that does not work.
I cannot add any height to my scrollview because the children inside scrollview will only show if a condition is correct. So the height of the list depends on how many children that will show.
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.mainColor,
body: Container(
child: Stack(
children: <Widget>[
_body,
],
),
),
);
}
Class:
class CustomWidget extends StatelessWidget {
final String txt;
final String? txt2;
final GestureTapCallback? callback;
SettingsItemWidget({
required this.txt,
this.txt2,
this.callback,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
if (callback != null) {
callback!();
}
},
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 25.0, left: 30.0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Text(
txt,
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w500,
fontFamily: "Sofia",
),
),
),
],
),
Flexible(
child: Padding(
padding: const EdgeInsets.only(right:20.0),10.0),
child: Text(
txt2 ?? '',
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: Colors.grey[400],
fontWeight: FontWeight.w300,
fontFamily: "Sofia",
),
)),
),
],
),
),
SizedBox(
height: 20.0,
),
Container(
height: 0.1,
color: Colors.white70,
)
],
),
);
}
}
5
I think you want to make a SingleChildScrollView with a limited height.
You can wrap it with a Container or SizedBox and specify the height you want.
For example like this:
import 'package:flutter/material.dart';
void main() {
runApp(const TstApp());
}
class TstApp extends StatelessWidget {
const TstApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Tst',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
HomePage({super.key});
final Widget _customWidget = CustomWidget(
txt: 'txt',
txt2: 'txt2',
callBack: () {},
);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 10), // was: 340
child: Column(
children: [
const SizedBox(height: 10),
_customWidget,
const SizedBox(height: 10),
SizedBox(
height: 300,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
CustomWidget(
txt: 'item1',
txt2: 'info',
callBack: () {
_showDialog(context);
},
),
CustomWidget(
txt: 'item2',
txt2: 'info',
callBack: () {
_showDialog(context);
},
),
CustomWidget(
txt: 'item3',
txt2: 'info',
callBack: () {
_showDialog(context);
},
),
_customWidget,
_customWidget,
],
),
),
),
],
),
),
);
}
void _showDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('Alert'),
content: const Text('This is a simple alert dialog.'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('OK'),
),
],
);
},
);
}
}
class CustomWidget extends StatelessWidget {
const CustomWidget({
super.key,
required this.txt,
required this.txt2,
this.callBack,
});
final String txt;
final String txt2;
final VoidCallback? callBack;
@override
Widget build(BuildContext context) {
return ListTile(
title: Text(txt),
subtitle: Text(txt2),
onTap: callBack,
);
}
}
3