Horizontale Balkendiagramme in Flutter

Question

Ich versuche ein horizontales Balkendiagramm im Flattern zu erzielen. Ich bin auf diese Pakete fl_charts und chart_flutter gestoßen. Aber ich muss das Aussehen so anpassen, dass es mit dem folgenden Bild übereinstimmt, das ich angehängt habe. Wenn ein Champion mich dabei unterstützen kann, mir Schritte zu geben, wie dies erreicht werden kann, ist ein beispielhafter Code sehr hilfreich. Vielen Dank im Voraus.

Answer 1

Verwenden Sie LayoutBuilder , um die mögliche Breite zu ermitteln, und IntrinsicWidth , um die Stelle von Titel und Zahlen zu berechnen. Verkleinern Sie jedoch nicht den langen Titeltext.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: MyHomePage(),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _title('Food Weight(grams)'),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ChartLine(title: 'Fat', number: 1800, rate: 1),
                ChartLine(title: 'Protein', number: 600, rate: 0.4)
              ],
            ),
          ),
          _title('Ratios'),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                ChartLine(
                  title: 'Calculum/Phosporous ratio = 2:1',
                  rate: 0.5,
                ),
                ChartLine(
                  title: 'Omega3/6 ratio = 1:4',
                  rate: 0.4,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _title(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 8.0, top: 4),
      child: Text(
        title,
        style: TextStyle(fontSize: 18),
      ),
    );
  }
}

class ChartLine extends StatelessWidget {
  const ChartLine({
    Key key,
    @required this.rate,
    @required this.title,
    this.number,
  })  : assert(title != null),
        assert(rate != null),
        assert(rate > 0),
        assert(rate <= 1),
        super(key: key);

  final double rate;
  final String title;
  final int number;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      final lineWidget = constraints.maxWidth * rate;
      return Padding(
        padding: const EdgeInsets.only(bottom: 10.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              constraints: BoxConstraints(minWidth: lineWidget),
              child: IntrinsicWidth(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 18,
                      ),
                    ),
                    if (number != null)
                      Text(
                        number.toString(),
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                  ],
                ),
              ),
            ),
            Container(
              color: Colors.blue,
              height: 60,
              width: lineWidget,
            ),
          ],
        ),
      );
    });
  }
}

Answer 2

Sie können das Flutter-Diagrammpaket von Syncfusion verwenden, wie ich es jetzt für meine Anwendung verwende. Rendern Sie mit dem SfCartesianChart-Widget von Syncfusion das Balkendiagramm zusammen mit den Datenbeschriftungen. Durch Ändern der Standardposition der Datenbeschriftung können Sie eine Ausgabe erzielen. Dieses Widget funktioniert auf Android-, iOS- und Webplattformen.

• Paket- https://pub.dev/packages/syncfusion_flutter_charts
• Eigenschaften- https://www.syncfusion.com/flutter-widgets/flutter-charts
• Dokumentation- https://help.syncfusion.com/flutter/cartesian-charts/overview