Create horizontal scroll with Slivers in Flutter

Viewed 562

I am creating a app with a graphic, however the graphic itself is getting ripped in the horizontal direction:

Report Page

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.

0 Answers
Related