I'm trying to place a List view inside a page view so that I can swipe horizontally between pages and scroll vertically on each page (because is a list view). However, there is the following problem.
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.
Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
The relevant error-causing widget was:
PageView PageView:file:///C:/Users/MEL/Desktop/Universidad/Desarrollo Movil/weather/lib/View/home.dart:46:30
When the exception was thrown, this was the stack:
#0 RenderViewport.computeDryLayout.<anonymous closure>
The code is the following
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:weather/Data/Remote/weather_client.dart';
import 'package:weather/View/Widgets/home_widgets.dart';
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: LayoutBuilder(
builder: (BuildContext ctx, BoxConstraints constraints) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.transparent,
leading: IconButton(
onPressed: () async {
var client =
OpenWeatherWapClient('e716074c196d8c560f0b61f6ea416f30');
client.fetchWeatherCity('Tokyo');
},
icon: const Icon(CupertinoIcons.search),
),
),
body: Stack(
children: [
Image.asset('Assets/night.jpg',
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity),
Column(
children: [
Container(
height: constraints.maxHeight * 0.175,
),
PageView.builder(
itemBuilder: (ctx, i) => WeatherCityItem(constraints: constraints)),
],
),
],
),
);
},
),
);
}
}
The file where
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class WeatherStatisticItem extends StatefulWidget {
var constraints;
WeatherStatisticItem({Key? key, this.constraints}) : super(key: key);
@override
State<WeatherStatisticItem> createState() => _WeatherStatisticItemState();
}
class _WeatherStatisticItemState extends State<WeatherStatisticItem> {
@override
Widget build(BuildContext context) {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(4.0),
child: Container(
height: 200,
padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Row(
children: [
Icon(
CupertinoIcons.thermometer,
color: Colors.white.withOpacity(0.08),
),
Text(
"HUMIDITY",
style: GoogleFonts.inter(
fontSize: widget.constraints.maxWidth * 0.035,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white.withOpacity(0.35)),
),
],
),
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"11°",
style: GoogleFonts.inter(
fontSize: widget.constraints.maxWidth * 0.075,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white),
),
)
],
),
Text(
"Simlar to the actual temperature",
style: GoogleFonts.inter(
fontSize: widget.constraints.maxWidth * 0.04,
fontWeight: FontWeight.w300,
letterSpacing: 0.001,
color: Colors.white),
),
],
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white10),
color: Colors.black54.withOpacity(0.25),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
),
);
}
}
class WeatherCityItem extends StatelessWidget {
var constraints;
WeatherCityItem({Key? key, this.constraints}) : super(key: key);
@override
Widget build(BuildContext context) {
return Expanded(
child: ListView(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.symmetric(
vertical: 0, horizontal: 20),
children: [
Column(
children: [
Container(
alignment: Alignment.center,
child: Text(
"Bogotá",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.11,
fontWeight: FontWeight.w300,
color: Colors.white),
),
),
Text(
"11°",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.175,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(CupertinoIcons.clock,
color: Colors.white),
Container(
width: constraints.maxWidth * 0.0175,
),
Text(
"11:18 pm",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.05,
fontWeight: FontWeight.w300,
letterSpacing: 0.001,
color: Colors.white),
),
],
),
Container(
height: constraints.maxHeight * 0.075,
)
],
),
Container(
padding: const EdgeInsets.symmetric(
vertical: 15, horizontal: 10),
child: Column(
children: [
Align(
child: Text(
"Weather report",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.055,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white),
),
alignment: Alignment.centerLeft,
),
const Align(
alignment: Alignment.centerRight,
child: Divider(
color: Colors.white54,
),
),
Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis risus orci, non consequat nulla pulvinar",
style: GoogleFonts.inter(
fontSize: constraints.maxWidth * 0.04,
fontWeight: FontWeight.w200,
letterSpacing: 0.001,
color: Colors.white),
),
],
),
decoration: BoxDecoration(
border: Border.all(color: Colors.white10),
color: Colors.black54.withOpacity(0.25),
borderRadius:
BorderRadius.all(Radius.circular(20)),
),
),
Row(
children: [
WeatherStatisticItem(constraints: constraints),
WeatherStatisticItem(constraints: constraints),
],
),
Row(
children: [
WeatherStatisticItem(constraints: constraints),
WeatherStatisticItem(constraints: constraints),
],
),
Row(
children: [
WeatherStatisticItem(constraints: constraints),
WeatherStatisticItem(constraints: constraints),
],
)
],
),
);
}
}
I've made some research on the internet and its workaround appears to be to add a fixed size box to the list view, this doesn't work though.
CodePudding user response：
In ur Stack, u should wrap an Expanded to ListView, or it don't know its height.
By the way, if u need a background image, u can wrap a Container to ur Column and set its
decoration->image.
And then u can remove ur Stack.
Some code
body: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('Assets/night.jpg')),
),
child: Column(
children: [
Container(
height: constraints.maxHeight * 0.175,
),
Expanded(
child: PageView.builder(
itemBuilder: (ctx, i) => WeatherCityItem(constraints: constraints),
),
),
],
),
),
Dont forget to remove Expanded in ur WeatherCityItem.
Widget in PageView, default max width, which in ur case is screenWidth.