I am creating a app with a graphic, however the graphic itself is getting ripped in the horizontal direction:
This is the code of the ReportPage widget:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mobile/src/components/LineChartComponent/LineChartComponent.dart';
class ReportPage extends StatefulWidget {
@override
_ReportPageState createState() => _ReportPageState();
}
class _ReportPageState extends State<ReportPage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: false,
expandedHeight: 175.0,
backgroundColor: Colors.white,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
'images/relatorio.png',
height: 210,
width: 210,
),
),
),
SliverAppBar(
pinned: true,
floating: false,
expandedHeight: 20.0,
backgroundColor: Colors.blue,
flexibleSpace: FlexibleSpaceBar(
title: Text("Report"),
),
),
SliverFixedExtentList(
itemExtent: 150.0,
delegate: SliverChildListDelegate(
[
ClipRRect(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 2,
),
borderRadius: BorderRadius.circular(30),
color: Colors.blue,
),
child: FlatButton(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.assignment,
color: Colors.white,
size: 70,
),
Text(
"Amount of water",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
],
),
onPressed: null,
),
),
),
],
),
),
SliverList(
delegate: SliverChildListDelegate(
[
SizedBox(
height: 15.0,
),
ClipRRect(
child: Container(
child: Text(
"Used water L/day: ",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,
fontSize: 23,
fontWeight: FontWeight.w500,
),
),
),
),
Container(
height: 300,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Padding(
padding: const EdgeInsets.only(
left: 8.0,
right: 8.0,
bottom: 10.0,
),
child: LineChartComponent(),
),
],
),
)
],
),
),
],
),
);
}
}
However doing this, makes flutter give me the following error:
RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
Also here is the code for the LineChartComponent widget:
import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart';
import 'package:mobile/src/components/LineChartComponent/LineChartBloc.dart';
class LineChartComponent extends StatelessWidget {
final LineChartBloc _lineChartBloc = new LineChartBloc();
@override
Widget build(BuildContext context) {
return TimeSeriesChart(
_lineChartBloc.makeGraphicSeries(),
animationDuration: Duration(seconds: 3),
animate: true,
);
}
}
The Bloc class in the LineChartComponent only generate the data to make the graphic appears.
How can I make the horizontal Scroll?
PS: I already tried this solution, but it gives me the same error.
