I tried to use SingleChildScrollView to create a scrolling page but got an error. How can I resolve the problem? The result is a fixed AppBar and a scrollable form. Error: RenderFlex subitem has non-zero Flex but the height constraint passed in is unbounded. Mistakes seemed to tell me I wasn’t tall enough, but I was frustrated with my mistakes. I designed the code
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,
),
),
),
]),
),
),
),
);
}
}
Copy the code