Scrolling the page using SingleChildScrollView? - flutter

Question

I try to use SingleChildScrollView to create the scrolling page but it comes out the error, how could I solve the problem? The result is that the fixed appbar and a scrollable form.
The error: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
The error seems to tell me that the height is not enough but I am frustrated in what mistakes I have made.
the code I designed:
import 'package:dailyreport/weatheritem.dart';
import 'package:scroll_snap_list/scroll_snap_list.dart';
class ReferenceDetail extends StatefulWidget {
#override
_ReferenceDetailState createState() => _ReferenceDetailState();
}
class _ReferenceDetailState extends State<ReferenceDetail> {
final _formKey = GlobalKey<FormState>();
late Function slideAction;
List<Widget> weatherData = [];
ScrollController controller = ScrollController();
bool closeTopContainer = false;
double topContainer = 0;
int _focusedIndex = 0;
void _onItemFocus(int index) {
setState(() {
_focusedIndex = index;
});
}
void getPostData() {
List<dynamic> returnweather = WEATHERITEM; //get the weather data
List<Widget> weatherlist = [];
returnweather.forEach((post) {
weatherlist.add(
Container(
height: 200,
width: 120,
margin: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 40.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
color: Colors.white,
boxShadow: [
BoxShadow(color: Colors.black.withAlpha(100), blurRadius: 5.0),
]),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
post["weather"],
),
SizedBox(height: 5.0),
Text(
post["weather_name"],
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: Colors.grey,
),
),
],
),
),
),
);
});
setState(() {
weatherData = weatherlist;
});
SizedBox(height: 50.0);
}
int selectedRadio = 0;
#override
void initState() {
super.initState();
selectedRadio = 0;
_onItemFocus(_focusedIndex);
getPostData();
controller.addListener(() {
double value = controller.offset / 119;
setState(() {
topContainer = value;
closeTopContainer = controller.offset > 100;
});
});
}
setSelectedRadio(int val) {
setState(() {
selectedRadio = val;
});
}
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.orange.shade200, Colors.white])),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: new AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
leading: IconButton(
icon: Icon(Icons.arrow_back_ios_outlined,
color: Colors.black, size: 30),
onPressed: () {
Navigator.of(context).pop();
},
),
title: Text(
'日報表',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 30,
color: Colors.black,
),
),
),
body: SingleChildScrollView(
child: Form(
key: _formKey,
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Padding(
padding: const EdgeInsets.only(top: 25.0, left: 20.0),
child: Container(
child: Text(
'項目名稱:',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Center(
child: Text(
'Chuk Yuen Shopping Ctr.30 project',
style:
TextStyle(fontSize: 16, fontWeight: FontWeight.normal),
),
),
),
RadioListTile(
value: 1,
groupValue: selectedRadio,
title: Text(
'參考編號:',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
subtitle: Text(
'202012170000',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal,
),
),
onChanged: (value) {
setSelectedRadio(1);
},
),
RadioListTile(
value: 2,
groupValue: selectedRadio,
title: Text(
'客戶編號:',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
onChanged: (value) {
setSelectedRadio(2);
},
),
selectedRadio == 2
? Padding(
padding: const EdgeInsets.only(
top: 5.0, left: 20.0, right: 20.0),
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: BorderSide.none,
),
fillColor: Colors.white,
filled: true,
hintText: '輸入客戶編號',
),
),
)
: SizedBox(),
Padding(
padding: EdgeInsets.only(left: 20.0),
child: Text(
'發布日期:',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Padding(
padding: EdgeInsets.only(
top: 10.0, left: 20.0, right: 20.0, bottom: 10.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
height: 50,
color: Colors.white,
child: InkWell(
onTap: () async {
final initialDate = DateTime.now();
await showDatePicker(
context: context,
initialDate: initialDate,
//showEXTalkDay == false ? initialDate : exTalkDay,
firstDate: DateTime(DateTime.now().year - 2),
lastDate: DateTime(DateTime.now().year + 3),
builder: (BuildContext context, Widget? child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.light(),
primaryColor: Colors.orange,
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.grey)),
),
child: child!,
);
},
);
},
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 30),
child: Text(
'28/08/21',
/*showEXTalkDay == false
? 'DD/MM/YY'
: '${exTalkDay.day}/${exTalkDay.month}/${exTalkDay.year}'*/
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.grey[500],
),
),
),
Expanded(child: SizedBox()),
Padding(
padding: EdgeInsets.only(right: 20),
child: Image(
image: AssetImage('assets/arrowupanddown.png')),
),
],
),
),
),
),
),
SizedBox(height: 10.0),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Text(
'天氣:',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Expanded(
flex: 1,
child: ScrollSnapList(
shrinkWrap: true,
onItemFocus: _onItemFocus,
itemSize: 150,
scrollDirection: Axis.horizontal,
itemCount: weatherData.length,
itemBuilder: (context, index) {
double scale = 1.0;
if (topContainer > 0.5) {
scale = index + 0.5 - topContainer;
if (scale < 0) {
scale = 0;
} else if (scale > 1) {
scale = 1;
}
}
return GestureDetector(
child: Opacity(
opacity: scale,
child: Transform(
transform: Matrix4.identity()..scale(scale, scale),
alignment: Alignment.bottomCenter,
child: Align(
heightFactor: 1.0,
alignment: Alignment.topCenter,
child: weatherData[index]),
),
),
);
}),
),
SizedBox(height: 20.0),
Row(children: [
Padding(
padding: const EdgeInsets.only(left: 20.0, top: 15.0),
child: Text(
'工地現場工作',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
Expanded(child: SizedBox()), //space between two elements
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(50),
child: SizedBox(
height: 50,
width: 100,
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Colors.orange.shade600),
),
onPressed: () {
Navigator.of(context).pop();
}, //onpressed
child: Text(
'添加',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
]),
SizedBox(height: 20),
Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Text(
'任務',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
]),
),
),
),
);
}
}

Answer 1

How about wrap SingleChildScrollView with Expanded?
That mentioned at here.
The Column has no Expanded children, so rather than take on the infinite height from its BoxConstraints.maxHeight, (the viewport provides no maximum height constraint), it automatically tries to shrink to fit its children. It cannot be smaller than its BoxConstraints.minHeight, though, and It therefore becomes the bigger of the minimum height provided by the ConstrainedBox and the sum of the heights of the children.

Answer 2

you should use SafeArea widget or Container widget as child of SingleChildScrollView